Skip Navigation Links
More In .Net Technologies
 Generating Sequence Number-Serial Number-Row Number in DataGrid GridView...
 Hiding Gridview column while printing...
 Print particular area of page in Asp.Net...
 Creating Backup, Compress and FTP Sql Server Database...

Fixed gridview/datagrid header while scrolling Asp.Net

If the Datagrid/Gridview have many rows that forces user to scroll down to view the other rows then it is very difficult to the user to understand the data if there are many columns.

So the best idea is to provide the fixed header to the user so that if the user scrolls down to view other records then also he would be able to get the column heading.

And it is really very simlpe to achieve this with a very simple css code.

You can copy the below code to the head section of the HTML page

<style type="text/css">
<!--
.FixedGridHeader

{

              background-color: #FFFFFF;

              position:relative;

             top:expression(this.offsetParent.scrollTop);

}
-->
</style>

 

And Set Grid's Header "CssClass" value to "FixedGridHeader" as follows.

  <HeaderStyle CssClass="FixedGridHeader"></HeaderStyle>

The reason of giving background-color is, when user scrolls the records then the scrolling record at the top appears behind the header, so it is just to cover them, or you can any rhyming color to your grid.