Gridview Header Freeze non funziona nelle pagine master

Question

Ho bisogno che l'intestazione di gridview sia bloccata durante lo scorrimento. Quindi ho uno script che funziona in pagine normali. Ma mentre si usano le pagine Master, si comporta come una normale griglia che ha una pergamena. cosa devo cambiare nello script per farlo funzionare nelle pagine master?

<script type="text/javascript" language="javascript"> 

      var GridId = "<%= GridView1.ClientID %>"; 
      var ScrollHeight = 300; 
      window.onload = function() { 
       var grid = document.getElementById(GridId); 
       var gridWidth = grid.offsetWidth; 
       var gridHeight = grid.offsetHeight; 
       var headerCellWidths = new Array(); 
       for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) { 
        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth; 
       } 
       grid.parentNode.appendChild(document.createElement("div")); 
       var parentDiv = grid.parentNode; 

       var table = document.createElement("table"); 
       for (i = 0; i < grid.attributes.length; i++) { 
        if (grid.attributes[i].specified && grid.attributes[i].name != "id") { 
         table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); 
        } 
       } 
       table.style.cssText = grid.style.cssText; 
       table.style.width = gridWidth + "px"; 
       table.appendChild(document.createElement("tbody")); 
       table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); 
       var cells = table.getElementsByTagName("TH"); 

       var gridRow = grid.getElementsByTagName("TR")[0]; 
       for (var i = 0; i < cells.length; i++) { 
        var width; 
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) { 
         width = headerCellWidths[i]; 
        } 
        else { 
         width = gridRow.getElementsByTagName("TD")[i].offsetWidth; 
        } 
        cells[i].style.width = parseInt(width - 3) + "px"; 
        gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
       } 
       parentDiv.removeChild(grid); 

       var dummyHeader = document.createElement("div"); 
       dummyHeader.appendChild(table); 
       parentDiv.appendChild(dummyHeader); 
       var scrollableDiv = document.createElement("div"); 
       if (parseInt(gridHeight) > ScrollHeight) { 
        gridWidth = parseInt(gridWidth) + 17; 
       } 
       scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px"; 
       scrollableDiv.appendChild(grid); 
       parentDiv.appendChild(scrollableDiv); 
      } 

    </script> 


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" > 
      <Columns 
       <asp:BoundField DataField="ContactName" HeaderText="Contact Name" /> 
       <asp:BoundField DataField="City" HeaderText="City" /> 
       <asp:BoundField DataField="Country" HeaderText="Country" /> 
      </Columns> 
     </asp:GridView> 

Answer 1

Questo può essere ottenuto utilizzando JQuery. Un po 'di cambiamenti negli script di cui sopra fatto questo. ottenuto l'output.

// inserisce il codice di seguito in un file .js

(function ($) { 
     $.fn.Scrollable = function (options) { 
      var defaults = { 
       ScrollHeight: 300, 
       Width: 0 
      }; 
      var options = $.extend(defaults, options); 
      return this.each(function() { 
       var grid = $(this).get(0); 
       var gridWidth = grid.offsetWidth; 
       var headerCellWidths = new Array(); 
       for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) { 
        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth; 
       } 
       grid.parentNode.appendChild(document.createElement("div")); 
       var parentDiv = grid.parentNode; 

       var table = document.createElement("table"); 
       for (i = 0; i < grid.attributes.length; i++) { 
        if (grid.attributes[i].specified && grid.attributes[i].name != "id") { 
         table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); 
        } 
       } 
       table.style.cssText = grid.style.cssText; 
       table.style.width = gridWidth + "px"; 
       table.appendChild(document.createElement("tbody")); 
       table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); 
       var cells = table.getElementsByTagName("TH"); 

       var gridRow = grid.getElementsByTagName("TR")[0]; 
       for (var i = 0; i < cells.length; i++) { 
        var width; 
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) { 
         width = headerCellWidths[i]; 
        } 
        else { 
         width = gridRow.getElementsByTagName("TD")[i].offsetWidth; 
        } 
        cells[i].style.width = parseInt(width - 3) + "px"; 
        gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
       } 
       parentDiv.removeChild(grid); 

       var dummyHeader = document.createElement("div"); 
       dummyHeader.appendChild(table); 
       parentDiv.appendChild(dummyHeader); 
       if (options.Width > 0) { 
        gridWidth = options.Width; 
       } 
       var scrollableDiv = document.createElement("div"); 
       gridWidth = parseInt(gridWidth) + 17; 
       scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";    
       scrollableDiv.appendChild(grid); 
       parentDiv.appendChild(scrollableDiv); 
      }); 
     }; 
    })(jQuery); 

// Aggiungere questo piccolo pezzo di codice nella pagina.

Answer 2

Ho modificato il codice precedente per il supporto di più schermate di griglia.

(function ($) { 
$.fn.Scrollable = function (options) { 
    var defaults = { 
     ScrollHeight: 300, 
     Width: 0 
    }; 
    var options = $.extend(defaults, options); 

    return this.each(function (index) { 
     var grid = $(this).get(index); 
     var gridWidth = grid.offsetWidth; 
     var gridHeight = grid.offsetHeight; 
     var headerCellWidths = new Array(); 
     for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) { 
      headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth; 
     } 
     grid.parentNode.appendChild(document.createElement("div")); 
     var parentDiv = grid.parentNode; 

     var table = document.createElement("table"); 
     for (i = 0; i < grid.attributes.length; i++) { 
      if (grid.attributes[i].specified && grid.attributes[i].name != "id") { 
       table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); 
      } 
     } 
     table.style.cssText = grid.style.cssText; 
     table.style.width = gridWidth + "px"; 
     table.appendChild(document.createElement("tbody")); 
     table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); 
     var cells = table.getElementsByTagName("TH"); 

     var gridRow = grid.getElementsByTagName("TR")[0]; 
     for (var i = 0; i < cells.length; i++) { 
      var width; 
      if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) { 
       width = headerCellWidths[i]; 
      } 
      else { 
       width = gridRow.getElementsByTagName("TD")[i].offsetWidth; 
      } 
      cells[i].style.width = parseInt(width - 3) + "px"; 
      gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
     } 
     parentDiv.removeChild(grid); 

     var dummyHeader = document.createElement("div"); 
     dummyHeader.appendChild(table); 
     parentDiv.appendChild(dummyHeader); 
     if (options.Width > 0) { 
      gridWidth = options.Width; 
     } 
     var scrollableDiv = document.createElement("div"); 
     if (parseInt(gridHeight) > options.ScrollHeight) { 
      gridWidth = parseInt(gridWidth) + 17; 
     } 
     scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px"; 
     scrollableDiv.appendChild(grid); 
     parentDiv.appendChild(scrollableDiv); 
    }); 
}; 
})(jQuery); 

Aggiungere questo codice nella pagina.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#<%=GridView1.ClientID %>, #<%=GridView2.ClientID %>, #<%=GridView3.ClientID %>').Scrollable({ 
      ScrollHeight: 200 
     }); 
    }); 
</script>