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 IE8.
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 300px and width to 300px
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 Code
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" Height="300px" Width="300px" 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 id="Head1" 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");
}
}
No comments:
Post a Comment