How to use jqGrid with C#/ASP.NET and JSON.NET (and no AJAX.NET stuff)?
asp.net, c#, jqgrid, jquery-plugins, json.net
Solution
Before doing anything else, download and install this:
http://www.fiddler2.com/fiddler2/
It will let you see exactly what is being requested and sent back by the jqGrid requests to get the JSON data.
I have some code for a working jqGrid, and here's something different:
datatype: "json"
Instead of your:
datatype: "jsonstring"
I also have a field called `colNames` which is an array of strings containing column names.
Finally, I have a `pager` field which identifies an element that will store the paging controls, and is a DIV.
Problem
OK, I've been looking into this a few days and am not particularly sure what I am doing wrong. If anyone has working examples of using jqGrid with C#/ASP.NET and open source tools, please, please let me know where to find them. Any tips on finding decent documentation or tools I could use to debug this would be most appreciated too (I'm pretty new to js/jQuery). Basically I just need the edit-in-place functionality, so if I'm overlooking another obvious solution for that, it could be helpful to know... I'd like to avoid using AJAX.NET if at all possible. I feel like I'm just overlooking something really obvious here. In the following example, I do get the jqGrid to display, but it shows no data. Here is the relevant JavaScript: ``` jQuery(document).ready(function(){ jQuery("#role_assignment_table").jqGrid({ url:'http://localhost:4034/WebSite2/PageItemHandler.asmx/GetPageItemRolesJson?id=3', mtype: 'GET', contentType: "application/json; charset=utf-8", datatype: "jsonstring", colModel:[ {name:'Id', label:'ID', jsonmap:'Id'}, {name:'Title', jsonmap:'Title'}, {name:'AssignedTo', label:'Assigned To', jsonmap:'AssignedTo'}, {name:'Assigned', jsonmap:'Assigned'}, {name:'Due', jsonmap:'Due'}, {name:'Completed', jsonmap:'Completed'} ], jsonReader: { page: "Page", total: "Total", records: "Records", root: "Rows", repeatitems: false, id: "Id" }, rowNum:10, rowList:[10,20,30], imgpath: 'js/themes/basic/images', viewrecords: false, caption: "Role Assignments" }); }); ``` The HTML: ``` <table id="role_assignment_table" class="scroll" cellpadding="0" cellspacing="0" /> ``` The generated JSON: I'm not sure if it makes it to the jqGrid, or if the jqGrid doesn't like my JSON or my WebMethod, but I can call it myself when I go to the proper URL and get the JSON result string. ``` {"Page":"1","Total":1.0,"Records":"4", "Rows":[ {"Id":1,"Item":null,"Title":"Story Manager","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}, {"Id":2,"Item":null,"Title":"Analysis","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}, {"Id":3,"Item":null,"Title":"Narrative","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}, {"Id":4,"Item":null,"Title":"Graphic","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"} ] } ``` Cheers, William Riley-Land