Guriddo » Topic: ASP.NET WebService – How to load grid from…

ASP.NET WebService – How to load grid from…

Guriddo
ASP.NET WebService – How to load grid from…

This topic has 7 replies, 4 voices, and was last updated 15 years, 4 months ago by OlegK.

Creator

Topic

June 30, 2010 at 6:21 pm #76594

Participant

All I am just trying to figure this out with a very simple set of data:

<div class="sfcode">{"d":"name: Jeff V title: Programmer"}<br /><br />I want to load the grid using this JSON data.<br /><br />I have tried many different ways and examples to load this <br />into the grid but I have had 0 luck.<br />Here is my code:<br /><pre><br /><p>jQuery(document).ready(function () {</p><br />
<p>jQuery("#list").jqGrid({</p><br />
<p>datatype: processrequest,</p><br />
<p>mtype: 'POST',</p><br />
<p>colNames: ['Name', 'Title'],</p><br />
<p>colModel: [</p><br />
<p>{ name: 'name', index: 'name', width: 55 },</p><br />
<p>{ name: 'title', index: 'title', width: 90 }</p><br />
<p>],</p><br />
<p>pager: jQuery('#pager'),</p><br />
<p>rowNum: 10,</p><br />
<p>rowList: [10, 20, 30],</p><br />
<p>sortname: 'id',</p><br />
<p>sortorder: "desc",</p><br />
<p>viewrecords: true,</p><br />
<p>imgpath: 'themes/basic/images',</p><br />
<p>caption: 'My first grid'</p><br />
<p>});</p><br />
<p>});</p><br />
<br /><br />
<br /><br />
<p>function processrequest(postdata) {</p><br />
<p>$(".loading").show();</p><br />
<p>$.ajax({</p><br />
<p>type: "POST",</p><br />
<p>data: "{}",</p><br />
<p>dataType: "local",</p><br />
<p>url: "../webServices/myTestWS.asmx/testMethod",</p><br />
<p>contentType: "application/json; charset-utf-8",</p><br />
<p>complete: function (jsondata, stat) {</p><br />
<p>if (stat == "success") {</p><br />
<p>var thegrid = jQuery("#list")[0];</p><br />
<p>thegrid.addJSONData(eval("(" + jsondata.responseText + ").d"));</p><br />
<p>$(".loading").hide();</p><br />
<p>} else {</p><br />
<p>$(".loading").hide();</p><br />
<p>alert("Error with AJAX callback");</p><br />
<p>}</p><br />
<p>}</p><br />
<p>});</p><br />
<p>}</p><br /><br />Any help is appreciated!  Thanks

<div class="sfcode">{"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: <pre> 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

Viewing 7 replies - 1 through 7 (of 7 total)

Author

Replies
June 30, 2010 at 9:08 pm #95041

nadougla
Participant

Hi Jeff,

I've been battling this problem for a few weeks now.

July 1, 2010 at 2:12 am #95046

michaelg
Participant

Hi There,

I think that you need to set dataType to “json” (rather than “local”) in your ajax call.

Other than that, perhaps the url …

1

../webServices/myTestWS.asmx/testMethod

1

../webServices/myTestWS.asmx/testMethod

… is incorrect (ie. using ../ at the front might not be finding it correctly).

July 1, 2010 at 2:00 pm #95058

OlegK
Participant

The problem is already solved. See http://stackoverflow.com/questions/3151565/can-you-use-jqgrid-within-asp-net-using-a-webservice-and-javascript/3151997#3151997

July 1, 2010 at 7:28 pm #95065

JV
Participant

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.

July 2, 2010 at 12:28 pm #95071

OlegK
Participant

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.

July 2, 2010 at 11:11 pm #95074

JV
Participant

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});

});

July 4, 2010 at 3:28 am #95076

OlegK
Participant

Hi Jeff!

Like promised
Author

Replies