If you are an ASP.NET web developer using jQuery for AJAX, you would have probably got used to passing parameters through DTO (Data Transfer Objects) as suggested by Dave in Encosia.com. This is a clean and simple approach for passing parameters from client to server.
Unfortunately, many jQuery plugins are not coded this way and need to be tweaked. Same is the case with jqGrid, which is an excellent jQuery grid plugin. So below are the simple tweaks to be made for jqGrid to support DTO's.
At a basic level, these tweaks should be done in the "grid.base.js"
file. If you are using plugins for inline edit or any other feature
which makes AJAX calls, the same changes have to be made there also.
There are things which need to be changed in all AJAX calls made by the plugin:
1. Building a Data Transfer Object(DTO).
2. Setting the content-type to "application/json".
3. Convert the input object into JSON string.
4. Filtering .NET's "d" parameter in the AJAX success function.
1. Building a DTO: In "grid.base.js", search for the code "populate = function() { ", which is the definition of populate function (This is in line 577). In this function, add the code in bold, above the switch statement (which is in line 588).
var jsObj = { 'obj': ts.p.postData }; //Building a DTO
switch (dt) {
case "json":
case "xml":
case "script":
2. Setting the content-type to "application/json":
In line 593, add the JSON content type as a parameter to $.ajax function.
3. Convert the input object into JSON string:
In the same lin(593), replace the data parameter with JSON stringified DTO.
The code change for (2) and (3) will now be:
Old Code: $.ajax({url:ts.p.url,type:ts.p.mtype,dataType: dt ,data: ts.p.postData,
Tweaked code: $.ajax({ url: ts.p.url, type: ts.p.mtype, dataType: dt, contentType: 'application/json; charset=utf-8', data: JSON.stringify(jsObj),
4. Filtering .NET's "d" parameter in the AJAX success function:
Finally, filter .NET's "d" parameter in the line 596 like below:
Old code:
if(dt === "json" || dt === "script") addJSONData($.jgrid.parse(req.responseText),ts.grid.bDiv,rcnt);
Tweaked code: if (dt === "json" || dt === "script") addJSONData($.jgrid.parse(req.responseText).d, ts.grid.bDiv, rcnt);
That's it! The grid should now be able to handle JSON objects as input parameters and should bind JSON data successfully. Note that I have done these tweaks in jqGrid 3.5. The same concept applies to lower versions of jqGrid too. However, the line number and variables used in AJAX calls differ.
Hope this article would save the time of many enthusiasts, who want to use jqGrid in their ASP.NET projects. I shall come up with a detailed post on other common problems shortly.