How to customize the cell style based on the condition in the Angular Grid?
Customize the Cell style
You can apply cell style dynamically (conditionally) based on the data source value using Grid’s queryCellInfo event.In the below code example, cells are styled (text color) based on OrderID column value in queryCellInfo event by setting cell.style property.
App.component.ts
import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' [allowPaging]="true" [pageSettings]='pageSettings' (queryCellInfo)="queryCellInfo($event)">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
</e-columns>
</ejs-grid>`,
})
export class AppComponent {
public data: Object[] = [];
ngOnInit(): void {
this.data = orderDetails;
}
queryCellInfo(args: any): void {
if (args.column.field == 'OrderID') {
if (args.data.OrderID % 2 == 0) {
//based on condition we have set the font color to the cell
args.cell.style.color = 'red';
} else {
args.cell.style.color = 'blue';
}
}
}
}
Conclusion
I hope you enjoyed learning on how to customize the cell style based on the condition in Angular Grid.
You can refer to our Angular Grid feature tour page to know
about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration
specifications. You can also explore our React Grid Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any
queries or require clarifications, please let us know in the comments section
below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
