Forum
All I am just trying to figure this out with a very simple set of data:
{"d":"name: Jeff V title: Programmer"}
I want to load the grid using this JSON data.
I have tried many different ways and examples to load this
into the grid but I have had 0 luck.
Here is my code:jQuery(document).ready(function () {
jQuery("#list").jqGrid({
datatype: processrequest,
mtype: 'POST',
colNames: ['Name', 'Title'],
colModel: [
{ name: 'name', index: 'name', width: 55 },
{ name: 'title', index: 'title', width: 90 }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'My first grid'
});
});
function processrequest(postdata) {
$(".loading").show();
$.ajax({
type: "POST",
data: "{}",
dataType: "local",
url: "../webServices/myTestWS.asmx/testMethod",
contentType: "application/json; charset-utf-8",
complete: function (jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#list")[0];
thegrid.addJSONData(eval("(" + jsondata.responseText + ").d"));
$(".loading").hide();
} else {
$(".loading").hide();
alert("Error with AJAX callback");
}
}
});
}
Any help is appreciated! Thanks
14:00
10/08/2009
The problem is already solved. See http://stackoverflow.com/quest.....7 for details.
I actually got it to work…
My scenario was very simple as I wanted to see how it worked in the easiest form before I ramped it up into something more complicated.
First my object that my webservice returned had to have the following properties (or some variation):
Private _total As Integer
Private _records As Integer
Private _page As Integer
Private _rows As List(of names)
The second key was my webservice. I added the following to my ASP.Net webservice:
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
<WebMethod()> _
The JSON data that was returned finally looked correct:
{"d":{"__type":"myJQueryTestBed.myTest",
"total":2,"records":2,"page":1,
"rows":[{"name":"Jeff","title":"Programmer"},{"name":"Steve","title":"Programmer"}]}}
Lastly my jQuery code needed the following:
jsonReader: {
root: "rows", //arry containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
id: "ID" //index of the column with the PK in it
},
To be honest I'm still trying to figure this part out for the paging functionality but this is what worked for me in my VERY simple code example.
Also this is my call using the addJSONData:
var thegrid = jQuery("#list")[0];
var jsonObject = (eval("(" + jsondata.responseText + ")"));
thegrid.addJSONData(jsonObject.d);
If you need all the code to get this very simple example to work message me and I will copy everything for you. I can guarantee that ASP.NET and jqGrid does work. There are just a couple of flaming hoops you have to jump through to get there initially. I will say that it was really easy to ramp up my code to a much more complicated set of data once I had figured out this simple example.
12:28
10/08/2009
You makes all too complex. jqGrid can do ajax request you you and you don't really need use eval and addJSONData method. You use probably some code example created for a very old verion of jqGrid. Now you can use all with using the corresponding jqGrid parameters. If you post a code example (here on stackoverflow or both) I could show how it could be improoved.
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
datatype: processrequest,
mtype: 'POST',
jsonReader: {
root: "rows", //arry containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
id: "ID" //index of the column with the PK in it
},
colNames: ['Name', 'Title'],
colModel: [
{ name: 'name', index: 'name', width: 250 },
{ name: 'title', index: 'title', width: 250 }
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortorder: "desc",
viewrecords: true,
height: '250px',
caption: 'My first grid'
}).navGrid('#pager', {edit: false, add: false, del: false});
});
function processrequest(postdata) {
// alert(postdata._search);
// alert(postdata.searchString);
$(".loading").show();
$.ajax({
type: "POST",
data: "{}",
datatype: "json",
url: "../webServices/myTestWS.asmx/testMethod",
contentType: "application/json; charset-utf-8″,
complete: function (jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#list")[0];
var jsonObject = (eval("(" + jsondata.responseText + ")"));
thegrid.addJSONData(jsonObject.d);
$(".loading").hide();
} else {
$(".loading").hide();
alert("Error with AJAX callback");
}
}
});
}
03:28
10/08/2009
Hi Jeff!
Like promised you code example in UPDATED parts of http://stackoverflow.com/quest.....42#3161542.
I hope it will solve all your problem.
Best regards
Oleg
Most Users Ever Online: 715
Currently Online:
37 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66