jqGrid - How does one configure jsonreader (for use with Jayrock)?

Question

Hi, I wondered if someone might have some insight into this. jqGrid is quite happy with this JSON string:

{'page':'1','total':1,'records':'4','rows':[{'id':1,'title':'Story Manager','assigned':'2009-06-22T10:52:28.0687738-05:00','due':'2009-07-29T10:52:28.0687738-05:00','completed':'2009-07-14T10:52:28.0687738-05:00'},{'id':2,'title':'Analysis','assigned':'2009-06-22T10:52:28.0687738-05:00','due':'2009-07-29T10:52:28.0687738-05:00','completed':'2009-07-14T10:52:28.0687738-05:00'},{'id':3,'title':'Narrative','assigned':'2009-06-22T10:52:28.0687738-05:00','due':'2009-07-29T10:52:28.0687738-05:00','completed':'2009-07-14T10:52:28.0687738-05:00'},{'id':4,'title':'Graphic','assigned':'2009-06-22T10:52:28.0687738-05:00','due':'2009-07-29T10:52:28.0687738-05:00','completed':'2009-07-14T10:52:28.0687738-05:00'}]}

Jayrock (.NET JSON-RPC framework) supplies the JSON string as:

{id:'-1','result':{'page':'1','total':1,'records':'4','rows':[{'id':1,'title':'Story Manager','assigned':'2009-06-22T10:52:28.0687738-05:00','due':'2009-07-29T10:52:28.0687738-05:00','completed':'2009-07-14T10:52:28.0687738-05:00'},{'id':2,'title':'Analysis','assigned':'2009-06-22T10:52:28.0687738-05:00','due':'2009-07-29T10:52:28.0687738-05:00','completed':'2009-07-14T10:52:28.0687738-05:00'},{'id':3,'title':'Narrative','assigned':'2009-06-22T10:52:28.0687738-05:00','due':'2009-07-29T10:52:28.0687738-05:00','completed':'2009-07-14T10:52:28.0687738-05:00'},{'id':4,'title':'Graphic','assigned':'2009-06-22T10:52:28.0687738-05:00','due':'2009-07-29T10:52:28.0687738-05:00','completed':'2009-07-14T10:52:28.0687738-05:00'}]}}

I.e. it adds a "{id:'-1','result':{ /* ... snip ... */ }}" wrapper around the working JSON.

Is there anyway to point the jsonReader property of jqGrid to the correct place to start parsing the JSON result? I'm having a heck of a time with all of this :)

--- edit ---

I wanted to post a quick example... thanks for your answer, Stuntz. All that is needed for the following example is .NET, Jayrock, jQuery, and jqGrid. This works with the above JSON. I forget whether or not you need to set the content type.

var lastsel; // last row selected (for editing)      

jQuery(document).ready(function(){ 
    jQuery("#mygrid").jqGrid({ 
        contentType: "text/plain; charset=utf-8",
        datatype: function(postdata)
        {
            $.ajax({
                url: 'http://localhost:2064/StoryManager/StoryManager.ashx/getPageItemRoles?id=3',
                data: postdata,
                complete: function(response, status)
                {
                    if(status=='success')
                    {
                        var mygrid = jQuery("#mygrid")[0];
                        var o = eval("(" + response.responseText + ")"); // TODO don't use eval.  it's insecure, but older browsers support it...
                        mygrid.addJSONData(o.result);
                    }
                }
            })
        },                
        colNames:['ID', 'Title', 'Assigned To', 'Assigned', 'Due', 'Completed'],
        colModel:[
            {name:'id', label:'ID', jsonmap:'id', hidden: true,  editrules: { edithidden: true }},
            {name:'title', jsonmap:'title', editable: true},
            {name:'assignedto', label:'Assigned To', jsonmap:'assignedto', editable: true},
            {name:'assigned', jsonmap:'assigned', editable: true},
            {name:'due', jsonmap:'due', editable: true},
            {name:'completed', jsonmap:'completed', editable: true}
        ],
        jsonReader: {
            repeatitems: false
        }
    });  
});

Answer 1

No, you can't do this via jsonReader. Internally, the grid does:

  ts.p.page = data[ts.p.jsonReader.page];

...which won't work for a dotted sub-property.

Instead you'll need to fetch the grid data manually by setting datatype to a function. You can then fetch the data with $.ajax, and call grid.addJsonData when it comes back, just like the grid does, except that instead of passing the whole response you'll pass a sub-property of the response.

Answer 2

This post and links have been really helpful. I don't have a clear understanding on how this works yet but I thought that I would just post this to help someone ease their pain :)

This is the return JSON from getRecords:

{"id":-1,"result":{"page":"1","total":"1","records":"2","rows":[{"id":"13","invdate":"2007-10-06","name":"Client 3","amount":"1000.00","tax":"0.00","total":"1000.00","note":""},{"id":"12","invdate":"2007-10-06","name":"Client 2","amount":"700.00","tax":"140.00","total":"840.00","note":"no tax"}]}}

And this is the working code:

jQuery(document).ready(function(){ 
    jQuery("#list4").jqGrid({ 
        contentType: "text/plain; charset=utf-8",
        datatype: function(postdata)
        {
            $.ajax({
                url: 'http://localhost/Booga/Baba.ashx/getRecords',
                data: "{}", // For empty input data use "{}",
                dataType: "json",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                complete: function(response, status)
                {
                    if(status=='success')
                    {
                        var mygrid = jQuery("#list4")[0];
                        var o = eval("(" + response.responseText + ")");// TODO don't use eval.  it's insecure, but older browsers support it...
                        mygrid.addJSONData(o.result);
                    }
                }
            })
        },                
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90, jsonmap:"invdate"},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},      
        {name:'total',index:'total', width:80,align:"right"},       
        {name:'note',index:'note', width:150, sortable:false}       
    ],
        jsonReader: {
            repeatitems: false
        }
    });  
});

By the way, does anyone know why using eval is insecure? Look at the comment on my code. I grabbed that part from the forum.asp link.