A scrollable ASP.NET Gridview with a fixed header

 

Introduction

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

<asp:Panel
runat=”server”
ScrollBars=”auto”
Width=”500px”>

            <asp:GridView
ID=”GridView1″
runat=”server”>

            </asp:GridView>

        </asp:Panel>

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

01..fixedHeader

02. {

03. overflow: auto;

04. height: 145px;

05.  

06. }

07. table th

08. {

09.   

10. position: relative;

11.   

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:

1..fixedHeader

2. {

3. background-color: aqua;

4. position: relative;

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

6. }


And the HTML becomes 

1.<HeaderStyle CssClass=”fixedHeader”
/>

 
 

Conclusion
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

Baimey

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: