For this we need to add css to headers of gridview to keep them on the top.
First of all place a Panel on the aspx page from thetoolbox. Set height to 200px and width to 200px
and scrollbars to Vertical.
Now add a gridview inside this Panel and set the datasource to populate gridview.
Html Source of the page look like this
<form id="form1" runat="server"> <div> <asp:Panel ID="Panel1" runat="server" Height="200px" Width="200px" ScrollBars="Vertical"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" RowStyle-VerticalAlign="Bottom" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> <asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location" /> </Columns> <HeaderStyle CssClass="header"Height="20px" /> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]"> </asp:SqlDataSource> </asp:Panel> </div> </form>
Now Add below mention css style in the head section of page
<head runat="server">
<title>Creating scrollable GridView with fixed headers</title>
<style type="text/css">
.header
{
font-weight:bold;
position:absolute;
background-color:White;
}
</style>
</head>
Build and run the code.
This code works fine but there is one bug in it , first record of GridView gets hidden behind the fixed column headers.
To fix this issue we need to set height of first row in gridview to double of height of header row or double the height of other rows of gridview. for this we need to add below mentioned code in RowDataBound event of GridView.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if(e.Row.RowIndex == 0)
e.Row.Style.Add("height","40px");
}
}
Now the output will be as shown in image, In my example i've set the header height to "20px" using headerStyle in html source. so i'll be setting height of first row to "40px"
Download sample code attached
 |
||
 |
 |
|
 |
 |
add to del.icio.us saved by 0 users |
7 comments:
Why does the first record not display?
This works great except for the fact the first record does not show, why is that? I also see your animated grid image starts at Id #2
@Above:
Thanks for pointing the bug, i've fixed it and updated the code in article, do read it again and let me know if it worked for you or not ?
Hello,
A little but very important problem : you header column width are not corresponding to your items column width.
do you have a solution for that ?
@Above:
You can set ItemStyle-Width and HeaderStyle-Width in html source of gridview to the value you want like this
<asp:BoundField DataField="Name" HeaderText="Name"
SortExpression="Name" ItemStyle-Width="100px"
HeaderStyle-Width="100px"
HeaderStyle-HorizontalAlign="Left"/>
I've updated the code in sample code
Do let me know if this doesn't solve your problem
Hi,
Your post looks good and working fine, but i need header to move while horrizontal scroll, And NOT to move while vertical scroll. Can you please help me out.
Good one! Thanks for the code.
Sandeep Aparajit
http://sandeep-aparajit.blogspot.com
Post a Comment