How to change Column Header Font size , Color, Background color in Syncfusion EJ2 Tree-grid on click event?

Question

How to change Column Header Font size , Color, Background color in Syncfusion EJ2 Tree-grid on click event ?

Answer 1

HTML:

    <button (click)="Onclick()"></button>
    <ejs-treegrid>
    <e-column field='Name' [customAttributes]="{class: 'playernamecss'}"> 
    </e-column>
    <ejs-treegrid>

Typescript / JS:

    var r:document.querySelector(':root');
    Onclick(){
    this.r.style.setProperty('--NameBGcolor','black');         
      }

CSS:

    :root{
           --NameBGcolor:white;
         }
    .e-treegrid .playernamecss{
            background-color : var(--NameBGcolor);
                          }

*Same Applies for font-color;Size;width..ect...It worked for me, Hope it works for you too, thanks:)