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"
}
}
}
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.
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,
Please get back to us if you need further assistance.
Regards,
Hariharan
