Get cell style inside afterChange

Tags: #<Tag:0x00007efc5fd5ae00> #<Tag:0x00007efc5fd5acc0>
#1

I have a question:

I need to color the cells/rows of my table and I am using the context menu example for doing that (https://jsfiddle.net/1nt7t429/), except that I have added multiple cell selection so that the user is able to change the color of multiple selected cells at once.

I also am using the afterChange hook and inside it I am sending the changes to the server in a saveChanges(payload) method whose payload looks like this:

        const payload = {
           index: change[0][0],
           property: change[0][1],
           oldValue: change[0][2],
           newValue: change[0][3],
           style:{ //insert style changes here},
        }

Now my question: is there any way that I can “catch” the changes made to the style inside the “afterChange”? Is there any example of getting the changes when we are modifying not only the data, but also the css classes? (In the future, besides the color, I also will be adding classes for font changes, like size or weight)

Basically, if someone can alter the jsfiddle example and show me how to get the classes and the changes of the selected cell/row, I would very much appreciate it, I have been stuck on this for 3 days and I am out of ideas.

If not, is there any other(better) way to do what I’m trying to do?

#2

Hi @vitorialipan

The afterChange hook is only triggered for data change operation. However, as in the demo you use setCellMeta() method to alter the cells’ className you can use

afterSetCellMeta: (row, col, key, value) => {
   console.log(row, col, key, value)
}

updated demo: https://jsfiddle.net/fxkt6pjv/1/

Now if you need a style of that given cell in the payload would this work for you https://jsfiddle.net/fxkt6pjv/3/?

I’m using the getCell() method to get the changed element’s className

  afterChange: function(change, src) {
    	if(change){
      	let cl = this.getCell(change[0][0], change[0][1]).className;
      	const payload = {
           index: change[0][0],
           property: change[0][1],
           oldValue: change[0][2],
           newValue: change[0][3],
           style:{className: cl},
        }
      }
    }
#3

Hi,

Thank you SO much for the quick reply, I did not expect it !!! :slight_smile:

I have found a solution combining your response with a workaround I made by manually calling the saveChanges, but the bad part is that I do this inside a loop for each of the modified rows/cells, so it’s not the best, in my opinion.

I think I am (most) probably complicating things, but I was imagining getting the cell style to be more easy, something like
hot.getCellStyle(row, col) that returns something like “background-color: pink, font-size: 30px” or I don’t know…

I can see why this is not very realistic, but in my scenario*** it’s very heavy, especially if you have a lot of rows & cols (or I haven’t found the right way to do it, which is 10000% a possibility).

Regarding this topic, you can close it, but I have another (somewhat related) question: is there a way I can directly set the background-color using the setCellMeta(), but without using classes? I’m asking because in the future I will have a color picker instead of the predefined list of colours that we see in the example, and right now I don’t know how to handle the multitude of colours.

Thanks again for the quick reply!
:slight_smile:

*** Scenario:

  1. make modifications to the font weight/font style/background color of the selected cells
  2. send each cell style to the server every time it changes by calling saveChanges in afterSetCellMeta
  3. (when opening the page containing the table) get data from server
  4. parse server response and get each cells’ style
  5. apply said style for each and every row and col of the table
#4

The demo has a className as in Handsontable; this is a TD value that stays after we rerender the table. That is why (when I had a similar case as yours with the color picker) I created such a demo https://jsfiddle.net/yobfvLg1/8/ that generates a class name for a cell that is given a color via HTML color picker. I hope that this meets your requirements.

#5

Ohhhhh my goddddddd okay thank you so much!!!
This looks promising :smiley::heart_eyes:

#6

You’re more than welcome @vitorialipan :slight_smile:

Let me know if you need anything more than that.

#7

Right now no, you can close this topic, you have been more than helpful! :slight_smile: Thank you again!

#8

I’m always happy to help.

Feel free to open a new thread when needed.

#9