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

8 posts, 0 answers
  1. Greg
    Greg avatar
    24 posts
    Member since:
    Dec 2014

    Posted 10 Aug Link to this post

    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?
  2. Greg
    Greg avatar
    24 posts
    Member since:
    Dec 2014

    Posted 11 Aug in reply to Greg Link to this post

    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

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Greg
    Greg avatar
    24 posts
    Member since:
    Dec 2014

    Posted 11 Aug in reply to Greg Link to this post

    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

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 12 Aug Link to this post

    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
  6. Greg
    Greg avatar
    24 posts
    Member since:
    Dec 2014

    Posted 12 Aug in reply to Danail Vasilev Link to this post

    Danail

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

  7. Nikolay
    Admin
    Nikolay avatar
    64 posts

    Posted 16 Aug Link to this post

    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
  8. Greg
    Greg avatar
    24 posts
    Member since:
    Dec 2014

    Posted 16 Aug Link to this post

    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?

  9. Greg
    Greg avatar
    24 posts
    Member since:
    Dec 2014

    Posted 16 Aug Link to this post

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

Back to Top
UI for ASP.NET MVC is VS 2017 Ready