I'm going to change the background color of the row based column value.
At first loading of table, It's done by rowattr.
After edit the column, how can I change the row background based on the column without reloading the table?
It's known problem of editing of data. The solution depends on the version and fork of jqGrid, which one use, or from the editing mode used.
If you use free jqGrid fork, then one can use afterSetRow callback, which will be called after any changing of the row (inline or form editing). The following code of afterSetRow
afterSetRow: function (options) {
if (options.localData.closed) {
$(options.tr).addClass("ui-state-error ui-state-error-text");
} else {
$(options.tr).removeClass("ui-state-error ui-state-error-text");
}
}
can be used additional to rowattr
rowattr: function (item) {
if (item.closed) {
return {
"class": "ui-state-error ui-state-error-text"
};
}
}
See the demo https://jsfiddle.net/k5j2ojx2/. You can try to edit the row with respect of inline editing buttons (fomatter: "actions"), by form editing or inline editing buttons of navigator bar (added by navGrid and inlineNav). If you would change the checkbox of Closed column then the color of the row will be changed too.
UPDATED: If you use cell editing then you should use afterSaveCell callback. For example,
afterSaveCell: function (rowid, name, value, iRow, iCol) {
if (name === "closed") {
if (value === "true") {
$(this.rows[iRow]).addClass("ui-state-error ui-state-error-text");
} else {
$(this.rows[iRow]).removeClass("ui-state-error ui-state-error-text");
}
}
}