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?

Tameka

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;

Fabric

Sorry, but I don't fully understand this. How do I do a 'dataArray[indexes[rowid]].myColumn'? would the exact code for a column called personName be: dataArray[indexes[rowid]].'personName' ? Because that caused an error. Also, why do I have to also call setCell? If I am really modifying the data array, won't future renderings of the data show the new values? – Tameka

Also, in your code you say to call 'setCell', then modify the data array. The data array should be much larger than just the cells that setCell will work with, correct? I should no longer need to call setCell each time I cycle through pages, sort or filter, correct? – Tameka

@WildBill: The dataArray[indexes[rowid]].personName or dataArray[indexes[rowid]]['personName'] will change only the internal jqGrid data, but not the contain of the <td> element of the grid. You can modify the internal data and call trigger('reloadGrid'), but the usage of setCell is better as full reloading of the grid. – Fabric

I'm really confused about what myGrid.jqGrid('getGridParam', '_index'); is doing. index is an object, correct? Shouldn't there be "getGridParams('records') number of elements in dataArray? When I try to iterate through those elements I keep getting an error. Plus I don't see _index as an option for getGridParam. Is there any documentation on it anywhere? – Tameka

@WildBill: The _index are used starting with jqGrid 3.7 (starting with existing the local data). You can use getLocalRow to get the local data but there are currently no setLocalRow which you need. If you post the code how you iterate through the elements I could see the error. To iterate _index you should use for (var i in _index) and the data is the standard array. – Fabric

@WildBill: You can use myGrid.jqGrid('getLocalRow', rowid).personName = 'newValue' to change the value with respect of the method. – Fabric

Updated code above to show where issues reside. Looks like getGridParam is either weird or I don't understand something fundamental about jqGrid..... – Tameka

@WildBill: Sorry, but I don't understand what you what to do in the code which you posted. What is hashTable? Why you don't use _index? The index is object and you can enumerate it's properties with for (var rowid in indexes). The dataArray is array. You should not use for (var rows in dataArray). It will be OK for C#, but not good for JavaScript. You should not use reserved name set as variable. The code which you posed changes level property in data, but changes nothing in the displayed grid. What you really want to do? – Fabric

I'm actually working in jquery and not C#. I omitted the changing of the text in the visual grid but I know how to do that. What I am trying to do is 1) load data from server and then 2) modify it based on some other rule on the client side. I tried to iterate through the dataarray but it does not appear that jqgrid allows one to do so. Hastable is a hash that I define through a few functions. It figures out what the data should be modified to after looking at all of the data. So what remains is "How do I modify the entire array on the client side for the duration of the session?" – Tameka

Also I still don't understand how to use index. Is it documented anywhere on the Internet? Where does rowid come from in this statement: dataArray[indexes[rowid]].myColumn = newValue; – Tameka

Ahhh, I got it.... I found a way not to use _index but the dataarry was the key to thesolution. I was creating my hash with getCell, so the approach you suggested is correct. – Tameka

@WildBill: I am glad to read that your code works now. Nevertheless I am not sure that everything is correct. If you fill hashTable using getCell then it can contains only information about visible rows. To enumerate all rows returned from the server you should first get indexes with var indexes = myGrid.jqGrid('getGridParam', '_index'); then enumerate all rowids with for (var rowid in indexes) { var item = dataArray[indexes[rowid]]; ...} In the way you will get item which represent every row. Currently the _index in not documented. – Fabric

Yes you are correct. I think I failed to articulate the issue but yes, using getCell was what was giving me an incomplete hashTable... – Tameka

@Oelg you should write a book or something on jqGrid; like a jqGrid Ninja or jqGrid - The road less traveled! – Jato

@VivekRagunathan: Thanks! I think about the book, but still don't found enough the time for writing. – Fabric

This is THE way to go when updating rows in jqGrid – Retch

@Fabric you are a wizard. Can't thank you enough – Swagman

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!

Acetylcholine

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

Roesler