SiteMap  | About    

Freeze Gridview Header row, Scroll in GridView

How to Freeze GridView Header Row ?

The GridView control, you could display an entire collection of data, easily add sorting and paging, and perform inline editing. Sometimes, we need to present a large collection of data in a GridView and that too in a small space or portion of web form. When gridview is made scrollable, headers will also scroll along with the other gridview contents making it difficult for the user to understand the data properly. In this situations we can freeze the header row then the user can scroll the data and see the header as fixed.

freeze gridview row


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


Freeze Gridview Row

Here we set GridView ShowHeader = "false" and make a separate header for the GridView by using HTML Table and places the GridView just below the Table. So the header row is always fixed there and we can scroll the GridView and see 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.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <div style="width:478px;border:1px solid #084B8A;color:#ffffff;font-weight:bold;">
        <table bgcolor="#3090C7" rules="all" >
                <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>
        <div style ="height:130px; width:500px; overflow:auto;" >
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
            ShowHeader = "false" Width ="480px" >
                <AlternatingRowStyle BackColor="#BFE4FF" />
				    <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" />

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);
        SqlCommand command = new SqlCommand(sql, connection);
        adapter.SelectCommand = command;
        GridView1.DataSource = ds.Tables[0];

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)
        Dim command As New SqlCommand(sql, connection)
        adapter.SelectCommand = command
        GridView1.DataSource = ds.Tables(0)
    End Sub
End Class (C) 2018    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.