How to have a Fixed Header in a Gridview?

Question

I have this current implementation from a friend of mind. The project has a GridView as shown below

<div ID="divGrid" runat="server">
<asp:GridView ID="docGrid" runat="server" AutoGenerateColumns="False" GridLines="None"
    DataSourceID="pagedDatasetSourceControl" OnRowDataBound="docGrid_RowDataBound" OnSelectedIndexChanging="docGrid_SelectedIndexChanging" DataKeyNames="ID"
    CssClass="gridTable" AllowSorting="True" AllowPaging="True" meta:resourcekey="docGridResource1">
    <PagerSettings Visible="false"></PagerSettings>
    <Columns>
        ..................
    </Columns>
    <RowStyle CssClass="tableRow"></RowStyle>
    <PagerStyle VerticalAlign="Bottom" HorizontalAlign="Right"></PagerStyle>
    <AlternatingRowStyle CssClass="tableRowAlt"></AlternatingRowStyle>
</asp:GridView>
</div>

Now, more that one (1) .cs classes using this GridView, then each implementation is different. Then "ONE" of the .cs class implements a "scrolling" which is shown below.

this.divGrid.Attributes.Add("class", "fleft scroll");
this.divGrid.Attributes.Add("style", "width:100%; height:250px;");

But the code above scrolls the header as well, so when I scroll down the header scrolls as well. Is there a way to fix this issue by adding an "Attributes" in my .cs file for this class.

Thanks

Use javascript. [This may help](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers/) — mshsayem, Apr 24 '13 at 01:24
Here is a prepared project for ASP.NET on codeproject that you can download: http://www.codeproject.com/Articles/250669/Gridview-with-Fixed-Header — adaam, Apr 24 '13 at 01:28
Download the source on that page and see for yourself. (The src file is well commented so you'll understand what he's doing) — adaam, Apr 24 '13 at 01:29

score 5 · Answer 1 · answered Jun 06 '13 at 18:40

5

i wrote jQuery plug-in can fixed header and freeze column, it can be apply to GridView. see the image:

enter image description here

look the website: http://gridviewscroll.aspcity.idv.tw/

Supported Browsers

Internet Explorer 7, 8 (IE 9 Compatibility)
Internet Explorer 9 (9.0.8112)
Internet Explorer 10 on Windows 7 Preview
Google Chrome(23.0.1271.64 m)
Mozilla Firefox (16.0.2)
Apple Safari (5.1.7)

answered Jun 06 '13 at 18:40

Likol Lee

249
1
4

Great job man! Please, add to your plugin' page that it needs jquery-ui.min.js to be installed or if not to show some message. Thank you! – NoWar Nov 04 '16 at 15:02
1

I have update more information in GitHub: https://github.com/twlikol/GridViewScroll/ and v2 version was released – Likol Lee Nov 06 '17 at 21:00

score 3 · Answer 2 · answered Aug 04 '19 at 12:35

3

Alternative solution, if you add CssClass to header (ShowHeader="true"):

<HeaderStyle CssClass="StickyHeader" />

And add the following css

.StickyHeader th {
   position: sticky;
   top: 0
}

It makes stick the first row's table datas, not the row. That's why this is only an alternative solution, because the scrollbar is started from header row.. but after you styled the scrollbar a little, the result is not so bad.

answered Aug 04 '19 at 12:35

sendwich

97
1
10

This simple solution worked great for me. The only somewhat negative thing is once the header is scrolled into the data of the table it loses it's border. I'm not sure how to have the border stay. – Andy Apr 07 '21 at 19:38
Did you try outline instead of border? – sendwich Jun 16 '21 at 16:48

How to have a Fixed Header in a Gridview?

2 Answers2