JSON dot notation in jQgrid?

Question

I am using addRowData method to populate my grid. But my current JSON data have another object inside of each object in the JSON data. To make it view in the grid, i followed the notations in the documentation of jQgrid. But that column remain empty.

My Grid definition:

    $("#ExpenseTable").jqGrid({
    datatype : "local",
    mtype : 'GET',
    colNames : [ 'Entry ID','User Name', 'Category Name','Date','Amount','Status'],
    colModel : [ 
                 {name:'expnsId',label:'ID', width:150 ,editable: false}, 
                 {name:'userName',label:'NAME', width:150 ,editable: false},
                 {name:'category.catName',label:'CATEGORY', width:150 ,editable: false},
                 {name:'date',label:'DATE', width:150 ,editable: false},
                 {name:'amount',label:'AMOUNT', width:150 ,editable: false},
                 {name:'status',label:'STATUS', width:150 ,editable: false},
                 ],
    pager : '#ExpPager',
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    sortname : 'invid',
    sortorder : 'desc',
    viewrecords : true,
    autowidth : false,
    caption : 'Expenses Details',
    onSelectRow : function(expnsId) { dispExpensData(expnsId); }
    }); 

Code used to populate the Grid:

    ExpenseDetailsManagement.getexpenseList(function(expRecords){
    //for(count = 0; count<expRecords.length; count++){
    //  expRecords[count].catId = expRecords[count].category.catId;
    //  expRecords[count].catName = expRecords[count].category.catName;
    //}//I am using this for loop to convert the category object
$("#ExpenseTable").clearGridData(true);
$("#ExpenseTable").jqGrid('addRowData', "expnsId", expRecords);
});

The data returned from the server looks like:

Any idea or suggestions about where i am going wrong!!!

Answer 1

If the values from the 'expnsId' column are unique, I'll recommend you to use key:true parameter as a option of 'expnsId' coulmn. Then the value of the column will be used as the row id.

To be able to help you with the dotted column names you should post the JSON data and not the screenshort with "Object" text on the place of the most important information. Probably your main problem can be easy solved with respect of localReader instead of dotted name.

One more small remark. Beause you use label option for all columns you can remove colNames array which will be not used. The option editable: false is default, so you can remove it also. The parameter mtype you can also remove because it will not used for local data.

UPDATED: Sorry the value of the first parameter of addRowData should be do the name of the column with the data like you as do. So I deleted the first paragraph from the first version of my answer.