How to use jqGrid with C#/ASP.NET and JSON.NET (and no AJAX.NET stuff)?
Solution 1
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.
Solution 2
Be careful with the case sensitive property datatype is meant to be dataType with uppercase T.
Solution 3
I had exactly the same problem! The solution I came up with is to create a custom JavaScript formatter:
$(this).jqGrid({
...
colModel: [
{
name: 'SomeDate', index: 'SomeDate', width: 100, formatter: ndateFormatter }
}],
...
});
// Convert C# json Date.
function ndateFormatter(cellval, opts, rwdat, _act) {
var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
var date = new Date();
date.setTime(time);
return date.toDateString();
}
Solution 4
In ASP.NET, Date gets serialized as JSON "/Date(ticks)/" which can not be interpreted by jqGrid. Possible solutions (post):
- write a custom formatter for the grid
- change the data we send to the grid (by sending formatted date as string)
Please tell how did you implement date display with jqGrid ?
Thank You.
Solution 5
If you have problems getting jqGrid to work with ASP.NET, please have a look here. This should save you a lot of time.
wprl
I'm a software developer and consultant that helps companies build fast, scalable apps and establish advanced quality assurance, testing, deployment, and DevOps infrastructure. I have worked with companies across the Americas and Europe, from sites with 86MM page views per month, to startups and individuals creating prototypes to help them attract investment.
Updated on April 06, 2020Comments
-
wprl almost 4 years
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
-
wprl almost 15 yearsthis may be a stupid question, but is the JSON "text" supposed to be returned as an XML doc? E.g. my WebMethod is returing <?xml version="1.0" encoding="utf-8"?> <string xmlns="localhost/WebSite2">INSERT JSON DATA HERE</string>
-
wprl almost 15 yearsP.S. Thanks for the tip-on to Fiddler.
-
wprl over 14 yearsThanks. I eventually just switched to using XML and everything went smoothly from there. Good write up of your discoveries!
-
wprl over 14 yearsI did it by passing a string instead of an actual date - you can still do sorting if you add "sorttype: 'date'" to that column in your colModel...
-
Jalal El-Shaer about 14 yearsxml will work but watch out for higher bandwidth use that the lightweight alternative json.
-
sisdog about 12 yearsThe above wasn't working exactly for me because my C# was generating a date like this: "\/Date(1311725560000-0700)\/". I had to change the regex to this for it to work: var time = cellval.replace(/\/Date(([0-9]*)(-[0-9]*)?)\//, '$1');
-
wprl about 12 yearsI have to say: this answer really helped me out before Chrome/FireFox let you watch network activity in-browser. Thank you!
-
wprl about 12 yearsis this true? I don't have a way to verify anymore.