Hi Paramvir,
Unfortunately, that didn't do the trick. In fact, it made it worse ... now the cell doesn't update even when the table is unfiltered. Before, it would update when it was unfiltered (ie every row was the original, unfiltered row) but not when it was filtered down to a few rows.
What appears to be throwing it off is that the row reference (rowIndx) retrieved when the user double-clicks the cell is the row number relative to the filtered data being displayed, while when updating the cell after the ajax transaction completes the rowIndx always goes to the corresponding row in the unfiltered (total) list, not the filtered list.
Example: if I have 100 rows, and I filter out the first 20 and the last 77, leaving three rows, the rowIndx value at the start of the transaction will be 0,1 or 2(one of the three visible rows) but when the response returns the cell in row 0, 1, or 2 of the original table gets updated. If I reset the filter, I can see the changed cell in that row near the top.
traineelist is a reference to the source array of data (dataModel: {data: traineelist},)
The 4th zero-based element in each sub-array within traineelist holds the Status value. Updating that, and then calling grid.RefreshCell, works well except when the row references don't correspond to the original data array (ie the table was filtered at the start of the transaction.)
Sorting doesn't cause any problem, only filtering.
Using updateRow as you suggested doesn't appear to correct that. I think what I'm looking for is a way to reference the row by its original position in the source data, not its current position in the filtered row.
Here's the code I have, with your change and my original part commented out, along with some additional comments.
if(ui.dataIndx==3){
var usr = document.getElementById("user").value;
var com = document.getElementById("co").value;
var row = ui.rowIndx; //this is row 0 of the filtered table, row 21 of the unfiltered table in my example
var grid = this;
$.ajax({
type: "POST",
dataType: "json",
url: "/suspenduser",
data: {seq:ui.rowData[0],val:ui.rowData[3],user:usr,co:com},
success: function(data){
console.log(row); //shows row relative to the current display
console.log(data.val); //shows returned value, correctly
console.log(ui.rowData[0]); //shows col 0 value (a hidden identifier for the record on the server) correctly.
//old code; cell would update if grid was unfiltered
//traineelist[row][3]=data.val;
//grid.refreshCell( { rowIndx: row, dataIndx: 3 } ); //this is updating row 0 of the total, unfiltered table
//new code; cell never updates
grid.updateRow( {
rowIndx: row,
newRow: { 3: data.val }
});
$("#message").html(data.message);
$('#message').show();
$('#message').fadeOut(3000);
},
});
}
The server receives the call and responds with the correct status change (Active or Suspended) but the cell doesn't update. Previously, it did with the column unfiltered.
Thanks for your help Paramvir. Please let me know if anything stands out.
UPDATE: I tried a test where, using my old code, I used:
traineelist[4][3]=data.val;
grid.refreshCell( { rowIndx: row, dataIndx: 3 } );
This locks the ajax return to updating the 5th array in the original data.
Then I tried filtering the data so that the original zero-based row 4 was always visible. That worked. If I double-clicked the cell that was originally in row 4, it would update even if, after filtering, it was in row 3 or something.
So this is telling me that the problem is finding the correct array element to update in traineelist, yes?
