Row color

Getting help Questions
1

I need to highlight or color certain rows (entire row) based on a value of certain column. can you guide me how, or sample code would be appreciated. thanks

2

Hi @tschoi7

you can use the cells method to accomplish this goal. You just determine row and/or column indexes and you can add a getDataAtCell method to check the value.

3

Thanks for the answer. that worked. but coloring gets broken when I sort by a column

this is my method, any idea what I should do?

                  cells: function (row, col, prop) {
                      var cellProperties = {};
                      if (this.instance.getDataAtCell(row, 4).indexOf('- total')>-1) {
                            cellProperties.renderer = SubTotalRowRenderer; 
                      }
                      return cellProperties;
                  },
4

Hi @tschoi7

Here is an updated demo http://jsfiddle.net/handsoncode/zjws8pek/

I have changed row to hot.toVisualRow(row) as the cells method uses psychical indexes and we need the visual index if we move values between rows.

ps. if you wish only to change CSS for the cell you shouldn’t use renderers (they will lower the performance of your app if you have a larger dataset). I recommend using classes

cellProperties.className = 'myClass';

5

thanks, that worked. but that gets broken when I move columns,

hot.getDataAtCell(hot1.toVisualRow(row), 0)

lets say I moved the column0 to all the way to the right,
how do i still use the value of the the column that I moved?

and another question is… when I move/switch/reorder columns , and some columns’s value become blank/empty for entire rows… can you please guide me how I can prevent this from happening?

Thanks

6

Hi @tschoi7

Can you share a step-by-step scenario for this demo http://jsfiddle.net/handsoncode/wy8srq5w/to replicate the issue?

While I am moving columns and sorting the values are still correctly highlighted.

7

I assume that the issue is closed as there is no reply for more than 3 weeks.