Background color change for stacked headers and calculated columns in Angular Grid

[Ameet]

Couple of things that I am trying to get to work -

1. We have stacked headers like -

I want Testing cell background to be in blue color. The 14-16 background color to be yellow and 15 -17 to be green. There are around 150 columns and they are grouped with stacked headers. So some group headers we might have to change color based on some formulas.

2. How do I have calculated column. The Total Prod + Total Orig. Since these columns are added dynamically from the backend.

Basically all the columns are coming from the database so I cannot set the columns in the HTML.

So all the columns are going to be dynamically the formula for calculated columns are also stored in the database.

Thanks,

Ameet

[Hariharan J V]

Hi Ameet, 

Thanks for contacting Syncfusion support. 

Query 1 : Change background of stacked headers 

We suggest you to use the “created” event of Grid and set the background color for the particular stacked header. Please refer the code example below, 

[html] 

 

    <ejs-grid #Grid [dataSource]="data" allowPaging='true' (created)=created($event)> 

        <e-columns> 

            <e-column headerText='Testing' width='120' textAlign="Center" [columns]='stackedHeader'></e-column> 

        </e-columns> 

    </ejs-grid> 

 

[ts] 

 

    created(args:any){ 

        //Here you will be getting all the stacked header elements 

        let stacked:any =this.Grid.getHeaderContent().getElementsByClassName("e-stackedheadercelldiv"); 

        for (let i=0;i<stacked.length;i++){ 

          let stacktext:any = stacked[i].innerHTML; 

          //Set the background for the stacked headers based on the header text 

          if(stacktext == this.Grid.columns[0].headerText){ 

              stacked[i].parentNode.style.backgroundColor = "blue" 

          } 

          if(stacktext == this.Grid.columns[0].columns[0].headerText){ 

              stacked[i].parentNode.style.backgroundColor = "yellow" 

          } 

          if(stacktext == this.Grid.columns[0].columns[1].headerText){ 

              stacked[i].parentNode.style.backgroundColor = "green" 

          } 

      } 

    } 

 

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#created 

 

Query 2 : How do I have calculated column. 

We suggest you to use the “ValueAccessor” feature of Grid. In the value accessor function we can customize to display the value for a particular column in Grid.  

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/columns.html#valueaccessor 

Please refer the code example below, 

[ts] 

 

    public valueAccess(field: string, data: Object, column: Object): string { 

        return data['OrderID'] + data['Freight'];  //We have added two columns and result will be displayed in “ShipCountry” 

    } 

    public ngOnInit(): void { 

        ... 

        this.shipColumns = [ 

            ... 

            { 

                field: 'ShipCountry', 

                headerText: 'Ship Country', 

                width: 150, 

                valueAccessor: this.valueAccess 

            } 

          ]; 

    } 

 

We have also prepared a sample for your convenience. Please refer the link below, 

Sample : https://stackblitz.com/edit/angular-yfhejb-bnj8pn?file=stackedheader.component.ts 

 

Please get back to us if you need further assistance. 

Regards, 

Hariharan