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

Answer 1

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

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)

Answer 2

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.