A scrollable ASP.NET Gridview with a fixed header



ASP.NET Gridview has the provision of providing paging, set a particular pagesize etc.. But at times our clients are too adamant to demand for scrollable gridview with a steady header.Gridview as such doesn’t have a scrollable feature . But still a work around is possible. This is being discussed in this article that provides us a convenient scrollable grid with a steady header.

STEP 1- Scrollable GridView

Add the gridview into a asp:Panel control





This Panel has a scroll bar feature so it tends to scroll the grid. But our problem is not yet solved. What is the next issue- Constant header.
The above code makes the whole panel content to scroll. But most of the application needs a constant header. Is it possible? This is explained in the next section 

STEP 2- Stable header
This can be done in 2 ways

1. Add the css to the Panel


02. {

03. overflow: auto;

04. height: 145px;


06. }

07. table th

08. {


10. position: relative;


12. }

2. In the above way we have added style to the Panel as a whole.
Again we can achieve stable header by adding header style for the grid.
This is the style:


2. {

3. background-color: aqua;

4. position: relative;

5. top: expression(this.offsetParent.scrollTop);

6. }

And the HTML becomes 

1.<HeaderStyle CssClass=”fixedHeader”


This article deals with a scrollable gridview that has a stable header.Though this is not possible as such as the gridview doesnot have a scrollable property it can be done by a work around. I hope it helps.Happy Coding.

Thank you