Menu ▼

Previous Next

Gridview fixed header and footer while scrolling :

The following example will let you know how to make gridview header and footer fix while scrolling.

Employee IDEmployee NameDepartment
Employee ID 1Employee Name 1Department1
Employee ID 2Employee Name 2Department2
Employee ID 3Employee Name 3Department3
Employee ID 4Employee Name 4Department4
Employee ID 5Employee Name 5Department5
Employee ID 6Employee Name 6Department6
Employee ID 7Employee Name 7Department7
Employee ID 8Employee Name 8Department8
Employee ID 9Employee Name 9Department9
Employee ID 10Employee Name 10Department10
Employee ID 11Employee Name 11Department11
Employee ID 12Employee Name 12Department12
Employee ID 13Employee Name 13Department13
Employee ID 14Employee Name 14Department14
Employee ID 15Employee Name 15Department15
   



Source Code :

<style type="text/css">

    .divgrid

    {

        height: 200px;

        width: 370px;

    }

    .divgrid table

    {

        width: 350px;

    }

    .divgrid table th

    {

        background-color: Green;

        color: #fff;

    }

</style>

 

<div class="divgrid">

    <asp:GridView ID="gvEmployees" runat="server" ShowFooter="true">

        <FooterStyle BackColor="Green" />

    </asp:GridView>

</div>

 

<script language="javascript">

    $(document).ready(function () {

        try {

            $(".divgrid").each(function () {

                var grid = $(this).find("table")[0];

                var ScrollHeight = $(this).height();

                var gridWidth = $(this).width() - 20;

                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';

                }

                var gridHeight = grid.offsetHeight;

                if (gridHeight < ScrollHeight)

                    ScrollHeight = gridHeight;

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

 

                //fixed footer

                var dummyFooter = document.createElement('div');

                dummyFooter.innerHTML = dummyHeader.innerHTML;

                var footertr = grid.rows[grid.rows.length - 1];

                grid.deleteRow(grid.rows.length - 1);

                gridHeight = grid.offsetHeight;

                if (gridHeight < ScrollHeight)

                    ScrollHeight = gridHeight;

                scrollableDiv.style.height = ScrollHeight + 'px';

                dummyFooter.getElementsByTagName('Table')[0].deleteRow(0);

                dummyFooter.getElementsByTagName('Table')[0].appendChild(footertr);

                gridRow = dummyHeader.getElementsByTagName('Table')[0].getElementsByTagName('TR')[0];

                for (var i = 0; i < footertr.cells.length; i++) {

                    var width;

                    if (headerCellWidths[i] > gridRow.getElementsByTagName('TH')[i].offsetWidth) {

                        width = headerCellWidths[i];

                    }

                    else {

                        width = gridRow.getElementsByTagName('TH')[i].offsetWidth;

                    }

                    footertr.cells[i].style.width = parseInt(width - 3) + 'px';

                }

                parentDiv.appendChild(dummyFooter);

 

 

            });

        }

        catch (err) { }

    }

);

</script>

 

Take the grid in a div, and apply the class "divgrid" to the div. then the javascript & jquery will automatically apply the fixed header and footer functionality to the grid while scrolling.

Previous Next




Search dotnetlearners.com