Custom cell renderer for whole row

Tags: #<Tag:0x00007efc64c8ca00> #<Tag:0x00007efc64c8c898>
#1

Hello!

I have a question regarding my custom renderer, very similar to this:

I basically wish to achieve the same thing, BUT I do not know hot to get the whole row.
So, what I want is, if the value of a cell is ‘All’, make the entire row blue.

I am doing something like this inside my renderer:

 function blueCellsRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (col <= 3) {
      cellProperties.readOnly = true;
      td.style.background = "#aac0de";
      td.style.color = "#000000";
    }
    if (value === "All") {
      td.parentNode.style.background = "#aac0de"; // doesn't work
    }
  }

Maybe I am using this renderer wrong, as it is the first time I am creating a custom one, but how can I get the index of the row based on the cell value?

I hope I am clear, if not, let me know and I will give you more specific details.

Thank you so much!

#2

Hi @vitorialipan

This requirement can be done with custom renderer, but the logic would be a little bit more complex. You would need to loop through all the columns and assign a custom class name to each cell.

Currently this is the only way to check for the value condition and based on that change the whole row color.

Here’s an example: https://jsfiddle.net/handsoncode/d38ou0bt/

#3

Hello,

Oh, cool, this is actually the way I am doing it now, using classes, but I wanted to check if maybe there’s a better way.

For this particular case, I will keep the classes, then :slight_smile:

Thank you so much for your reply!
You can close this topic.

Have a great day!

#4

Hi @vitorialipan

Thank you for the quick update! If you have any other question, feel free to create a new topic.

#5