Cells hook is only ran once after updating handsontable

Tags: #<Tag:0x00007efc6a32c3d8> #<Tag:0x00007efc6a32c180>

Hi, after updating the Handsontable version to 12.3.1, the cells hook is only ran once on cell render (specifically when the cell is scrolled into view to be rendered) and the correct styling is applied. Then when I scroll down to render further cells, the styling on previously rendered cells disappears completely.

I tried console logging the cells hook and noticed that on ~v9, the cells hook is ran multiple times and that is where the styling is done to the ‘td’ of the cell. Because it is ran multiple times, the styling always gets rendered to the cells that come into view.

However, in the later version, no matter how much I scroll, the cells hook is only ran once per cell render and the styling disappears when trying to render new cells after scrolling. Because the cells hook is only ran once, the styling never gets re-applied to the cells that it disappeared from.

Here is how I am applying the style:
this.hot.updateSettings({
cells: (physicalRowIndex, physicalColIndex, prop) {
const cell = physicalRowIndex <= 0 ? null : this.hot.getCell(physicalRowIndex, physicalColIndex);
if (cell) cell.style.backgroundColor = ‘rgb(0,34,51)’;
}

Also to note, I have tried this with classNames as well. Is there an alternative way to do this or to make the cells hook run multiple times upon scrolling like it did in the previous version? This is creating a blocker for us updating Handsontable.

Here are the options the Handsontable is initialized with
const options = {
autoColumnSize: true,
columnHeaderHeight: 30,
rowHeights: 30,
undo: false,
autoWrapCol: false,
autoWrapRow: false,
enterBeginsEditing: false,
};

Hi @sagar.patel

The current, suggested way do this looks like in this example: https://jsfiddle.net/aszymanski/eupv6104/

Let me know if that meets your requirement.

Thank you, that works but doesn’t this require the css to be predefined before runtime though? I am looking for a way that involves the user to change the color of the cells as well. Is that possible using classNames?

Hi @sagar.patel

I’m not entirely sure how your functionality would work, but do you mean something, more or less, like in this example?

https://jsfiddle.net/handsoncode/u8avd245

Hi, that solution still requires defining the handsontable css colors (specifically orange and green). In my case, the user is able to select any rgb value or hexadecimal value. Because of this, I am setting the color this way cell.style.backgroundColor = rgbValue. I don’t think this can be done with classNames as the class names. Is there a way to dynamically set the color of the cell no matter what rgb or hex value it is?

Hi @sagar.patel

Yes, this solution requires using a className. However, there is a workaround that will allow you to dynamically create CSS classes. It should work fine in your case.

How would that solution be integrated with handsontable? I see that it is manually changing the style of the div element but what would be the element for specifically the handsontable cell? I’m not sure if this solution would work with handsontable.

The cell object would be the same as in this example: https://jsfiddle.net/aszymanski/eupv6104/ Which is represented by cellProperties, and the CSS class that you would make dynamically should be attached to this object.

I tried using cellProperties in this solution https://jsfiddle.net/vc4fu9x0/1/ but it doesn’t seem like the style is being applied. When checking in the console, it seems that the cssClass2 background-color is being overridden by I think htDimmed.

Is there something I am missing in the solution?

I implemented the solution in my application and I am receiving the same result - the cssClass2 background-color attribute is being overriden by htDimmed. If I disable the htDimmed background-color attribute in the console, the styling appears but the original problem I described comes up where on scroll, the styling disappears.

image

Hi @sagar.patel

To make it work you have to add !important in the CSS property: https://jsfiddle.net/aszymanski/tzm62x0b/

Thank you, that worked but the original problem of the scrolling issue comes up in my case where the styling disappears on vertical scroll.

I can’t see that in the example from you that I modified in my previous message. Can you show the example with the current implementation where it’s happening?

Hi @sagar.patel

I hope that the lack of reply for more than three weeks means that the issue is solved. However if you still need any help please open a new thread here on forum or send us an email at support@handsontable.com