Introduction
We may know many scripts to fix the gridview header. Personally, I feel some of the scripts are a little bit difficult to understand and some scripts are not working well in paging and sorting.
Here, I suggest one of the simple jquery for freeze Gridview
header which will work well in paging and sorting too.
Using the Code
In ASP design page, just create two grids:
dgvHeader
(we are going to use for freeze header) dgvSample
(this is actual grid to bind data)
Bind data into grid using data bind methods.
JQuery
See the below Jquery for fix header:
(function ($) {
$.fn.Scrollable = function (options) {
var defaults = {
ScrollHeight: 200,
Width:305
};
var options = $.extend(defaults, options);
return this.each(function () {
var grid = $(this).get(0);
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);
Call the Jquery into ASP Design page header and pass the grid names as a parameter:
$(document).ready(function () {
$("#<%=dgvHeader.ClientID %>").Scrollable({
ScrollHeight: 200
});
$("#<%=dgvSample.ClientID %>").Scrollable({
ScrollHeight: 200
});
});
We can change the height using scrollHeight
parameter.
This will work well in both horizontal and vertical scroll for vertical scroll.
Reference
I referred to this site to fix the issue: