Scrolling GridView with fixed Header

  • Thread starter Thread starter Jimmy B
  • Start date Start date
J

Jimmy B

Hello folks,

Does anyone of you know any Open Source GridView Extension
that has vertical Scrollbar and fixed Header?

Tried to Google but didn't find any proper (because of Css).

It should work in IE, Firefox and Opera.

Cheers!
 
Hello folks,

Does anyone of you know any Open Source GridView Extension
that has vertical Scrollbar and fixed Header?

Tried to Google but didn't find any proper (because of Css).

It should work in IE, Firefox and Opera.

Cheers!
Click to expand...

You can do an additional header table before the gridview as a simple
approach. The gridview could be placed in a scrolling DIV area.

<table>...<table>
<div style="width: 400px; height: 400px; overflow: auto;">
gridview
</div>
 
Thanks for reply.

Yes, I have read many kind of solutions and wondered that why not to
build Headers in own table. Of course sorting etc. using Header would cause
more work.

Cheers.


Hello folks,

Does anyone of you know any Open Source GridView Extension
that has vertical Scrollbar and fixed Header?

Tried to Google but didn't find any proper (because of Css).

It should work in IE, Firefox and Opera.

Cheers!
Click to expand...

You can do an additional header table before the gridview as a simple
approach. The gridview could be placed in a scrolling DIV area.

<table>...<table>
<div style="width: 400px; height: 400px; overflow: auto;">
gridview
</div>
 
A Scrollable GridView with a Fixed Header in .NET

One workaround is to have a separate table control to show the header elements and hide the actual header of the grid.Now put the grid inside a div or panel with scrollbar property.But that takes extra effort to have a proper alignment.Each cell of the header table should be aligned with each cell of the grid.The other work around is to fix the header of the grid in such a way that scrolling down shouldnt hide the header of the grid.Using stylesheet we can achieve that.
"panelContainer" is the id of the panel . "Sys.UI.DomElement.getBounds(document.getElementById("panelContainer")).y " gives the exact Y location of the panel where we need to fix the header.25 pixel is the usual height of the header .That much of space we had to leave for the header so that its not going to eat up any space of the grid content.With the Panel control, we can control the width, height, and scrollable option. For our code example, we set the height as 300px, the width as 100%, and set the Panel to scroll while showing only the vertical scrollbars. Put your grid inside the panel.Now we have to assign the CSS class defined above to the GridView's HeaderStyle

<asp:Panel ID="panelContainer" runat="server" Height="300px" Width="100%" ScrollBars="Vertical">
<asp:GridView ID="gvScrollableExample" runat="server">
<HeaderStyle CssClass="fixedHeader " />
</asp:GridView></asp:Panel>


This way we can fix the header at the top of the grid and scrolling down is not going to scroll the grid with the header.

Hope it did add some value and it was helpful.
Eliza
 
Back
Top