How to change the background of all rows in a column after the user changes the content of a cell?

Tags: #<Tag:0x00007efc6c97d9d8> #<Tag:0x00007efc6c97d460>
#1

I am triggering a function on a given change of a cell. This function searches for information in the database, and depending on the return, I need to change the background color of all cells in a given column. None of my attempts worked.

#2

Hi @jonatas.locateli

Thank you for contacting us. Can you please share your current implementation in a form of a code demo in chosen sandbox?

#3

Hi, @adrian.szymanski,

This function is invoked in the method “afterChange”:

async function calculateWeeks(){

var weekTable = await retWeeks('');
var weeksCapProg = await searchCapProg();

for(var i=0;i<weekTable.length;i++){
	
	var week = weekTable[i];
	
	var hours = weeksCapProg.filter(op=>op.CODWEEK==week);
	
	var column = i+22;
	var rows = program.hot.countRows();
	
	if(hours .length>0){
		
	   for(var k = 0; k < rows; k++){
	    	
            /* Here is the function to change the background color of a cell */
	    	program.hot.setCellMeta(k, column, 'className', 'bgRed');

	    }
	
	}
		
}

program.hot.render();

}

This is CSS style of the class:

.handsontable .bgRed{
background: #CD5C5C;
}

#4

Hi @jonatas.locateli

I am not able to reproduce the issue with the code you provided. Please, modify this example so it will be replicable: https://jsfiddle.net/handsoncode/6aecmhtd/

#5

@adrian.szymanski, I won’t be able to reproduce all the code as the volume of data is large and comes from an external source. But what would be the correct method or the best way to change the background of all rows in a column?

#6

@jonatas.locateli I understand. So, generally speaking we usually recommend using setCellMeta in a loop to do this. I would recommend to use beforeChange hook in this case instead.

Here’s an example of such implementation: https://jsfiddle.net/handsoncode/qosn5L9h/

#7

Thankyou, @adrian.szymanski.

I changed the method to the “before Change”, but it’s still not working. I tried to change a single row and column, as in the example below, and it still didn’t work.

this.hot = new Handsontable(container, {
data: dados,
columns: colunas,
beforeChange: async (changes) => {
changes.forEach(async (change) => {
const [row, column, oldValue, newValue] = change;

  			this.hot.setCellMeta(1, 4, 'className', 'red');
  			this.hot.render();
  		    	
  		    });
  	  },       .....
#8

Hi @jonatas.locateli

Do you get any errors in the dev console, or it’s just not doing anything?

#9

Hi, @adrian.szymanski

No erros in the dev console, it’s just not doing anything.

#10

Hi @jonatas.locateli

I won’t be able to suggest anything else without seeing your actual implementation. The issue must lie somewhere else, as the solution I showed you is pretty straightforward, and should work anywhere.

#11