Keep checked state of checkbox in custom formatted column when sorting jqGrid

Question

I have a load once jqgrid that uses a custom formatter to display checkboxes for bool values that are persisted only when a save button is clicked. However, whenever a sort is clicked the checked state of all the checkboxes is not kept.

jQuery("#list2").jqGrid({
    url:myurl,
    datatype: "json",
    loadonce: true,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'isChecked',index:'isChecked', width:90, formatter:chkFmatter},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},      
        {name:'total',index:'total', width:80,align:"right"},       
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

function chkFmatter(cellvalue, options, rowObject) {
    // do something here to format column
    return new_format_value
}

Is there anyway that I can keep what checkboxes were clicked when sorting, paging, etc.?

Aluminize

I'm confused, I do not see a custom formatter in your jqGrid example code? – Amniocentesis

Absolutely, and there is nothing wrong with that. I am just trying to understand how you solved your problem so I (or anyone else) can apply the knowledge :) – Amniocentesis

Answer 1

It is because the data that is bound to the grid is not being updated, so any new requests (paging, sorting, etc.) will reflect the original state that the property was bound to. Your best bet would be anytime the state of the checkbox changes to update the actual data to reflect this.

You can retrieve the data that is bound to the grid using getGridParam:

var data = $('#' + gridid).jqGrid('getGridParam', 'data');

Then to update it use your rowid, name of the column, and value to update the data object:

data[row - 1][columnname] = value;

Aluminize

That's really cool - so do you call setGridParam afterwards to update the grid data? Also, which event are you calling this from? – Amniocentesis

But how does the sort know to use value instead of the previous value in data? Or now that I look at the code, I suppose it does not need to because $t.p[pName] is returned directly... – Amniocentesis

wont the state revert to the state of the data from the server on paging back and forth or sorting (server side)? I would suggest to handle the 'afterSaveCell' to send an update to the server for each edit - if not, save your edited rows and display them e.g next to the grid from which you will submit all the edits when the user clicks the save button - your users will ave to understand that the grid is showing server data and your side view is showing the pending updates – Importunity

@fbfcn When I use a radio button click event to update a cell change to the local grid data object it shows as intended until navigating to the next page and back of the local data, then it reverts to the originally loaded state. Is there something in addition to data[row - 1][columnname] = value; to actually "save" the change to the local data array? – Shirtmaker

Yes this is true, the data is preloaded once and loadonce:true, as soon as the page is moved forward or backward it reverts to the originally loaded data. It's late here and I'll put code tomorrow if you'd have a look. Thx. – Shirtmaker