This is a migrated thread and some comments may be shown as answers.

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

7 Answers 1327 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 10 Aug 2016, 04:27 PM

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?

7 Answers, 1 is accepted

Sort by
0
Greg
Top achievements
Rank 1
answered on 11 Aug 2016, 02:16 PM

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

0
Greg
Top achievements
Rank 1
answered on 11 Aug 2016, 02:22 PM

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

0
Danail Vasilev
Telerik team
answered on 12 Aug 2016, 11:19 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Greg
Top achievements
Rank 1
answered on 12 Aug 2016, 12:34 PM

Danail

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

0
Nikolay
Telerik team
answered on 16 Aug 2016, 06:33 AM
Hi Greg,

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

Regards,
Nikolay
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Greg
Top achievements
Rank 1
answered on 16 Aug 2016, 03:25 PM

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?

0
Greg
Top achievements
Rank 1
answered on 16 Aug 2016, 04:24 PM

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");
            }
        }
    }
     
}

Tags
Grid
Asked by
Greg
Top achievements
Rank 1
Answers by
Greg
Top achievements
Rank 1
Danail Vasilev
Telerik team
Nikolay
Telerik team
Share this question
or