Freeze Gridview Header Using JQuery

• Download source - 163.2 KB

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, // to set height of grid 
            Width:305 // to set width of grid Default value is 0 
        };
        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 () {  // Datagrid Header Freeze
    $("#<%=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:

• http://cross-browser.com/x/examples/xthf-demo.php?s=sep&n=3