How to use jqGrid with C#/ASP.NET and JSON.NET (and no AJAX.NET stuff)?

Question

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

Daniel Earwicker · Accepted Answer · 2009-06-25 20:16:39Z

3

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.

edited Jun 25, 2009 at 20:16

answered Jun 25, 2009 at 20:11

Daniel Earwicker

117k38 gold badges209 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wprl Over a year ago

this 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 Over a year ago

P.S. Thanks for the tip-on to Fiddler.

wprl Over a year ago

ah OK, .NET 2.0 WebMethods are XML only. I bet that's what my problem is. Thanks!

wprl Over a year ago

I have to say: this answer really helped me out before Chrome/FireFox let you watch network activity in-browser. Thank you!

dev · Accepted Answer · 2009-08-03 04:43:01Z

2

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.

edited Aug 3, 2009 at 4:43

answered Aug 3, 2009 at 4:24

dev

1,3213 gold badges18 silver badges26 bronze badges

1 Comment

wprl Over a year ago

I 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...

Darryl Hebbes · Accepted Answer · 2010-02-03 09:03:35Z

2

Be careful with the case sensitive property datatype is meant to be dataType with uppercase T.

answered Feb 3, 2010 at 9:03

Darryl Hebbes

1,0281 gold badge10 silver badges15 bronze badges

1 Comment

wprl Over a year ago

is this true? I don't have a way to verify anymore.

takrl · Accepted Answer · 2011-06-28 14:16:29Z

2

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

edited Jun 28, 2011 at 14:16

takrl

6,5003 gold badges63 silver badges71 bronze badges

answered Aug 5, 2009 at 1:19

Jonathan

211 bronze badge

1 Comment

sisdog Over a year ago

The 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');

Community · Accepted Answer · 2017-05-23 12:19:36Z

1

If you have problems getting jqGrid to work with ASP.NET, please have a look here. This should save you a lot of time.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jul 23, 2009 at 16:48

Ron Harlev

16.8k26 gold badges93 silver badges140 bronze badges

2 Comments

wprl Over a year ago

Thanks. I eventually just switched to using XML and everything went smoothly from there. Good write up of your discoveries!

Jalal El-Shaer Over a year ago

xml will work but watch out for higher bandwidth use that the lightweight alternative json.

Collectives™ on Stack Overflow

How to use jqGrid with C#/ASP.NET and JSON.NET (and no AJAX.NET stuff)?

5 Answers 5

4 Comments

1 Comment

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related