Dynamic GridView with fixed header and vertical scroll using jQuery in ASP.Net

Hi Saro12,

Using the below link i have created the example.

How to freeze GridView column and row using jQuery in ASP.Net

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:DropDownList ID="ddlCountries" OnSelectedIndexChanged="OnSelectedIndexChanged" AutoPostBack="true" runat="server" Width="206px" CssClass="form-control DesignLeft">
            <asp:ListItem Text="Select" Value="0"></asp:ListItem>
            <asp:ListItem Text="USA" Value="USA"></asp:ListItem>
            <asp:ListItem Text="UK" Value="UK"></asp:ListItem>
            <asp:ListItem Text="Germany" Value="Germany"></asp:ListItem>
        </asp:DropDownList>
        <asp:HiddenField ID="HdnLeaveSetupID" runat="server" />
        <hr />
        <asp:GridView ID="gvCustomers" Width="100%" HeaderStyle-BackColor="#556B2F" ShowHeader="true"
            AutoGenerateColumns="false" GridLines="Horizontal" runat="server">
            <AlternatingRowStyle BackColor="White" />
            <HeaderStyle CssClass="grid-header"></HeaderStyle>
            <Columns>
                <asp:TemplateField ItemStyle-Width="125px" ItemStyle-HorizontalAlign="Center" HeaderStyle-ForeColor="White"
                    HeaderText="Id">
                    <ItemTemplate>
                        <asp:Label ID="Label13" runat="server" Text='<%# Eval("CustomerID") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-Width="133px" HeaderStyle-ForeColor="White" HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="Label14" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label>
                        <asp:Label ID="lblMatchId" runat="server" Visible="false" Text='<%# Eval("CustomerID") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-Width="180px" HeaderStyle-ForeColor="White" HeaderText="City">
                    <ItemTemplate>
                        <asp:Label ID="Label15" runat="server" Text='<%# Eval("City") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-Width="80px" ItemStyle-HorizontalAlign="Center" HeaderStyle-ForeColor="White"
                    HeaderText="Country">
                    <ItemTemplate>
                        <asp:Label ID="Label16" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-Width="30px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Left"
                    HeaderText="Edit">
                    <ItemTemplate>
                        <asp:ImageButton ID="imgEdite" CommandName="Edit"
                            runat="server" CommandArgument='<%#Eval("CustomerID") %>' PostBackUrl='<%# "~/EditScore.aspx ?Matchid=" + Eval("CustomerID")  %>'
                            ImageUrl="~/Images/Editicon.jpg" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-Width="30px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Left"
                    HeaderText="Edit">
                    <ItemTemplate>
                        <asp:ImageButton ID="imgDelete" CommandName="Delete"
                            runat="server" CommandArgument='<%#Eval("CustomerID") %>' OnClientClick="if (confirm('Are you sure you want to delete this match?') == false) return false;"
                            ImageUrl="~/Images/Deleteicon.jpg" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <EditRowStyle BackColor="#7C6F57" />
            <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#E3EAEB" />
            <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlCountries" />
        <asp:AsyncPostBackTrigger ControlID="gvCustomers" />
    </Triggers>
</asp:UpdatePanel>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link href="GridviewScroll/gridviewScroll.css" rel="stylesheet" type="text/css" />
    <script src="GridviewScroll/gridviewScroll.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            ApplyFreezePlugin();
        });

        //On UpdatePanel Refresh
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    ApplyFreezePlugin();
                }
            });
        };

        function ApplyFreezePlugin() {
            $('[id$=gvCustomers]').gridviewScroll({
                width: 300,
                height: 300,
                freezesize: 1, // Freeze Number of Columns.
                headerrowcount: 1, //Freeze Number of Rows with Header.
                arrowsize: 30,
                varrowtopimg: "Images/arrowvt.png",
                varrowbottomimg: "Images/arrowvb.png",
                harrowleftimg: "Images/arrowhl.png",
                harrowrightimg: "Images/arrowhr.png"
            });
        }
    </script>
</div>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindGridView();
    }
}

protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    if (ddlCountries.SelectedIndex > 0)
    {
        BindGridView(ddlCountries.SelectedValue);
    }
    else
    {
        BindGridView();
    }
}

private void BindGridView(string country = null)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT * FROM Customers WHERE Country = @Country OR @Country IS NULL";
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                cmd.Parameters.AddWithValue("@Country", !string.IsNullOrEmpty(country) ? country : (object)DBNull.Value);
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvCustomers.DataSource = dt;
                    gvCustomers.DataBind();
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        BindGridView()
    End If
End Sub

Protected Sub OnSelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
    If ddlCountries.SelectedIndex > 0 Then
        BindGridView(ddlCountries.SelectedValue)
    Else
        BindGridView()
    End If
End Sub

Private Sub BindGridView(ByVal Optional country As String = Nothing)
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT * FROM Customers WHERE Country = @Country OR @Country IS NULL"
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(query)
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                cmd.Parameters.AddWithValue("@Country", If(Not String.IsNullOrEmpty(country), country, CObj(DBNull.Value)))
                sda.SelectCommand = cmd
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    gvCustomers.DataSource = dt
                    gvCustomers.DataBind()
                End Using
            End Using
        End Using
    End Using
End Sub

Screenshot