Home » ASP.NET » How To Dynamically freeze ASP.Net Gridview header using JavaScript?

How To Dynamically freeze ASP.Net Gridview header using JavaScript?

Note: For jQuery Users I have created a Ready to use Plugin Scrollable GridView with Fixed Headers jQuery Plugin
But the issue was that these articles had some HTML and CSS arrangements need to be done which was not a piece of cake for many users. Hence I decided to find out an easy solution to the issue and here’s it.
In this article I will show you how you can easily make your GridView Scrollable with fixed headers using JavaScript.
 
HTML Markup
The HTML markup has nothing but a simple ASP.Net GridView with 3 columns.
<form id=”form1″ runat=”server”>
<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>
</form>
Client Side Script to Freeze Headers
Below is the JavaScript function that will freeze the GridView headers and also make it scrollable. You only need to place the script anywhere on your page or content page where you have the ASP.Net GridView.
<script type = “text/javascript”>
    var GridId = “<%=GridView1.ClientID %>”;
    var ScrollHeight = 300;
    window.onload = function () {
        var grid = document.getElementById(GridId);
        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);
        var scrollableDiv = document.createElement(“div”);
        gridWidth = parseInt(gridWidth) + 17;
        scrollableDiv.style.cssText = “overflow:auto;height:” + ScrollHeight + “px;width:” + gridWidth + “px”;
        scrollableDiv.appendChild(grid);
        parentDiv.appendChild(scrollableDiv);
    }
</script>
Here also you need to take two things into the two parameters.
1. GridId – Client ID of the GridView.
2. ScrollHeight – Height of the DIV with Scrollbars. Here I have specified it to 300 you can set it as per your needs.
That’s all you need to do for make Freeze your GridView headers or make your GridView a scrollable GridView with fixed headers.
The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera

* All browser logos displayed above are property of their respective owners.

Downloads
You can download the complete working source code using the download link provided below.

FreezeGridViewHeaderusingJavaScript.zip

Leave a Reply

Your email address will not be published. Required fields are marked *

www.000webhost.com