I don't know why but jqgrid paging did not work with a wcf web service call despite using the pager class and all. Even in the project from where I borrowed the pager class, ( i.e. praneet's article) , paging was not working.
One workaround for this is to use the local data array. In local data array, the paging works. So get the data from web service and put it in a local array. Then bind this array to jqgrid. This is something which works.
Below is the .aspx and service code.
===============ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<link href="js/jquery-1.10.2-ui.css" rel="stylesheet" type="text/css" />
<link href="js/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-1.10.2-ui.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" >
//this global array is where we will populate our data from service.
var mydata;
function aa() {
$.ajax({
type: "POST",
dataType: "json",
url: "Service.svc/DoWork",
success: function(result) { alert(result.d); }
});
}
function bb() {
$.ajax({
type: "POST",
dataType: "json",
url: "Service.svc/DoWork1",
success: function(result) { alert(result.d); }
});
}
function dd(){
var grid = jQuery("#myGrid");
grid.jqGrid({
data: mydata,
datatype: "local",
height: 200,
hidegrid: false, //hides the arrow button at the top right corner for collapsing the jqGrid
rowNum: 2,
rowList: [10, 20, 30],
viewrecords: true,
caption: "Employees",
pager: "#pager",
colNames: ['EID', 'Name'],
colModel: [
{ name: 'id', index: 'id', width: 100, align: "center", sorttype: 'int' },
{ name: 'name', index: 'name', width: 100, align: "left" }
]
});
};
function cc() {
$.ajax({
type: "POST",
dataType: "json",
url: "Service.svc/DoWork1",
success: function(result) {
alert(result.d);
mydata = JSON.parse(result.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<table id="myGrid"></table>
<div id="pager"></div>
<button id="btn" onclick="aa();" type="button" ></button>
<button id="Button1" onclick="bb();" type="button"></button>
<button id="Button2" onclick="cc();" type="button"></button>
<button id="Button3" onclick="dd();" type="button"></button>
</form>
</body>
</html>
===============ASPX
===============SERVICE
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Web.Script.Serialization;
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string DoWork()
{
// Add your operation implementation here
return "abcd";
}
// Add more operations here and mark them with [OperationContract]
[OperationContract]
public string DoWork1()
{
Person[] p = new Person[] {
new Person( 1, "a"),
new Person( 2, "b"),
new Person( 3, "c"),
new Person( 4, "d"),
new Person( 5, "e"),
new Person( 6, "f"),
new Person( 7, "g"),
new Person( 8, "h"),
new Person( 9, "i"),
new Person( 10, "j"),
new Person( 11, "k"),
new Person( 12, "l"),
new Person( 13, "m"),
new Person( 14, "n"),
new Person( 15, "o"),
new Person( 16, "p"),
};
// Add your operation implementation here
JavaScriptSerializer js = new JavaScriptSerializer();
return js.Serialize(p);
}
}
public class Person
{
public int id { get; set; }
public string name { get; set; }
public Person(int i, string s)
{
id = i;
name = s;
}
}
===============SERVICE
One workaround for this is to use the local data array. In local data array, the paging works. So get the data from web service and put it in a local array. Then bind this array to jqgrid. This is something which works.
Below is the .aspx and service code.
===============ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<link href="js/jquery-1.10.2-ui.css" rel="stylesheet" type="text/css" />
<link href="js/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-1.10.2-ui.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" >
//this global array is where we will populate our data from service.
var mydata;
function aa() {
$.ajax({
type: "POST",
dataType: "json",
url: "Service.svc/DoWork",
success: function(result) { alert(result.d); }
});
}
function bb() {
$.ajax({
type: "POST",
dataType: "json",
url: "Service.svc/DoWork1",
success: function(result) { alert(result.d); }
});
}
function dd(){
var grid = jQuery("#myGrid");
grid.jqGrid({
data: mydata,
datatype: "local",
height: 200,
hidegrid: false, //hides the arrow button at the top right corner for collapsing the jqGrid
rowNum: 2,
rowList: [10, 20, 30],
viewrecords: true,
caption: "Employees",
pager: "#pager",
colNames: ['EID', 'Name'],
colModel: [
{ name: 'id', index: 'id', width: 100, align: "center", sorttype: 'int' },
{ name: 'name', index: 'name', width: 100, align: "left" }
]
});
};
function cc() {
$.ajax({
type: "POST",
dataType: "json",
url: "Service.svc/DoWork1",
success: function(result) {
alert(result.d);
mydata = JSON.parse(result.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<table id="myGrid"></table>
<div id="pager"></div>
<button id="btn" onclick="aa();" type="button" ></button>
<button id="Button1" onclick="bb();" type="button"></button>
<button id="Button2" onclick="cc();" type="button"></button>
<button id="Button3" onclick="dd();" type="button"></button>
</form>
</body>
</html>
===============ASPX
===============SERVICE
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Web.Script.Serialization;
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string DoWork()
{
// Add your operation implementation here
return "abcd";
}
// Add more operations here and mark them with [OperationContract]
[OperationContract]
public string DoWork1()
{
Person[] p = new Person[] {
new Person( 1, "a"),
new Person( 2, "b"),
new Person( 3, "c"),
new Person( 4, "d"),
new Person( 5, "e"),
new Person( 6, "f"),
new Person( 7, "g"),
new Person( 8, "h"),
new Person( 9, "i"),
new Person( 10, "j"),
new Person( 11, "k"),
new Person( 12, "l"),
new Person( 13, "m"),
new Person( 14, "n"),
new Person( 15, "o"),
new Person( 16, "p"),
};
// Add your operation implementation here
JavaScriptSerializer js = new JavaScriptSerializer();
return js.Serialize(p);
}
}
public class Person
{
public int id { get; set; }
public string name { get; set; }
public Person(int i, string s)
{
id = i;
name = s;
}
}
===============SERVICE
No comments:
Post a Comment