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 ID Employee Name Department
Employee ID 2 Employee Name 2 Department2
Employee ID 3 Employee Name 3 Department3
Employee ID 4 Employee Name 4 Department4
Employee ID 5 Employee Name 5 Department5
Employee ID 6 Employee Name 6 Department6
Employee ID 7 Employee Name 7 Department7
Employee ID 8 Employee Name 8 Department8
Employee ID 9 Employee Name 9 Department9
Employee ID 10 Employee Name 10 Department10
Employee ID 11 Employee Name 11 Department11
Employee ID 12 Employee Name 12 Department12
Employee ID 13 Employee Name 13 Department13
Employee ID 14 Employee Name 14 Department14
Employee ID 15 Employee Name 15 Department15
     

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.