Change color of cell based on value entered in other cells.

[Greg]

Lets say i have a grid with three columns A,B and C. Also lets assume the grid is Batch so that mean In-Cell edit. If a user is entering a row and and the user enters the same number in both cells A and B, then I want cell C to have a background color of red.

Basically this is a conditional on edit of two cells and if they meet the condition a third cell's background color is changed. This is not needed during databound because it's a simple batch that will clear the entries once saved some no data binding taking place if that makes sense.

 

I tired using a clientTemplate but it seems to work only on a new record or during databinding.  If they edit an existing row it needs to perform the check.

 

Any suggestions appreciated

I'm assuming on the Save event (in-cell), but how do you get and set the cell background color of C?

[Greg]

I found a way to change the color of cell "C".

if (e.values.TargetPen) {
        if (e.model.SourcePen.PenID === e.values.TargetPen.PenID) {
            e.model.set("ValidationComment", "Error: Can't move to same Pen. Move will be ignored.");
            $(rows[e.container.closest("tr").index()].cells[7]).css('background-color', '#ff9999');
        }
    }

 

Now all I have left to do is dynamically determine the column. As you can see from the code above it would be nice if I can derive the column number (in this case 7) from the column name.  Anyone want to tackle that one an respond I would appreciate.  I'll post if I come up with the answer.

Thanks

 

Greg

[Greg]

Let me expand on my comment.  I looked at it and it was not very explanatory.   The code above in in the Save event of the grid.  The grid is using Batch mode.

Within the save event I have a couple of variables I didn't show above.

var grid = $("#PenToPenMoveGrid").data("kendoGrid");
var rows = grid.items();

The key was getting the index of the row of the cell that fired the Save event.  I've hard coded the column which I plan on updating once I discover the proper syntax.

 

Greg

[Danail Vasilev]

Hi Greg,

To get the column index by name you should iterate through grid columns and find it:

function GetColumnIndexFromName(grid, strName) {
      var index = -1;
      var columns = grid.options.columns;
      if (columns.length > 0) {
          for (var i = 0; i < columns.length; i++) {
              if (columns[i].field == strName) {
                  index = i;
              }
          }
      }

      if (index == -1) {
          alert("column name not exists");
          return false;
      }
      else {
         return index;
      }
  }

To color a particular column based on some condition in edit mode you can handle the save event where you can do the following:
     - check the modified values via e.values
     - get the current row via the uid
     - use the provided function above to get the column index
     - once you have the row and the column index you can get the target cell and change its color.

For example:

save: function(e){
  var condition = (e.values.UnitPrice != undefined) && (e.values.UnitPrice > 10)
  if(condition){
        var colIndex = GetColumnIndexFromName(e.sender, "Discontinued");
        var targetCell = e.sender.tbody.find("tr[data-uid='" + e.model.uid + "'] td")[colIndex];
        $(targetCell).css('background-color', '#ff9999');
  }

},

A fully runnable sample is available here as well - http://dojo.telerik.com/ULaro

Regards,
Danail Vasilev
Telerik by Progress

[Greg]

Danail

Thank you so much for the explaination and example of properly obtaining grid information and changing the background color.

[Nikolay]

Hi Greg,

In case of any questions, do not hesitate to write back.

Regards,
Nikolay
Telerik by Progress

[Greg]

Thank you Nakolay

I do have a question related  to changing a cells background color.  I'm using the batch mode and when I click on add new row the colors for all cells in each row I changed the color are getting changed back to the default color.  I don't see an event I can hook into that will allow me to iterate over the rows and change them back.  Like an onNewRecord event.  An suggestion on how cells can retain their color when adding a new record?

[Greg]

I solved it.  Looks like on a new record the DataBound event is what I needed to hook my code into to retain the color.

function onDataBound(e) {
    //Logic used to retain color of cells when a new record is added.
    var rowCount = this.dataSource._data.length;
    if (rowCount > 1) {
        for (i = 0; i < rowCount - 1; i++) {
            var comment = this.dataSource._view[i].ValidationComment;
            if (comment.indexOf("Error:") !== -1) {
                var colIndex = GetColumnIndexFromName(e.sender, "ValidationComment");
                var targetCell = e.sender.tbody.find("tr[data-uid='" + this.dataSource._data[i].uid + "'] td")[colIndex];
                $(targetCell).css('background-color', "#ff9999");
            }
            else if (comment.indexOf("Warning:") !== -1) {
                var colIndex = GetColumnIndexFromName(e.sender, "ValidationComment");
                var targetCell = e.sender.tbody.find("tr[data-uid='" + this.dataSource._data[i].uid + "'] td")[colIndex];
                $(targetCell).css('background-color', "#ffff99");
            }
        }
    }

}