Scrollable GridView With Fixed Headers Using CSS Example In Asp.Net 2.0,3.5,4.0 C# VB.NET. In this example i am going to show how to create scrollable GridView with fixed headers which don't get scrolled with records and stay on the top in asp.net using css, I've tested this code on IE7 and Firefox 2.0 , 3.5.
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 toolbox. 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.
We can also use JQuery to create Fixed Header Scrollable GridView
HTML SOURCE
<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
If you like this post than join us or share
37 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.
This comment has been removed by a blog administrator.
Is there a way to remove the padding in the gridview so that the rows do not appear above the header as they scroll?
Actually,good post. thx
Anonymous said... 8 Is there a way to remove the padding in the gridview so that the rows do not appear above the header as they scroll?
Try this:
.header
{
padding: 0px;
font-weight:bold;
position:absolute;
background-color:White;
margin-top:-3;
}
placing the above line inside the gridview is giving a error :
Content ('') does not match any properties within a 'System.Web.UI.WebControls.GridView', make sure it is well-formed
so can nyone tell me the problem??
Hi..
I have template dropdown column in gridview and while scrolling all dropdown columns are gets over the header.
Please i need it ASAP.
placing the above line inside the gridview is giving a error :
Content ('') does not match any properties within a 'System.Web.UI.WebControls.GridView', make sure it is well-formed
so can nyone tell me the problem??
yes same problem is faced by me itself
any solutions pls
gives error in this line
azhar Rizvi.
thanks 4 da post...
keep posting. n helping us.
Thanks & regards:
Frm india,
Ok, while I agree this is helpful it doesn't work too well when dealing with rowsets that need to scroll to the right. Also the titlbar is not being hidden by the dev. Why is that?
Hey thank you for the wonderful article it had been genuinely useful , I hope you will just publish additional about this ! This topic rocks
I have another problem.The headers will come from database.So the headers will change every Grid view.I want the headers width are same to its own cell size.I need solution for this !!
Hey thank you for the wonderful article it had been genuinely useful , I hope you will just publish additional about this. We are the SEO Company - provide SEO Services.
Hey - I am definitely happy to discove this. cool job!
It's really a very good article, which I need. One thing I need to now is that does this supports FF,Opera and Safari browsers.
Hey - I am really glad to discover this. Good job!
Hey - I am certainly happy to discover this. cool job!
Works fine but when viewing in browsers like IE8 chrome and Fire fox i see some disturbed headers as following images
In fire fox
http://i55.tinypic.com/2l8g043.jpg
I've uncovered strange behavior that seems to be a bug.
I have a very large gridview - I'm setting the panel to be 1800 px wide and 800 pixels high.
1) When I scroll down,
2) resize the windows smaller
The header disappears. If I scroll up again, the header is still gone.
If I resize the window to the same width as original or larger, the header renders again.
I already have the scroll position set.
There seems to be an ie9 onresize event that could be set to help with this situation.
Unforunately, we're still using ie7, so visual studio 2008 shows errors.
It would be preferable to figure out a .net / c# way to fix it (avoid javascript).
Thanks!
I looks like switching the header css from absolute to relative resolves the particular issue I was having.
that is
.header {
position:relative;
...}
seems to fix the resizing issue.
This comment has been removed by a blog administrator.
Thanx Its Working Perfect
If you click edit on the first item, the headers then again cover the item. Any solution?
I've been playing with this code for a while and I can't get my headers to align with the detail. I get the header wrapped as Column1Column2Colum3 This happens when position is set to absolute. If I remove it, the header is aligned properly, but I don't get the static header. I'm using a Master Gridview along with some children templates.
This is how my template looks like:
This comment has been removed by a blog administrator.
for those having error as Content ('') does not match any properties within a 'System.Web.UI.WebControls.GridView', make sure it is well-formed , TRY HeaderStyle-CssClass="header" in the asp:gridview tag:
I have read a few of the articles on your website now, and I really like your style of blogging.
great help dude..
Thankx amiT jaiN, it was of great help. in between, the header columns width are warped if the position is set to absolute in chrome and Firefox browser wherein in IE it works fine... further solution for this would be a great help to....
I have the headers which will come from database.So the headers will change often. I want the headers width are same to its own cell size. Please help!!!
GridView header style and appearance customizing
What abt horizontal scroll re
Post a Comment