Introduction
In this
article we are going to know how to bind the server side DataSet data to the
grid view
First
create a sample dynamic dataset
From that
convert that data set data to the XML format in the static web method
Then write
the client side code to call that method using the ajax json call in the JQUERY
Add the
JQUERY script plug in’s shown below
In Asp.net project create one .js file name it
as “ASPSnippets_Pager.min.js
“
In that copy this code and save that file
function ASPSnippetsPager(a, b) { var
c = '<a style = "cursor:pointer"
class="page" page = "{1}">{0}</a>'; var d = "<span>{0}</span>";
var e, f, g; var
g = 5; var h = Math.ceil(b.RecordCount /
b.PageSize); if (b.PageIndex > h) {
b.PageIndex = h } var i = ""; if (h
> 1) { f = h > g ? g : h; e = b.PageIndex > 1 && b.PageIndex +
g - 1 < g ? b.PageIndex : 1; if (b.PageIndex
> g % 2) { if (b.PageIndex == 2) f = 5; else f = b.PageIndex + 2 } else
{ f = g - b.PageIndex + 1 } if (f - (g - 1)
> e) { e = f - (g - 1) } if (f > h) { f =
h; e = f - g + 1 > 0 ? f - g + 1 : 1 } var j
= (b.PageIndex - 1) * b.PageSize + 1; var k = j
+ b.PageSize - 1; if (k > b.RecordCount) { k
= b.RecordCount } i = "<b>Records "
+ (j == 0 ? 1 : j) + " - " + k + " of " + b.RecordCount + "</b> "; if
(b.PageIndex > 1) { i += c.replace("{0}",
"<<").replace("{1}", "1");
i += c.replace("{0}", "<").replace("{1}",
b.PageIndex - 1) } for (var l = e; l <= f; l++) { if (l
== b.PageIndex) { i += d.replace("{0}",
l) } else { i += c.replace("{0}", l).replace("{1}", l) } } if
(b.PageIndex < h) { i += c.replace("{0}",
">").replace("{1}", b.PageIndex + 1); i += c.replace("{0}", ">>").replace("{1}", h) } } a.html(i); try { a[0].disabled = false
} catch (m) { } } (function
(a) { a.fn.ASPSnippets_Pager = function (b) { var c = {}; var b =
a.extend(c, b); return this.each(function () { ASPSnippetsPager(a(this), b) }) } })(jQuery);
Write this code in the client side
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="DataSetToGridViewUsingJquery.aspx.cs"
Inherits="SampleTestingCodes.DataSetToGridViewUsingJquery"
ClientIDMode="Static"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.Pager span
{
text-align: center;
color: #999;
display: inline-block;
width: 20px;
background-color: #A1DCF2;
margin-right: 3px;
line-height: 150%;
border: 1px solid #3AC0F2;
}
.Pager a
{
text-align: center;
display: inline-block;
width: 20px;
background-color: #3AC0F2;
color: #fff;
border: 1px solid #3AC0F2;
margin-right: 3px;
line-height: 150%;
text-decoration: none;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="Scripts/ASPSnippets_Pager.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
GetCustomers(1);
});
$(".Pager .page").live("click", function
() {
GetCustomers(parseInt($(this).attr('page')));
});
function GetCustomers(pageIndex) {
$.ajax({
type: "POST",
url: "DataSetToGridViewUsingJquery.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
//debugger;
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
var row = $("[id*=gvCustomers]
tr:last-child").clone(true);
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
$.each(customers, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("RowNumber").text());
$("td", row).eq(1).html($(this).find("Empno").text());
$("td", row).eq(2).html($(this).find("EmpName").text());
$("td", row).eq(3).html($(this).find("Designation").text());
$("[id*=gvCustomers]").append(row);
row = $("[id*=gvCustomers]
tr:last-child").clone(true);
});
var pager = xml.find("Pager");
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: parseInt(pager.find("PageIndex").text()),
PageSize: parseInt(pager.find("PageSize").text()),
RecordCount: parseInt(pager.find("RecordCount").text())
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvCustomers"
runat="server"
AutoGenerateColumns="false"
RowStyle-BackColor="#A1DCF2"
HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="White">
<Columns>
<asp:BoundField ItemStyle-Width="150px"
DataField="RowNumber"
HeaderText="Employee
No" />
<asp:BoundField ItemStyle-Width="150px"
DataField="Empno"
HeaderText="Employee
No" />
<asp:BoundField ItemStyle-Width="150px"
DataField="EmpName"
HeaderText="Employee
Name" />
<asp:BoundField ItemStyle-Width="150px"
DataField="Designation"
HeaderText="Designation"
/>
</Columns>
</asp:GridView>
<br />
<div class="Pager">
</div>
</div>
</form>
</body>
</html>
Write this code in the server side
using System;
using System.Data;
using System.Web.Services;
namespace SampleTestingCodes
{
public partial class DataSetToGridViewUsingJquery
: System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
BindDummyRow();
}
private void
BindDummyRow()
{
DataTable dummy = new
DataTable();
dummy.Columns.Add("RowNumber");
dummy.Columns.Add("Empno");
dummy.Columns.Add("EmpName");
dummy.Columns.Add("Designation");
dummy.Rows.Add();
gvCustomers.DataSource = dummy;
gvCustomers.DataBind();
}
[WebMethod]
public static string GetCustomers(int
pageIndex)
{
return Getdata().GetXml();
}
private static DataSet Getdata()
{
DataSet ds = new DataSet();
DataTable dt = new
DataTable("Customers");
dt.Columns.Add("RowNumber",
typeof(int));
dt.Columns.Add("Empno", typeof(int));
dt.Columns.Add("EmpName", typeof(string));
dt.Columns.Add("Designation",
typeof(string));
dt.Rows.Add(1, 101, "Ramu",
"IT");
dt.Rows.Add(2, 102, "krishna",
"RND");
dt.Rows.Add(3, 103, "Ravi",
"CSC");
ds.Tables.Add(dt);
return ds;
}
}
}
No comments:
Post a Comment