JqGrid setCell properties lost when sorting column

2
votes

Just after editing a row (mode inline) I try to change some css properties of cells according the new value.

Typically : After editing of one row all cell of this row that contains the letter "D" I update the cell with a new css property : background-color: grey (using setCell method)

For that I use inline editing :

grid.jqGrid('navGrid',"#pager",{edit:false, add:false, del:false});
grid.jqGrid('inlineNav',"#pager",{edit:true, add:false, del:false, editParams: myEditParam});

For change the background after editing I use the method aftersavefunc

myEditParam :
...
    aftersavefunc: function(rowId, dataFromServer)
    {
      var rowData = $("#list").jqGrid("getRowData", rowId);
      for (var key in rowData)
      {
        if (rowData[key] == "D")
        {
          key++;
          $("#list").jqGrid("setCell",rowId, key, "", {"background-color": "#ECECEC"}  );
        }
      }
    },
...

This code works but unfortunatly, when I sort one column of the grid the setCell method is not perserved ! (the cell lost it's background-color: grey)

Does it exist a better method for change the background after editing in function of the new value ?

Thx for your help ;)

2
jqgrid
Do you only want the cell value to have the CSS style after editing or is it that any row containing a cell with a certain value should have this different style? - Mark
@Mark : Effectively all containing a cell with a certain value should have this different style. - Erms

2 Answers

1
votes

I would suggest removing the Style from that event and rather move it to the more general function below. If the style isn't applied you can always trigger a refresh on the jqGrid as part of your after edit code.

The following function will examine each column cell value and if the TestValue is matching add the class to the row.

    rowattr: function (rd) {
           if (rd.ColumnName == TestValue) { return {"class": "RowBoldClass"}; }//if
    },

and the matching class

RowBoldClass { font-weight:bold; .....

My answer from Making a row bold, changing background color - dwr

0
votes

If you really need to change the format/color/style of the cell in the column which can the value "D" then you should use cellattr (see the answer or this one).

If you need to change the format/color/style of the row then you should use rowattr (see the answer).

One thing is important to understand: neither cellattr nor rowattr will be called at the end of row editing. So you will still have to use aftersavefunc callback.

The current code of aftersavefunc seems me a little strange. First of all I never had requirements to mark the value in any column of the grid based on the value ("D" in your case). Typically one need to test only specific column or columns for the value and then mark the cell or mark some other cell in the row.

In any way one need typically not just add the class in the value will be "D", but remove the class if the value is not "D".

I modified the demo from the answer to support inline editing (one should use double-click to start editing and press Enter to stop editing). The modified demo uses the following code of aftersavefunc additionally to cellattr used in the old demo:

aftersavefunc: function (rowId) {
    var closed = $(this).jqGrid("getCell", rowId, "closed"), indexOfColumn;
    if (closed === "Yes") {
        // add CSS classes to the cell used to mark
        $(this).jqGrid("setCell", rowId, "name", "",
           "ui-state-error ui-state-error-text");
    } else {
        // remove CSS classes from the cell used to mark
        indexOfColumn = getColumnIndexByName.call(this, "name");
        $(this.rows.namedItem(rowId).cells[indexOfColumn])
            .removeClass("ui-state-error ui-state-error-text");
    }
}