Software School Projects | Academic Students Projects | Source Codes | Tablets header
Please use our contact us form or send email to Support@srishtis.com.

Scrollable GridView with fixed headers in asp.net C#
In this example we are 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.
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:BoundFieldDataField ="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(objectsender,GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
      if(e.Row.RowIndex == 0)
         e.Row.Style.Add("height","40px");
   }
}
Job or extra money for students

Search Engine Rank of your blog or websites