Freeze Gridview Header row, Scroll in GridView

The GridView control offers numerous features that make it a versatile tool for displaying data, including the ability to present an entire collection of data, facilitate sorting and paging, and enable inline editing. However, there are instances when we need to present a large dataset within a limited space on a web form.

How to Freeze GridView Header Row ?

When the GridView becomes scrollable to accommodate a large amount of data, a potential challenge arises: the headers of the GridView scroll along with the other contents, making it difficult for users to interpret the data effectively. In such situations, it is beneficial to freeze the header row, allowing users to scroll through the data while keeping the header row fixed.

By freezing the header row, users can easily understand the column headings as they scroll through the dataset. This approach enhances the usability of the GridView, providing a better visual context for the displayed data.

Implementing a frozen header row in a GridView typically involves CSS and JavaScript techniques to achieve the desired behavior. By applying appropriate styles and scripting, developers can ensure that the header row remains fixed at the top of the GridView, regardless of scrolling actions.

Freezing the header row in a scrollable GridView optimizes the user experience, making it easier to comprehend the data presented. It helps users navigate and interpret large datasets without losing sight of the column headers, resulting in a more efficient and user-friendly interface.

freeze gridview row

Database

In this article I have used Microsoft's Pubs database for sample data. You can download it free from the following link.

Download

Freeze Gridview Row

The use of the GridView's ShowHeader =" false" was followed by HTML Table that was placed just under the GridView containing the Header. When placed at the top, this row is always at the same level and the user can scroll both through it and the GridView to view the data.

How to scroll gridview data ?

Here the program places the GridView inside a Div and fixed the Div height. So the entire GridView data we can see it inside the Div by scrolling.

Adding scrollbar to GridView

adding scrollbar to gridview

The following source code will show how to display a frozen header and scrollable data in GridView.

Default.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div style="width:478px;border:1px solid #084B8A;color:#ffffff;font-weight:bold;"> <table bgcolor="#3090C7" rules="all" > <tr> <td style ="width:71px;">Pub ID</td> <td style ="width:180px;">Pub Name</td> <td style ="width:90px;">City</td> <td style ="width:60px;">State</td> <td style ="width:78px;">Country</td> </tr> </table> </div> <div style ="height:130px; width:500px; overflow:auto;" > <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader = "false" Width ="480px" > <AlternatingRowStyle BackColor="#BFE4FF" /> <Columns> <asp:BoundField ItemStyle-Width = "120px" DataField="pub_id" HeaderText="pub_id" /> <asp:BoundField ItemStyle-Width = "300px" DataField="pub_name" HeaderText="pub_name" /> <asp:BoundField ItemStyle-Width = "100px" DataField="city" HeaderText="city" /> <asp:BoundField ItemStyle-Width = "100px" DataField="state" HeaderText="state" /> <asp:BoundField ItemStyle-Width = "100px" DataField="country" HeaderText="country" /> </Columns> </asp:GridView> </div> </form> </body> </html>
C# Source Code
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { SqlDataAdapter adapter = new SqlDataAdapter(); DataSet ds = new DataSet(); int i = 0; string sql = null; string connetionString = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=zen412"; sql = "select * from publishers"; SqlConnection connection = new SqlConnection(connetionString); connection.Open(); SqlCommand command = new SqlCommand(sql, connection); adapter.SelectCommand = command; adapter.Fill(ds); adapter.Dispose(); command.Dispose(); connection.Close(); GridView1.DataSource = ds.Tables[0]; GridView1.DataBind(); } }
VB.Net Source Code
Imports System.Drawing Imports System.Data.SqlClient Imports System.Data Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim adapter As New SqlDataAdapter() Dim ds As New DataSet() Dim i As Integer = 0 Dim sql As String = Nothing Dim connetionString As String = "Data Source=.;Initial Catalog=pubs;User ID=sa;Password=zen412" sql = "select * from publishers" Dim connection As New SqlConnection(connetionString) connection.Open() Dim command As New SqlCommand(sql, connection) adapter.SelectCommand = command adapter.Fill(ds) adapter.Dispose() command.Dispose() connection.Close() GridView1.DataSource = ds.Tables(0) GridView1.DataBind() End Sub End Class





Related Topics
  1. ASP.NET Simple GridView
  2. Sorting , Paging and AutoGenerateColumns
  3. ASP.NET GridView Editing
  4. ASP.NET GridView Delete
  1. DropDownList in GridView
  2. Create Gridview at runtime
  3. Asp.Net Gridview - Add, Edit and delete
  4. Gridview export to Excel
  5. Gridview export to CSV
  6. Asp.Net GridView summary on Footer
  7. Subtotal row in Gridview
  8. SubTotal and GrandTotal in GridView
  9. Create Gridview without database
  10. GridView from Stored Procedure
  11. How to create Gridview Popup Form
  12. How to create a Blank row in gridview
  13. Nested GridView in ASP.NET
  14. Auto Generate Row Number in GridView
  15. Image between GridView rows
  16. How to select a row in gridview
  17. Checkbox in ASP.NET GridView Control