在Scroll的Handsontable网格行上应用的CSS无法正常工作

Question

I am using Handsontable 0.11.4 grid where the rows on load have yellow background, on click of icon in row there is a logic to remove yellow background and it works perfectly.

if I click on 2 rows it sets those rows white, as it should. when I scroll down the white rows scroll with it. when you scroll back up it returns to the originally selected row

jsfiddle  - `https://jsfiddle.net/3ukL2yvt/`

Steps to reproduce -

1)Click on icon in row 1,2 etc. It will become white 2)Scroll down

Every 1,2 etc row after scroll is having white background now(seems handsontable is using index behind the scenes on scroll). Is there any way to fix it?

Any help would be really appreciated.

Answer 1

This is unfortunately the expected behavior and here is why. What you are seeing is two of the features Handsontable offers: Virtual Rendering and Stateless HTML.

Virtual Rendering

This feature is used extensively to achieve fast table rendering when your data contains thousands of rows. Instead of rendering the entire table to the DOM, it simply renders what you can see plus a few more rows. As you scroll, it renders this rolling window. This leads to the second point which is a stateless DOM.

Stateless DOM

Handonstable adopts the idea of keeping a DOM which contains minimal information and is just a reflection of its data objects. To this end, it renders fairly often. So, as opposed to messing with the DOM elements to, say, move a row from position 1 to position 2, it simply swaps these two rows in its data objects and re-renders itself.

What this means is that any changes you make to the table using CSS or JS will get wiped when the table is re-rendered. This happens when you scroll since the virtual renderer will eventually have to re-render a new section of your table.

Solution

Of course there are many ways to achieve your desired result and here is the most common:

To your disposition is are customRenderers . These are functions that can be applied to individual cells or columns through the columns or cells options upon initialization. Here is the example on the docs page:

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'green';
    td.style.background = '#CEC';
 }

What you see is that if we applied this renderer to all cells, then it would render them as Text , and give them all of those CSS rules.

In your case, you could have your click event add the [row,col] coordinates by using hotInstance.getSelected() to some array, let's call it clickedCells . Then in your custom renderer, you would have a conditional that says if the row and column are in clickedCells , render with whatever CSS you want.

That should be it!