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.?

I'm confused, I do not see a custom formatter in your jqGrid example code? — Justin Ethier, Jun 19 '12 at 14:21
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 :) — Justin Ethier, Jun 19 '12 at 14:33

DisplayName · Accepted Answer · 2013-06-24T20:17:06.877

2

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;

edited Jun 24 '13 at 20:17

answered Jun 19 '12 at 13:50

DisplayName

3,093
5
35
42

That's really cool - so do you call `setGridParam` afterwards to update the grid data? Also, which event are you calling this from? – Justin Ethier Jun 19 '12 at 14:38
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... – Justin Ethier Jun 19 '12 at 14:54
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 – Pete_ch Jun 20 '12 at 00:11
@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? – Jerry Of Perth Sep 25 '12 at 15:23
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. – Jerry Of Perth Sep 25 '12 at 16:10

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

1 Answers1

Linked