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
