jqGrid with ASP .NET Web Forms

A quick write-up on my findings to use the amazing jqGrid v3.4.3 with ASP .NET 2.0 Web Forms. Surprisingly, there is no clear demo./website which enumerates on this usage. After some effort, got it finally working. Please note this is w.r.to ASP .NET 2.0 and I am just a day/two old with jqGrid!

(1) Suggested to not use PageMethods - can look at the "different" pains by different people at this link - http://www.west-wind.com/weblog/posts/152493.aspx.
If needed I can add mine into the list!

(2) The relevant partial code in the *.aspx file(without sending any parameters) is:

.......
.......
jQuery(document).ready(function() {
$('#list').jqGrid({
datatype: function() {
$.ajax({
url: "jqGrid.asmx/jQGridDataASMX",
data: "{}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
complete: function(jsondata, stat) {
window.alert("Status received is " + stat);
window.alert("Response text is: " + jsondata.responseText);
if (stat == "success") {
var thegrid = jQuery("#list")[0];
thegrid.addJSONData(eval("(" + jsondata.responseText + ")"));
}
}
});
},
colNames: ['Col1', 'Col2', 'Col3'],
colModel: [
{ name: 'Col1', index: 'Col1', width: 40, align: 'left' },
{ name: 'Col2', index: 'Col2', width: 40, align: 'left' },
{ name: 'Col3', index: 'col3', width: 200, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
imgpath: 'jqGrid-3.4.3/themes/basic/images',
caption: 'jqGrid NewComer - First Grid'
});
});


........
........

When sending parameters to the web service method use the JSON object which is defined in "json2.js"(You can download from - http://www.JSON.org/json2.js).
Eg. var jsonStr = JSON.stringify(data);
and then place the jsonStr variable within the "data" parameter of the $.ajax request like:
url: "jqGrid.asmx/jQGridDataASMX",
data: jsonStr,
dataType: "json",


(3) The complete jqGrid.asmx file is:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;

public class RowElement
{
public string id;
public string[] cell;
}

public class MainGrid
{
public string total;
public string page;
public string records;
public RowElement[] rows;
}


///

/// Summary description for jqGrid
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class jqGrid : System.Web.Services.WebService {

[WebMethod]
public MainGrid jQGridDataASMX()
{
/* {
total: 'xxx',
page: 'yyy',
records: 'zzz',
rows : [
{id:'1', cell:['cell11', 'cell12', 'cell13']},
{id:'2', cell:['cell21', 'cell22', 'cell23']}
]
} */

MainGrid mg = new MainGrid();
mg.total = "1";
mg.page = "1";
mg.records = "1";

mg.rows = new RowElement[1];
mg.rows[0] = new RowElement();
mg.rows[0].id = "1";
mg.rows[0].cell = new string[3];
mg.rows[0].cell[0] = "cell1";
mg.rows[0].cell[1] = "cell2";
mg.rows[0].cell[2] = "cell3";

return mg;
}

}


(5) The resultant output is:

Hope this helps for someone to get a heads-up with jqGrid and ASP .NET 2.0!


Also check-out a very good site on the jQGrid with ASP .NET using HTTP handlers - http://geeks.netindonesia.net/blogs/cipto/archive/2009/04/03/jqgrid.aspx