jqGrid local data sorting loses information

Question

Okay I'm just about ready to tear my hair out. I'm loading a jqGrid with JSON data but with "loadonce" set to true, to keep it local. When I just show the default content of columns sorting works fine, but what I need is, for some columns to use info from another column to modify what is shown. For example, instead of having a "device" and a "model" column, I want to show both under one column, like this "device - model", and I use a custom formatter for that.

The problem is, in this case, when I do sort, I lose the "model" information and it becomes "undefined". Here's part of my code:

mdlTable = tableWrap.jqGrid({
    url: loadURL,
    datatype: 'json',
    colNames: ['ID', 'Device', 'Description', 'IP', 'Model'],
    colModel: [
        {name:'id', index:'id', hidden:true, key:true},
        {name:'device', index:'device', width:192,
            formatter:function(value, options, rData){
                var str = "<a href='/administration/mdl/vwDevice.aspx?device_id=";
                str += rData[0] + "' target='_blank'>" + value;
                if ('' != rData[4]) str += " - " + rData[4];
                str += "</a>";
                return str;
            }
        },
        {name:'desc', index:'desc', width:256, sortable:false},
        {name:'ip', index:'ip', width:96},
        {name:'model', index:'model', hidden:true}
    ],
    sortname: 'id',
    viewrecords: true,
    loadonce: true,
    viewsortcols: [true,'vertical',true],
    gridview: true,
    ignoreCase: true
})
.navGrid('#deviceList_footer', {edit:false, add:false, del:false, cloneToTop:true});

So as you can see, I hide the model column, and "move" that information over to the device column because that's where it's suppose to be shown. It's all fine on load, but as soon as I do sort, or search and it refreshes the view as it were, the "copy" of the data is lost for some reason. If I show the model column the info there remains just fine, it's just the device column that gets the "undefined" value.

I tried triggering "reloadGrid", doesn't help. I also tried to add unformat function but I'm not sure what I can do there. I basically just returned a $(cellobject).html() - that didn't work obviously.

Edit: Added sample JSON data

{ "rows" : [{
        "id" : "181",
        "cell" : ["181", "Router A", "some description", "55.444.33.222", "Model 1"]
    }, {
        "id" : "291",
        "cell" : ["291", "Router B", "some description", "55.333.22.444", "Model 2"]
    }, {
        "id" : "1346",
        "cell" : ["1346", "Router C", "some description", "55.111.44.333", "Model 3"]
    }, {
        "id" : "1999",
        "cell" : ["1999", "Router D", "some description", "55.222.11.000", "Model 4"]
    }
]}

Answer 1

The problem is that at the beginning the third parameter of the custom formatter has array type and later no more. So you have to modify the formatter to something like

formatter: function(value, options, rData){
    var model = '',
        str = "<a href='/administration/mdl/vwDevice.aspx?device_id=" +
              value + "' target='_blank'>" + value;
    if ($.isArray(rData)) {
        model = rData[4];
    } else {
        model = rData.model;
    }
    if (model) {
        str += " - " + model;
    }
    str += "</a>";
    return str;
}

Then the sorting will work: see here.

One more tip. You use key:true property of the id column. In the case you don't need include the same id values twice. You can reduce the JSON data to the following

{ "rows" : [
    ["181", "Router A", "some description", "55.444.33.222", "Model 1"],
    ["291", "Router B", "some description", "55.333.22.444", "Model 2"],
    ["1346", "Router C", "some description", "55.111.44.333", "Model 3"],
    ["1999", "Router D", "some description", "55.222.11.000", "Model 4"]
]}

The only change in the jqGrid, to be able to read the new JSON format, is additional parameter jsonReader: {cell:''}. See the results here.