Assigning JSon data in JqGrid using WebApi

Question

I am building an application using MVC & Web Api. On a View I am using JqGrid. Previously we used to assign local data to JqGrid which was working fine. Now due to some changes in logic, we are using WebApi to bring data from Server, this is a Json data, we store it in variable then we assign this data object to JqGrid but data does not get displayed. When instead of data option i give "url" of web api then everything works fine, but as soon we use "data" option then jqgrid does not work.What could be the possible reason? Reason for doing this is that I want to add, edit, update data locally and then when final save button is pressed, data goes back to Server.

 $().ready(function () {        
    //{"total":1,"page":1,"records":3,"rows":[{"id":"1","cell":["1","Tomato        
    //Soup","[email protected]","[email protected]","Groceries"]},{"id":"2","cell":["2","Yo-
    //yo","[email protected]","[email protected]","Toys"]},{"id":"3","cell":
    //["3","Hammer","[email protected]","[email protected]","Hardware"]}]}
    //   

    $.getJSON("api/userwebapi/",
         function (data) {
             //userDataFromApi = jQuery.parseJSON(data);
             userDataFromApi =data;
             //alert(userDataFromApi[0].ID);
             ConfigureUserGrid(userDataFromApi);
         });


});

function ConfigureUserGrid(userDataFromApi) {

    var grdUsers = $("#grdUsers");
    var lastsel = 0;
    $("#grdUsers").jqGrid({            
        datatype: "json"
        , data: userDataFromApi
        //, url: "api/userwebapi"
        ,colNames: ['ID', 'Name', 'User Role', 'Email', 'Address']
        ,colModel: [
            { name: 'ID', index: 'ID', width: 80, hidden: true }
        , { name: 'Name', index: 'Name', width: 150 }
        , { name: 'UserRole', index: 'UserRole', width: 150 }
        , { name: 'Email', index: 'Email', width: 200, sortable: true }
        , { name: 'Address', index: 'Address', width: 200, sortable: true }]            
        , viewrecords: true            
        , pager: '#pager1'
        , mtype: 'GET'
    ,rowNum:true
    ,caption: 'My first grid'
    });                            //close of jQuery("#grdUsers").jqGrid({

    $("#grdUsers").jqGrid('navGrid', '#pager1',
            { add: false, del: false, edit: false, search: false, refresh: false });
}

Answer 1

The reason of the problem is wrong usage of jqGrid parameters (options). To be exactly you use wrong combination of jqGrid options. Tony Tomov (the developer of jqGrid) added many features in jqGrid during every new version. He wanted to hold backwards compatibility if it's possible. As the result there are a lot of options without clear name conversion. Many options work only if some other options are set. Exactly like in case of jQuery or jQuery UI there are no validation of input parameters. It makes many problems who people who starts to use jqGrid.

The problem in your case is the usage of data parameter together with datatype: "json". It's wrong combination of parameters. The problem is that jqGrid supports two remote datatypes and some local datatypes.

If you use datatype: "json" or datatype: "xml" then jqGrid get for you AJAX request for initial filling of grid and on every sorting, paging and (optionally) filtering. In any way the request to the url will be send. One uses HTTP command specified by mtype parameter. The paging and sorting of data have to be implemented on the server side. The request contain the requested page number, the length of the page, the index of the column used for the sorting and the direction of sorting. The data returned from the server should in the format described here. If you have non-standard data format you can use jsonReader options of jqGrid and jsonmap (xmlmap) in colModel to specify how the server response should be used to fill the grid.

If you don't want to implement server side paging, sorting and filtering of data you can use loadonce: true option. In the case the server should return all data at once. The data should be sorted once based on the initial sorting column (based of sortname and sortorder which you use). jqGrid will change datatype automatically to "local" after the first loading of data.

All other datatypes will be interpreted as local datatypes. The data parameter will be used only in case of datatype: "local". One should use another format of data in the case. One can use localReader (see here) to change the way how the data should be read from data parameter.

There are special case datatype: "jsonstring" where you can fill the grid in the way close with datatype: "json", but to use an object or JSON string as the input. In the case one should use datastr (not data !!!) as the input of data. After the first filling the datatype will be changed by jqGrid from datatype: "jsonstring" to datatype: "local".

So you have some options to fix the problem:

• to use url and loadonce: true options if you don't want to implement paging of data.
• to use datatype: "jsonstring" and datastr instead of data.
• to use datatype: "local" and data filled as array of named items (properties of items should be the same as the value of name property of the columns).