GridView with Fixed Header and Scrollbar

Hi,In previous posts, I have completed two important topics of GridView.

  1. Paging in GridView
  2. Scroll Bars in GridView

GridView with Fixed Header and Scrollbar

Today, Lets learn another new and important trick with GridView, i.e. Fixed Headers. When we have to scroll through GridView, then there is must have feature that is Fixed Header. On recent post I have written about Fixed Headers in Excel, did you get chance to read them. We are doing exactly same task here. But here we do not have “Fix Pane” as in Excel anywhere. Lets do this with simple CSS and some enhance with code-behind.
Also, Today I am using Manual method of GridView creation, in previous demos and posts, I have used Drag & Dropped GridView control. Today here is manually coded GridView.
Lets see code for ASPX page.

 

In above design, Notable code is style for DIV which will make this GridView scrollable if its height exceeds than 400px. Another notable code is HeaderStyle-CssClass=”FixedHeader”. This line of code will apply a custom CSS Class named FixedHeader which we will create in while to do the task required. Before doing this lets bind this GridView with Data. Lets move to Back-end.
I am using data from a SQL table, which simply contains, DistrictID, DistName, DistDesc as its field and approx 25 records filled.

We have nothing to do more here. So simply write the databind code inside Page_Load Event.

Now lets loot at browser to know how it looked.

Perfect as designed. Lets scroll it and look for headers.

Oh! no, Headers are not visible. Lets start what we left at beginning. Add some style to GridView. Just navigate inside Head section of HTML and then add below code. This is stylesheet, you can customize as your requirement, but remember to change your Class name in GridView also if you are changing class name here.

OK, Lets refresh browser to see the changes.

On scrolling,

Perfect, Headers are on top. But there is some problem. If you noticed, First record of GridView is not visible. It has dis-appeared. To make that record visible. Lets use a trick. Write some code in RowDataBound Event of GridView.

We just told Server to add some space if the RowIndex is 0 means first row of GridView should have atleast double space so that the value can be visible.
Lets see the output.

Bingo! You have created a perfect and complete GridView with Fixed Headers. You can use this code and it works fine even used with Paging across multiple browsers.

Thanks to Amit Jain for the Top row fix which he has posted in his blog at Scrollable GridView With Fixed Headers Asp.Net.
If you found this post useful or helpful, or you have some suggestions to make, please post as comment or send me message on Google+ also.
John Bhatt 

John Bhatt

Aka, Prithvi Raj Bhatt, A Proud Nepali, Blogger, Software Developer, ASP.NET, Web Designer & Developer, Faculty and a Troubleshooter blog @PRsBlog

16 thoughts on “GridView with Fixed Header and Scrollbar

    • August 22, 2014 at 1:30 pm
      Permalink

      HI

      Thanks for the article.I am trying to implement it however.

      I bind the gridview to a blank datatable so that the grid header always shows for some reason when adding your code the the grid header doesn’t spread across the full webpage but once i bond it to actual data the underlying datarows do take on the correct widths. Any suggestions would be appreciated.

      Regards

      Meir

      Reply
  • August 22, 2014 at 6:30 pm
    Permalink

    HI

    Thanks for the article.I am trying to implement it however.

    I bind the gridview to a blank datatable so that the grid header always shows for some reason when adding your code the the grid header doesn’t spread across the full webpage but once i bond it to actual data the underlying datarows do take on the correct widths. Any suggestions would be appreciated.

    Regards

    Meir

    Reply
  • August 22, 2014 at 12:45 pm
    Permalink

    HI

    Thanks for the article.I am trying to implement it however.

    I bind the gridview to a blank datatable so that the grid header always shows for some reason when adding your code the the grid header doesn’t spread across the full webpage but once i bond it to actual data the underlying datarows do take on the correct widths. Any suggestions would be appreciated.

    Regards

    Meir

    Reply
  • August 22, 2014 at 6:15 pm
    Permalink

    HI

    Thanks for the article.I am trying to implement it however.

    I bind the gridview to a blank datatable so that the grid header always shows for some reason when adding your code the the grid header doesn’t spread across the full webpage but once i bond it to actual data the underlying datarows do take on the correct widths. Any suggestions would be appreciated.

    Regards

    Meir

    Reply
  • August 22, 2014 at 6:15 pm
    Permalink

    HI

    Thanks for the article.I am trying to implement it however.

    I bind the gridview to a blank datatable so that the grid header always shows for some reason when adding your code the the grid header doesn’t spread across the full webpage but once i bond it to actual data the underlying datarows do take on the correct widths. Any suggestions would be appreciated.

    Regards

    Meir

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Inline
Inline