How to change text color of cells dynamically with Angular12 and Handsontable12

Tags: #<Tag:0x00007f8b1adb1d78>
#1

Hi,

I am using Handsontable 12 in my Angular12 project.

I have a list as below :
resultList =
[
{name=‘A1’, surname=‘B1’, percentage=20, result=‘Fail’},
{name=‘A2’, surname='B2, percentage=90, result=‘Pass’},
{name=‘A3’, surname=‘B3’, percentage=30, result=‘Fail’}
]
If result is ‘Fail’, I want to display name (column) in ‘Red’ color(Eg: for A1 and A3)
Can anyone help with this ?

I also tried below code (Not working) :
customStylesRenderer(instance:any, td:any, row:any, col:any, prop:any, value:any, cellProperties:any) {
Handsontable.renderers.TextRenderer.apply(this,value)
for(var obj of this.resultList){
if(obj.name==value && obj.result==‘Fail’)
{
td.style.fontWeight = ‘bold’;
td.style.color = ‘red’;
}
}
}
Handsontable.renderers.registerRenderer(‘customStylesRenderer’, customStylesRenderer); //getting error at this row

hotSettings: Handsontable.GridSettings = {
data: this.resultList,
height: ‘380px’,
cells(row: any,col: any){
const cellProperties:any = {};
cellProperties.renderer = ‘customStylesRenderer’ // Also getting error at this
return cellProperties;
},
licenseKey: ‘non-commercial-and-evaluation’
};

image

#2

Hi @sam

I recommend using the afterValidate() hook to run updateSettings( colHeaders: new_columns_headers_with_css_class).

#3

Hi @aleksandra_budnik will that help to change cell text color dynamically depending on variable value from list ?

Could you please share any example for the same in Angular 12 ?

Thanks.

#4

I do not see any similar example in our base of demos https://handsontable.com/docs/examples/. But yes, I can confirm that based on that new_columns_headers_with_css_class you will be able to attach a className according to your needs. The afterValidate() hook return the value of the cell so based on that you can attach a defined className with a different color.

#5

Hi @aleksandra_budnik
I am trying to find how to use afterValidate() hook in Angular, but it is difficult to implement as there is no example for the same in docs.

However can you please tell how can I convert the code from below link into Angular compliant code ? (I tried adding the same code but getting error at multiple lines)

http://jsfiddle.net/Le25ogc5/

#6

Here https://jsfiddle.net/u61m0cs4/ I have an example with a cell renderer in React. If that won’t be enough - let me know.

#7

Hey @aleksandra_budnik

I have found a solution for my query. Thanks for the help.

1 Like
#8