Satish Vemula
in

ASP .NET Datagrid with scrollbars and fixed headers

Hi,
 I recently needed to create a datagrid in ASP .NET pages whose data was not autogenerated (read my previous blogs about my adventures in it). I did not want to add paging to my datagrid but the records being returned were so many that one had to scroll a lot in the browser. So I thought, why not put a scrollbar for my datagrid. Ofcouse, there is no direct property that I could switch on in the Datagrid. And I realized I had to use the div tag which is actually pretty simple.

Adding a ScrollBar

Enclose your datagrid in a <div> tag and set the overflow style to auto/scroll. For those of you who prefer to do it through the design mode, there is an excellent step-by-step instructions at this link:

http://www.dotnetjunkies.com/HowTo/E833AEAE-8D7E-4D1F-821B-D848D965F70A.dcik

Now my datagrid had a neat little scrollbar and I could fit it into the browser with losing sight of the input information I had entered above. But I had one more problem. The Column headers would not stay still and would scroll away. How do I fix this?

Fixed Headers

The best way to achieve this is by using style sheets (I have seen around suggestions like adding a table which has your column names as the columns for this table and you stick it on top of the datagrid, and you set the datagrid header visible property to false. Trust me, CSS is way cooler than that).
Add this style to the CSS class or to the HTML code itself.

<style type="text/css">
    .DataGridFixedHeader { POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop); BACKGROUND-COLOR: white }
</style>

And refer this style in your ASP datagrid, by setting this value to the CSSClass property of the HeaderStyle of the datagrid. For ex:

<asp:datagrid id="resultGrid" tabIndex="-1" runat="server" Width="900px" Height="224px" BorderStyle="None">  
    <HeaderStyle Font-Names="Arial" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BorderStyle="Solid"
        BorderColor="Black" VerticalAlign="Bottom" BackColor="LightSlateGray" CssClass="DataGridFixedHeader"></HeaderStyle>
..........
</asp:datagrid>

You can set this property from the design mode too by navigating to the HeaderStyle property.

My colleague kmarshall has posted a very interesting article about using CSS gridviews here. Check it out, you may get some interesting ideas:

http://blogs.claritycon.com/blogs/kevin_marshall/archive/2006/02/23/234.aspx

BTW, I could have used Infragistics WebGrid and it has the options of setting a scrollbar and a fixed data header. But for the complex template columns I had to use for my grid, I was better off using the DataGrid than the WebGrid with these nice workarounds.
Posted: Feb 23 2006, 09:31 AM by svemula | with 15 comment(s)
Filed under: ,

Comments

Mehul said:

Hi,

According to the solution given above for fixed grid header is working but it's not showling lines between two cells in the header...

What i need to do if i want a seperation line between cells ???

Thanks,
Mehul
# February 2, 2007 5:48 AM

Jaya said:

hey use "this.offsetParent.scrollTop - 2"  because the header will overlap your data on the grid. if you dont use -2
# May 15, 2007 3:45 PM

Jaya Rayasam said:

hey use "this.offsetParent.scrollTop - 2"  because the header will overlap your data on the grid. if you dont use -2
# May 15, 2007 3:46 PM

JC said:

I am using Gridview with paging and fixed header.  The vertical scrollbar just disappear when paging is being used.  Any ideal how to show the vertical scrollbar with paging?  Any help is appreciated.
# June 4, 2007 4:22 PM

nardev said:

great...but not working in firefox...the header is not scrolled with the scroll bar
# June 15, 2007 4:53 AM

Chris said:

This is great code, only datagrid fixed header I could find that doesn't force you to build a second table above the datagrid and have to mess with width sizes that look horrible accross browsers.

Curious if this code works with Mozilla?  It doesn't distort anything, however the header does not stay fixed?

Maybe my css is incorrect?

Either way it is great and looks nice for IE users.

Cheers,
Chris

# July 20, 2007 9:37 PM

Sam said:

Thank you

# February 9, 2008 3:04 AM

Chieko said:

Doesn't work with mozilla.

# February 19, 2008 10:23 AM

dominique said:

does not work properly

header diseapear when scrolling down to the end of the file

header diseapear when resizing the form

not finished

# June 4, 2008 2:11 PM

dominique said:

Solution is the following(make the eval through javascript )

<style type="text/css">

   .DataGridFixedHeader { POSITION: relative; TOP: BLOCKED SCRIPTeval(this.offsetParent.scrollTop-2); BACKGROUND-COLOR: white }

</style>

# June 4, 2008 2:27 PM

wwwszerr said:

css lessons - css scrollbar examples code

-- css-lessons.ucoz.com/scroll-css-examples.htm --

# June 6, 2008 1:40 PM

Appan said:

I am using asp.net 2.o, and wen i created a ccs file and used the mentioned style, it is showing an error mentioning "is not a valid property for 'top';

please let me know.

it is not applying in my case.

<div style="overflow:auto;height:150px">

                                  <asp:DataGrid ID="dgHistory" runat="server" Width="98%" AutoGenerateColumns="false">

                                    <HeaderStyle BackColor="AliceBlue" HorizontalAlign="Center"

                                    VerticalAlign="Middle" CssClass="dataGridFixedHeader"/>

                                       <Columns>

                                        <asp:BoundColumn HeaderText="<%$ Resources:E2PACaseStudy, dgcolhistoryNo %>" ItemStyle-Width="20%" DataField="ACTIVITY_TYPE"></asp:BoundColumn>

                                         <asp:BoundColumn HeaderText="<%$ Resources:E2PACaseStudy, dgcolhistoryHistory %>" ItemStyle-Width="80%" DataField="ACTIVITY_SUB_TYPE"></asp:BoundColumn>

                                      </Columns>

                                   </asp:DataGrid>

                               </div>

# June 10, 2008 4:22 AM

mo said:

Best CSS sample seen, very very cool to use

# July 18, 2008 4:24 PM

asasdas said:

sss    ad asdasdasdadas

# July 23, 2008 12:15 AM

vasavi said:

Its cool.and working fine.Thanks

# August 18, 2008 7:45 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)