In this article I will explain with an example, how to use scrollable GridView with fixed headers in UpdatePanel using jQuery plugin in ASP.Net using C# and VB.Net.
In one of my previous articles I have explained how to Make Scrollable Table in HTML with Fixed Header using jQuery. This plugin worked great in all browsers but is not compatible with ASP.Net AJAX UpdatePanel control. Hence I have developed an extension plugin which will work with ASP.Net AJAX UpdatePanel too.
 
 

Dowload jQuery plugin

You can download the Scrollable GridView jQuery plugin from the below link.
Download ScrollableGridView jQuery plugin
 
 

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 

HTML Markup

The HTML Markup consists of following controls:
ScriptManager – For enabling AJAX.
UpdatePanel – For refreshing the records.

ContentTemplate

The ContentTemplate consists of a GridView and a Button.
 
GridView – For displaying data.

Columns

The GridView consists of three BoundField columns.
 
Button – For refreshing the GridView records.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
            </Columns>
        </asp:GridView>
        <br />
        <asp:Button ID="btnRefresh" runat="server" Text="Refresh" />
    </ContentTemplate>
</asp:UpdatePanel>
 
 

Applying the Scrollable Grid jQuery Plugin

Inside the HTML Markup, following script files are inherited.
1. jquery.min.js
2. ScrollableGridViewPlugin_ASP.NetAJAXmin.js
 
Inside the jQuery document ready event handler, the GridView has been applied with the jQuery Scrollable plugin where the ScrollHeight is set and IsInUpdatePanel is set to TRUE when the GridView is inside AJAX UpdatePanel.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js"></script>
<script type="text/javascript">
    $(function () {
        $('#<%= gvCustomers.ClientID %>').Scrollable({
             ScrollHeight: 300,
             IsInUpdatePanel: true
        });
    });
</script>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
 
 

Binding GridView using C# and VB.Net

Inside the Page_Load event handler, the GridView is populated with records from the Customers table.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string sql = "SELECT ContactName, City, Country FROM Customers";
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(sql, 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 EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim sql As String = "SELECT ContactName, City, Country FROM Customers"
        Using con As SqlConnection = New SqlConnection(constr)
            Using sda As SqlDataAdapter = New SqlDataAdapter(sql, 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 inside ASP.Net UpdatePanel using jQuery Plugin
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code