javascript - CSS applied on Handsontable grid row on Scroll is not working properly -

i using handsontable 0.11.4 grid rows on load have yellow background, on click of icon in row there logic remove yellow background , works perfectly.

if click on 2 rows sets rows white, should. when scroll down white rows scroll it. when scroll returns selected row

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

steps reproduce -

1)click on icon in row 1,2 etc. become white 2)scroll down

every 1,2 etc row after scroll having white background now(seems handsontable using index behind scenes on scroll). there way fix it?

any appreciated.

this unfortunately expected behavior , here why. seeing 2 of features handsontable offers: virtual rendering , stateless html.

virtual rendering

this feature used extensively achieve fast table rendering when data contains thousands of rows. instead of rendering entire table dom, renders can see plus few more rows. scroll, renders rolling window. leads second point stateless dom.

stateless dom

handonstable adopts idea of keeping dom contains minimal information , reflection of data objects. end, renders often. so, opposed messing dom elements to, say, move row position 1 position 2, swaps these 2 rows in data objects , re-renders itself.

what means changes make table using css or js wiped when table re-rendered. happens when scroll since virtual renderer have re-render new section of table.

solution

of course there many ways achieve desired result , here common:

to disposition customrenderers. these functions can applied individual cells or columns through columns or cells options upon initialization. here example on 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 see if applied renderer cells, render them text, , give them of css rules.

in case, have click event add [row,col] coordinates using hotinstance.getselected() array, let's call clickedcells. in custom renderer, have conditional says if row , column in clickedcells, render whatever css want.

that should it!