Tuesday, August 15, 2017

How to Freeze Gridview’s (Scrollable) column and header using Jquery in asp.net

In this article I am going to explain how to freeze Gridview’s (Scrollable) column and header using Jquery in asp.net.

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

Implementation:
Complete Source of Webform

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title> Freeze Gridview’s (Scrollable) column and header </title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%">
            <Columns>
                <asp:BoundField HeaderText="Name" DataField="Name" ItemStyle-BackColor="#EFEFEF">
                <HeaderStyle HorizontalAlign="Left" />
<ItemStyle BackColor="#EFEFEF"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="Phone" HeaderText="Phone" >
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField DataField="Salary" HeaderText="Salary" >
                  <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                  <asp:BoundField DataField="Department" HeaderText="Department">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField DataField="EmailId" HeaderText="Email">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:ImageField DataImageUrlField="ImagePath" ControlStyle-Height="100" ControlStyle-Width="100">
<ControlStyle Height="100px" Width="100px"></ControlStyle>
                </asp:ImageField>
            </Columns>
        </asp:GridView>
    </div>
    </form>

     <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="css/GridviewScroll.css" rel="stylesheet" />
    <script src="js/gridviewScroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('#<%=GridView1.ClientID%>').gridviewScroll({
                width: 500,
                height: 500,
                freezesize: 1,
                arrowsize: 30,
                varrowtopimg: "images/arrowvt.png",
                varrowbottomimg: "images/arrowvb.png",
                harrowleftimg: "images/arrowhl.png",
                harrowrightimg: "images/arrowhr.png"
            });
        });
</script>
</body>
</html>

Add namespaces

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

VB.net 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)
        {
            Fillgrid();
        }
    }
    public void Fillgrid()
    {
        try
        {
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Employees", con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        catch(Exception ex){}
    }

VB.net 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
            Fillgrid()
        End If
    End Sub
    Public Sub Fillgrid()
        Try
            Dim adp As New SqlDataAdapter("Select * from Employees", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            GridView1.DataSource = dt
            GridView1.DataBind()
        Catch ex As Exception
        End Try
    End Sub



No comments:

Post a Comment