When I fixed the header of my GridView and scrolled down, the headers remained constant but were not displayed properly. All the column headers appeared shrinked and did not align with the respective columns. Despite trying various solutions, nothing seemed to work. In simple terms, the width of the headers did not match the columns. I utilized JavaScript for scrolling and applied a CssClass for fixing.
If you have a solution, please help me out.
JavaScript Code
<script type = "text/javascript">
var GridId = "<%=GridViewLeaveHistory.ClientID %>";
var ScrollHeight = 300;
var ScrollWidth = 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" + ScrollWidth;
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
}
Css Class
.Freezing
{
position: relative;
top: expression(this.offsetParent.scrollTop-1);
z-index: 10;
}
GridView Code
<div style="width: 810px; height: 259px;">
<asp:GridView ID="GridViewLeaveHistory" runat="server" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#0061C1"
BorderStyle="None" CaptionAlign="Bottom" EmptyDataText="No Records Found"
Font-Names="Verdana" Font-Size="X-Small" ForeColor="#0061C1" Height="18px"
OnRowCommand="GridViewLeaveHistory_RowCommand"
OnRowDataBound="GridViewLeaveHistory_RowDataBound" CssClass="Freezing"
OnSelectedIndexChanged="GridViewLeaveHistory_SelectedIndexChanged"
ShowFooter="True" ShowHeaderWhenEmpty="True" width="801px">