How to alter data received from the server before processing by jqGrid

Viewed 2276

Scenario of what I'm trying to achieve:

  • I retrieve some data from the server
  • I loop the data and add/alter values for some fields
  • The data is being displayed in a grid
  • The user locally edits the data
  • When finished, the user submits the entire grid data to the server

How I tried to achieve it:

I made a jqGrid with loadonce:true, editurl:'clientArray' and inline editing. In loadComplete I loop through the data received from the server and add some values. An external button is used to get the grid data using .jqGrid('getGridParam','data') and send it to the server.

loadComplete: function(data){
    for(var i=0; i<data.rows.length; i++){
      var row = data.rows[i];
      grid.jqGrid('setRowData', row.id, {
        missingData: 'someDefaultValue'
      });
    }
}

Problem: The loadComplete event fires when the user changes the grid page or does a search. Which results in overriding any data edited by the him. I tried using the beforeProcessing event instead but it never fires (Edit: It didn't work when testing with local data, but works with loadonce). I could not find any other suitable event in the documentation.

I reproduced the scenario in this demo.

Question: How should I correctly modify the data after receiving it from the server and let the user edit locally, without overriding his edits when he changes the page or does a search?

Note: I am using free-jqGrid 4.14

1 Answers
Related