Scrollable Gridview with a fix header

Question

Possible Duplicate:
Fixed GridView Header with horizontal and vertical scrolling in asp.net

I have a task to design to build a Scrollable Gridview with a fix header. I have tried developing it with a Div

    <div id="DataDiv" style="overflow: auto; border: 1px solid olive; 
        width: 600px; height: 300px;" />

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
            ShowHeader="false" RowStyle-VerticalAlign="Bottom">
            <Columns>
                <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle Width="30px" />
                <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
                <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
            </Columns>
        </asp:GridView>
    </div>

but it doesn't work as the header didn't get fix.

then i find one more code, as

<div style=" background-repeat: repeat-x; height: 30px;
        width: 200px; margin: 0; padding: 0">
        <table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" style="font-family: Arial;
            font-size: 10pt; width: 200px; color: Black; border-collapse: collapse; height: 100%;">
            <tr>
                <td style="width: 30px; text-align: center">
                   ID
                </td>
                <td style="width: 50px; text-align: center">
                    Dbms
                </td>
                <td style="width: 30px; text-align: center">
                    Version
                </td>
            </tr>
        </table>
    </div>
    <div style ="height:100px; width:617px; overflow:auto;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
            ShowHeader="false" RowStyle-VerticalAlign="Bottom">
            <Columns>
                <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle-Width="30px" />
                <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
                <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
            </Columns>
        </asp:GridView>
    </div>

in this method, i am designing the header using pure html.

now the issue is, what is the best method to implement this requirement.

Answer 1

Aside from your problem there are few things that You should know about:

1) By design table cells will autoresize and match the content of the longest cell making the table readable. If You break this "rule" by making its header fixed You will have to take care about resizing header cell because header is no longer bound by the table rules.

2) Pure HTML/CSS solution will work ONLY if You set static lengths for all Your cells (both table and header). If content is to long to fit a cell and breaking lines is not possible (I sometimes work with german nouns so I know it's possible) everything will fall apart.

3) If You want a dynamic solution, You have to recalculate table cells with JS everytime content changes.

I guess it's pretty simply explained. If You need some examples please let me know and I will provide You with one.

Have fun!

Answer 2

I have done things like this a few times.

http://www.codeproject.com/Tips/471756/Fixed-Table-Header-atop-scrollable-GridView-in-ASP

The only tip I can give is stay away from vertical lines on the grid. It is tough to get the lines on the gridview and and the lines on the table to line up across browsers.