In this article I will explain with an example, how to make GridView scrollable with keeping the headers fixed in ASP.Net with C# and VB.Net.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
HTML Markup
The HTML Markup consists of:
GridView – For displaying data.
Columns
GridView consists of four BoundField columns.
Properties
ShowHeader – It defines whether you want to show Header row or not. Here it is set to true.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" ShowHeader="true">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="Customer ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
<asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
<asp:BoundField ItemStyle-Width="150px" DataField="PostalCode" HeaderText=" PostalCode" />
</Columns>
</asp:GridView>
CSS
The following CSS need to be placed in the HEAD section of the page.
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
table { border: 1pxsolid#ccc; border-collapse: collapse; }
table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
table th, table td { padding: 5px; border: 1px solid #ccc; }
table, table table td { border: 0px solid #ccc; }
</style>
Binding the GridView with records from SQL Server Database Table
Inside the
Page Load event handler, the GridView is populated using
DataTable with records from the
SQL Server database.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT * FROM Customers";
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
{
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
gvCustomers.DataSource = dt;
gvCustomers.DataBind();
}
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim query As String = "SELECT * FROM Customers"
Using con As SqlConnection = New SqlConnection(constr)
Using sda As SqlDataAdapter = New SqlDataAdapter(query, con)
Using dt As DataTable = New DataTable()
sda.Fill(dt)
gvCustomers.DataSource = dt
gvCustomers.DataBind()
End Using
End Using
End Using
End If
End Sub
Screenshot
![Scrollable GridView with Fixed Headers in ASP.Net]()
Making GridView Scrollable with Fixed Headers in ASP.Net
In order to make the GridView scrollable, the original GridView Header will be hidden and a fake GridView header will be placed above the GridView and the GridView will be placed inside an HTML DIV with scrollbar.
You need to follow the following steps to make the GridView scrollable.
1. Right click on the Page and select View Source option from the Context Menu.
![Scrollable GridView with Fixed Headers in ASP.Net]()
2. Then look for the GridView and copy its Header Row along with the Table tag as shown below.
![Scrollable GridView with Fixed Headers in ASP.Net]()
3. Paste the copied content above the GridView and remove the id attribute from the HTML Table and add the ending tag for the HTML table.
![Scrollable GridView with Fixed Headers in ASP.Net]()
4. Set width for each cell of the Header Table.
Note: Width of the Header Cell must be same as that of its corresponding GridView column.
And then, wrap the HTML Table within an HTML DIV with a specific width.
Note: Width of the HTML DIV will be total width of all GridView columns. In this case, 150 x 4 = 600.
![Scrollable GridView with Fixed Headers in ASP.Net]()
5. Finally, hide the original GridView header by setting ShowHeader property to false and wrap the GridView in an HTML DIV and set its following CSS attributes.
1) Height – Height must be set as per your choice must be less than height of GridView in order for the scroll feature to work.
2) Width - Width must be set to value which is sum of all GridView columns and a constant value of 17px (width of scrollbar). In this case (150 x 4) + 17 = 617.
3) Overflow – Overflow is set to auto to make Scrollbar visible for the HTML DIV.
![Scrollable GridView with Fixed Headers in ASP.Net]()
Once all the above steps are done, your GridView will now be scrollable.
Screenshot
![Scrollable GridView with Fixed Headers in ASP.Net]()
Note: You might see some very minor alignment differences between header row and data row vertical borders. This can be adjusted through CSS and also you can hide vertical borders as shown below.
GridView has been assigned with the rules property set to none to hide the columns in the Header row.
![Scrollable GridView with Fixed Headers in ASP.Net]()
Demo
Downloads
