How to update value of data in jqgrid

Question

I'm trying to update a cell in jqgrid permanently upon loading. I know I can use setCell but that only updates the value for that page. If I come back to the page if I don't explicit perform another setCell for the cell the old value is shown. I've also tried setRowData but it appears to be doing the same thing. I'm using the loadonce as my approach is to 1) load the data 2) modify a few values of the data based on some criteria 3) show the modified values. As I'm using loadonce shouldn't there be a way to modify a cell permanently in this session?

UPDATE:

Putting in my code that isn't giving an error but failing to iterate through all data:

var set = 0;

....

gridComplete: function(data){
    setData();
},

....

beforeRefresh: function(data){
    set = 0;
},

....

function setData(){

if(set == 1) return;
... //create hash up here
  var dataArray = jQuery("#grid").jqGrid('getGridParam', 'data');
  var j = 1;
  for (var rows in dataArray) {
    var key = dataArray[rows].name;
    dataArray[rows].level = hashTable[key];
    j++;
  }
  alert(j);
}

This is not cycling through all items in the array that are locally loaded. For example, if page size is set to 30, the alert(j) returns 30, despite how many items I have locally loaded. However, if I refresh the graph the j is the correct number. Why is the behavior of getGridParam different in each case?

Answer 1

If you use loadonce: true you should know where the local data will be hold by jqGrid. jqGrid has two options: data and _index. The data is array of items where every item has the name property as the name property of the columns from colModel. If you need find the item by id (rowid) you can use _index[rowid] to the the item with the rowid in the data array. So to change the data in the column 'myColumn' you should do the following:

// first change the cell in the visible part of grid
myGrid.jqGrid('setCell', rowid, 'myColumn', newValue);

// now change the internal local data
var dataArray = myGrid.jqGrid('getGridParam', 'data'),
    indexes = myGrid.jqGrid('getGridParam', '_index');
dataArray[indexes[rowid]].myColumn = newValue;

UPDATED: You can use documented getLocalRow method to change the local data:

// first change the cell in the visible part of grid
myGrid.jqGrid('setCell', rowid, 'myColumn', newValue);

// now change the internal local data
myGrid.jqGrid('getLocalRow', rowid).myColumn = newValue;

Answer 2

For all who came here from google, here is an updated answer!

important is the index, which you can get by calling getInd-Method. Because rowID != index of localRowData. (eq. rowId: jqg204, Index: 5)

EDIT: if set "key : true" in colmodel you can set your own rowId (diffrent from my example "jqg###", usually a PK from a database table)

var ind = myGrid.getInd(rowId);
var localRowData  = myGrid.jqGrid('getLocalRow', ind);
localRowData.myColumn = newValue;

hope that helps!

Answer 3

I had a similar issue:
I needed to update a row upon a certain user-action (irrelevant).
For that, I needed to know the exact row from the 'data' object, even after some filtering of the table.
So I found a way to identify which row was changed - I added a RowID property for each item of the 'data' object, at the 'loadComplete' event:

loadComplete: function () {
            if (firstRun) {
                firstRun = false;
                var dataArray = $('#jqGrid').jqGrid('getGridParam', 'data');
                $(dataArray).each(function (index) {
                    dataArray[index].RowID = index + 1;
                });
            }
        }

And now, at the formatter code, I was able to access rData.RowID to identify the exact row on which the action was taken, and to get/set its 'data' representation