Scrollable GridView With Fixed Headers Asp.Net

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.


<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 
01<head runat="server">
02<title>Creating scrollable GridView with fixed headers</title>
03<style type="text/css">
04  .header
05  {
06    font-weight:bold;
07    position:absolute;
08    background-color:White;
09  }
10  </style>
11</head>
1protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

2    {
3 
4        if (e.Row.RowType == DataControlRowType.DataRow)
5        {
6            if(e.Row.RowIndex == 0)
7           e.Row.Style.Add("height","40px");
8        }
9    }

Comments

Post a Comment

Popular posts from this blog

Bootstrap Modal Popup keep open on PostBack in ASP.Net

Resolved Issue in Asp core 3.0 serializersettings does not exist in AddJsonOptions

.Net most asked interview questions for experienced professionals (C#,Asp WEBFORM,MVC,ASP CORE,WEB API,SQL Server,Java Script,Jquery)