jqgrid inline edit rows and data not lining up

Question

I've implemented a jqgrid with inline edit:

var lastSel;

    jQuery(document).ready(function () {

        jQuery("#list").jqGrid({
            url: '/Home/DynamicGridData/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Actions', 'Id', 'note', 'tax'],
            colModel: [
            {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
                     formatoptions:{
                         keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
                         onEdit:function(rowid) {
                             alert("in onEdit: rowid="+rowid+"\nWe don't need return anything");
                         },

                         },},
              { name: 'Id', index: 'Id', width: 55,align:'center', editable: false },
              { name: 'note', index: 'note', width: 40,align:'center', editable: true },
              { name: 'tax', index: 'tax', width: 40,align:'center', editable: true}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'My first grid',
            editurl: '/Home/Save/'
        });
        jQuery("#list").navGrid('#pager', { edit: false, search: false, add: false });
    }); 

The problem is that it's not working as expected. The problem is that when the grid loads the Id data is loaded into the Actions column, the note data is added into the Id column and the tax data is added into the note column. The tax column is empty. I think this is because when the data is loaded there is nothing currently in the Actions column?

Anyway when the actions icon buttons load they load in the Actions column which is correct but over top of the Id data which is in the wrong column.

I've compared this with other working examples but so far have not found the problem.

EDIT:

Have just found this problem occurs with the json data but not local data.

So if you feed it Json data like:

public JsonResult DynamicGridData2(string sidx, string sord, int page, int rows)
        {
            int totalPages = 1; // we'll implement later
            int pageSize = rows;
            int totalRecords = 3; // implement later

            var jsonData = new {
                total = totalPages,
                page = page,
                records = totalRecords,
                rows = new[]{
                    new {id = 1, cell = new[] {"1", "Note1", "Tax1"}},
                    new {id = 2, cell = new[] {"2", "Note2", "Tax2"}},
                    new {id = 3, cell = new[] {"3", "Note3", "Tax3"}}
                }
            };
            return Json(jsonData);
        }

The error happens. However if you give it local data like:

data: mydata,
datatype: 'local',

var mydata = [
                    {id:"1", note:"Note1", tax:"Tax1"},
                    {id:"2", note:"Note2", tax:"Tax2"},
                    {id:"3", note:"Note3", tax:"Tax3"}
                ]

It's fine.

Answer 1

I can suggest you two solution of the problem. The first one is very easy. You should include "" as the first column in the cell array:

public JsonResult DynamicGridData2(string sidx, string sord, int page, int rows)
{
    // ...
    var jsonData = new {
        // ...
        rows = new[]{
            new {id = 1, cell = new[] {"", "1", "Note1", "Tax1"}},
            new {id = 2, cell = new[] {"", "2", "Note2", "Tax2"}},
            new {id = 3, cell = new[] {"", "3", "Note3", "Tax3"}}
        }
    };
    return Json(jsonData);
}

In the case the code will produce the following JSON data

{
    "total": "1",
    "page": "1",
    "records": "3",
    "rows": [
        { "id": "1", "cell": ["", "1", "Note1", "Tax1"] },
        { "id": "2", "cell": ["", "2", "Note2", "Tax2"] },
        { "id": "3", "cell": ["", "3", "Note3", "Tax3"] }
    ]
}

and the data will be correctly displayed: see the first demo here.

The other way which I can suggest is to use the same server code as before, but to define on the client side how the data will be read:

colModel: [
    {name: 'act', index: 'act', width: 55, sortable: false, formatter: 'actions',
        formatoptions: {
             // we want use [Enter] key to save the row and [Esc] to cancel editing.
             keys: true,
             onEdit:function(rowid) {
                 alert("in onEdit: rowid="+rowid+"\nWe don't need return anything");
             }
        },
        jsonmap: function (obj) { return ''; }},
    { name: 'Id', index: 'Id', width: 55,
        jsonmap: function (obj) { return obj.cell[0]; } },
    { name: 'note', index: 'note', width: 40, editable: true,
        jsonmap: function (obj) { return obj.cell[1]; } },
    { name: 'tax', index: 'tax', width: 40, editable: true,
        jsonmap: function (obj) { return obj.cell[2]; } } ],
jsonReader: { repeatitems: false },
cmTemplate: { align: 'center' }

See the next demo here.

In the example I defined first of all the jsonReader: { repeatitems: false } parameter which allows us to use not only arrays with one-to-one order like the column order in the colModel. Now we can use jsonmap which defines to read the column contain from the row object like

 { "id": "1", "cell": ["1", "Note1", "Tax1"] }

for example. The id property (not 'Id') will be read in the standard way by jqGrid. To read any other cell contain from the row of JSON data the jsonmap function will be called. We return just the correct string from the cell array.

It is relatively clear to understand that you can simplify and reduce the size of the JSON data if you replace the row which represent the data to

["1", "Note1", "Tax1"]

In the case you should just add key: true property for the 'Id' column and change the jsonmap functions. For example for the 'tax' column it should be jsonmap: function (obj) { return obj[2]; } }.

At the end I would recommend you to take a look in the UPDATED part of the answer where you can download VS2008 or VS2010 demo project. It seems to me the demos could be helpful for you.