How to show grid with root in jqGrid in JSON

0
votes

I have a server that returns JSON in the following format:

[{"Name": "Student1", "Email": "Email1", "CellPhone": null},
{{"Name": "Student2", "Email": "Email2", "CellPhone": null}]

HTML file has: <table id="list1></table> <div id="pager1"></div>

JS file is:

jQuery().ready(function () {
    jQuery("#list2").jqGrid({
        url: 'Default.aspx?query=SELECT VALUE s FROM ModelContainer.StudentSet AS s WHERE s.Name = \'Student2\'',
        datatype: "json",
        colNames: ['Name', 'Email'],
        colModel: [
            { name: 'Name', index: 'Name', width: 200 },
            { name: 'Email', index: 'Email', width: 500 }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager1',
        sortname: 'Name',
        viewrecords: true,
        sortorder: "desc",
        caption: "JSON Example",
        jsonReader: {
            repeatitems: true,
            id: "0",
            cell: "",
            //root: "",
            records: function (obj) {
                return obj.length;
            }
        }
    });
    jQuery("#list1").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false});
});

Since my JSON is already the root of data wanted, I don't know what to what with the root column. I've tried with not writing anything about root, or root: "", neither has an output. But firebug shows that JSON is received correctly.

I don't know if this has anything to do with the root. Any suggestion?

2
jqueryjsonjqgrid

2 Answers

0
votes

As per my knowledge, we need to set the JSON object name in jsonReader as following:

jsonReader: {
            repeatitems: true,
            id: "0",
            cell: "",
            rows : "details",
            page : "pageno"
            }

JSON FORMAT:

 {"pageno":"1", "details" : [{"Name": "Student1", "Email": "Email1", "CellPhone": null},   
    {{"Name": "Student2", "Email": "Email2", "CellPhone": null}]

jsonreader options:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data

3
votes

You can use

jsonReader: {
    repeatitems: false,
    id: "0",
    root:  function (obj) {
        return obj;
    },
    records: function (obj) {
        return obj.length;
    },
    page: function () {
        return 1;
    },
    total: function () {
        return 1;
    }
}

but to make the code which you posed working you have to fix more bugs:

  • the HTML fragment
<table id="list1></table> <div id="pager1"></div>

should be fixed to

<table id="list1"></table> <div id="pager1"></div>
  • The jQuery("#list2").jqGrid({ should be fixed to jQuery("#list1").jqGrid({
  • The JSON data must be fixed to remove syntax error because of one unneeded { character. Correct data can be
[{"Name": "Student1", "Email": "Email1", "CellPhone": null},
 {"Name": "Student2", "Email": "Email2", "CellPhone": null}]

The fixed demo works.