Gridview Encabezado Congelar no funciona en las páginas maestras

Question

Necesito que el encabezado gridview se congele mientras se desplaza. Así que tengo un script que funciona en páginas normales. Pero al usar páginas maestras, actúa como una cuadrícula normal que tiene un desplazamiento. ¿Qué debo cambiar en el script para que funcione en páginas maestras?

<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

Esto se puede lograr utilizando JQuery. Un poco de cambios en los scripts anteriores hicieron esto. obtuvo la salida.

// ponga el siguiente código en un archivo .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); 

// Añadir esta pequeña pieza de código en la página.

<script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      $('#<%=this.grdDisplay.ClientID %>').Scrollable(); 
     } 
      ) 
    </script> 

Answer 2

He modificado el código anterior para compatibilidad con múltiples gridviews.

(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); 

Agregue este código en la página.

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