This
article will show you how you can perform ajax shorting of gridview
without page refresh in asp.net using c#.net. This
article is using a jQuery plugin known as tablesorter to perform the ajax shorting
operation. This plugin will not work on the grid who are having paging.
Some of my
previous articles are as follows: How
To Use Hyper Link Tag In Gridview In Asp.Net C#, Enable
Or Disable GridView Button By Row CheckBox Using jQuery In Asp.Net, Browse,
Read and Populate or Show or Bind CSV File Data In GridView Using C#.Net in
Asp.net, Bind
Class Property to GeidView Using C#.net In Asp.net, Gridview
Auto Generate Row Number In Asp.Net Using C#.Net, Bind
TextBox Control Inside TemplateField Of GridView Using C#.Net In Asp.Net, Short
GridView Data From Header Using C#.Net In Asp.Net, Export
GridView Or Table Data Into PDF By C#.Net In Asp.Net Using jQuery, Reading
XML Document in C# Using Linq and Bind To GridView In Asp.Net, How
to Find Gridview Control on Button Click in Asp.Net C#, Nested
GridView Using c#.Net In Asp.Net.
So for this
article first I have download the plugin after downloading the plugin I have
created an asp.net application and add a grid view control on page.
<asp:GridView ID="GridView1"
runat="server" AutoGenerateColumns="False" CssClass="tablesorter">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="CountryName"
HeaderText="Country Name"
/>
<asp:BoundField DataField="Population"
HeaderText="Population"
/>
<asp:BoundField DataField="Code" HeaderText="Code" />
</Columns>
</asp:GridView>
|
After this
we will add the library reference into the header of the page.
<script src="http://tablesorter.com/jquery-latest.js"></script>
<script src="JS/jquery.tablesorter.min.js"></script>
|
Now add the
below code and style sheet into the header of the page.
<script type="text/javascript">
$(document).ready(function () {
$("#<%=GridView1.ClientID%>").tablesorter();
}
);
</script>
<style>
table.tablesorter thead tr .header {
cursor: pointer;
}
</style>
|
In above
code I have used the tablesorter function to execute shorting operation. In
above I have used style sheet to display the pointer cursor while clicking on
header of the page.
Here is the
complete code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication7.WebForm10" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Grid View
Shorting Using jQuery In Asp.net and C#.Net</title>
<script src="http://tablesorter.com/jquery-latest.js"></script>
<script src="JS/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=GridView1.ClientID%>").tablesorter();
}
);
</script>
<style>
table.tablesorter thead tr .header {
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1"
runat="server" AutoGenerateColumns="False" CssClass="tablesorter">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="CountryName"
HeaderText="Country Name"
/>
<asp:BoundField DataField="Population"
HeaderText="Population"
/>
<asp:BoundField DataField="Code" HeaderText="Code" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
|
After this we will write code to populate data into
gridview.
using System;
using
System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
namespace WebApplication7
{
public partial class WebForm10 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt =
GetCountryData();
GridView1.DataSource = dt;
GridView1.DataBind();
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
private DataTable GetCountryData()
{
DataTable dt = new DataTable();
dt.Clear();
dt.Columns.Add("Id");
dt.Columns.Add("CountryName");
dt.Columns.Add("Population");
dt.Columns.Add("Code");
DataRow dataRow1 =
dt.NewRow();
dataRow1["Id"] = 1;
dataRow1["CountryName"] = "India";
dataRow1["Population"] = "125
Cr";
dataRow1["Code"] = "IN";
dt.Rows.Add(dataRow1);
DataRow dataRow2 =
dt.NewRow();
dataRow2["Id"] = 2;
dataRow2["CountryName"] = "Pakistan";
dataRow2["Population"] = "50
Cr";
dataRow2["Code"] = "PK";
dt.Rows.Add(dataRow2);
DataRow dataRow3 =
dt.NewRow();
dataRow3["Id"] = 3;
dataRow3["CountryName"] = "United
States";
dataRow3["Population"] = "25
Cr";
dataRow3["Code"] = "US";
dt.Rows.Add(dataRow3);
return dt;
}
}
}
|
In above
code I have bind the grid view and assign the theader and tbody to gridview,
because without theader and tbody our plugin will not work and gridview by
default does not produce the tbody and theader tag.
Now we have
done run the application to check the output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view