Set style in angular

Tags: #<Tag:0x00007f8b19c2ab18>
#1

I need to set arbitrary colors to individual cells (i use angular):

var s = this.hot.getSelected() as any;
for (var i = s[0][0]; i <= s[0][2]; i++) {
  for (var j = s[0][1]; j <= s[0][3]; j++) {
    var cell = this.hot.getCell(i, j);
     cell.style.background = e.color.hex;
    }
  }

this works, but only till the render function is executed.
Then the style is gone.
I can’t use classes because I need to set arbritrary colors to selected cells.

#2

I could add a hook “afterRender” and then reapply all styles but there should be an easier option/more performant option?

#3

Hey @daniel.z

When do you add the following piece of code? (What event has to occur)

#4

user selects cells and then a color chooser component in my application. no event

#5

Thank you for the additional details. So the event is a cell selection in this case - and we should use the afterSelectionEnd() hook in Handsontable to get the cell coordinates, on that you can apply the background color.

When it comes to Handsontable rendering cycle, each time a user scrolls and new cells has to appear in the DOM tree or they alter values (edit, paste, autofill, sort, etc.) the table has to call the renderer to repaint the view. Once you set up style.background of getCell() it is not saved and with a new renderer the background color is erased. To set up a permanent metadata that won’t be erased after renderer yo should you setCellMeta(). However, the style is not a possible option here.

Possible options? You can attach className and create it on the fly with your component’s background color or attach custom cell metadata via setCellMeta() and use a custom cell renderer. Here https://jsfiddle.net/handsoncode/tb7rw0xk/ you can check how to set and use custom cell metadata.

#6

ok thanks. what would be the most efficient way on many different styles and cells?

#7

Do you plan to keep that background permanent for the user (for example, they select a cell or two and they will have them selected when they login to the app two days after) or that’s only for a single session for the user and can be erased by some other action (for example, selection background is erased when you load new data for the users)? Also… do you plan to connect any other logic to the cell that contains the background colored?

#8

the style data will be saved and can be overwritten as in excel. I think the meta-data solution with custom cell render is the fitting solution for me

#9

I’m glad to hear that. I will close the issue as solved. If you have any further questions, please feel free to open a new thread or send a message to support@handsontable.com

#10