Freeze columns of Gridview in - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Freeze columns of Gridview in

In this article I am going to explain how to freeze the columns of Gridview in

I have populate the gridview with employee’s information. I want to freeze the first column (name of employee) of Gridview. I am using GridviewScroll Jquery to implement this.


Complete Source of Webform

<html xmlns="">
<head runat="server">
  <title>Freeze columns in Gridview</title>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%">
                <asp:BoundField HeaderText="Name" DataField="Name" ItemStyle-BackColor="#EFEFEF">
                <HeaderStyle HorizontalAlign="Left" />
<ItemStyle BackColor="#EFEFEF"></ItemStyle>
                <asp:BoundField DataField="Phone" HeaderText="Phone" >
                <HeaderStyle HorizontalAlign="Left" />
                <asp:BoundField DataField="Salary" HeaderText="Salary" >
                  <HeaderStyle HorizontalAlign="Left" />
                  <asp:BoundField DataField="Department" HeaderText="Department">
                <HeaderStyle HorizontalAlign="Left" />
                <asp:BoundField DataField="EmailId" HeaderText="Email">
                <HeaderStyle HorizontalAlign="Left" />
                <asp:ImageField DataImageUrlField="ImagePath" ControlStyle-Height="100" ControlStyle-Width="100">
<ControlStyle Height="100px" Width="100px"></ControlStyle>

     <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <link href="css/GridviewScroll.css" rel="stylesheet" />
    <script src="js/gridviewScroll.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                width: 500,
                height: 500,
                freezesize: 1

Add namespaces to code file.

C# Code
using System.Configuration;
using System.Data.SqlClient;
using System.Data; Code
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Bind data to Gridview
Create method to bind data to gridview and call it on page load event.

C# Code

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    public void Fillgrid()
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Employees", con);
            DataTable dt = new DataTable();
            GridView1.DataSource = dt;
        catch(Exception ex){}
    } Code

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
        End If
    End Sub
    Public Sub Fillgrid()
            Dim adp As New SqlDataAdapter("Select * from Employees", con)
            Dim dt As New DataTable()
            GridView1.DataSource = dt
        Catch ex As Exception
        End Try
    End Sub

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.


isn't working just the gridview dispaly only

Same here. Not working.
Even get an js error: Object doesn't support property or method 'GridViewScroll'

Kindly download the latest JS/CSS from this link :