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
.png)
No comments:
Post a Comment