How to customize the row style based on the condition in Angular Data Grid?
This article explains how to customize the row style based on the condition in Angular Data Grid.
Customize the Grid row conditionally
You can apply row style dynamically (conditionally) based on the data source value using Grid’s rowDataBound event.
In the below code example, rows are styled (text color) based on Freight column value in rowDataBound event by adding css class to row.ClassList.
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' (rowDataBound)="rowDataBound($event)">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=90 ></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column field='CustomerName' headerText='Customer Name' textAlign='Right' width=90></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=90></e-column>
</e-columns>
</ejs-grid>`,
styleUrls: ['app.component.css'],
})
export class AppComponent {
public data: Object[] = [];
ngOnInit(): void {
this.data = orderDetails;
}
rowDataBound(args: any): void {
if (args.row) {
if (args.data.Freight < 30) {
args.row.classList.add('below-30');
} else if (args.data.Freight < 80) {
args.row.classList.add('below-80');
} else {
args.row.classList.add('above-80');
}
}
}
}
App.component.css
/* css */
.e-grid .e-row.below-30 .e-rowcell{
color: red;
}
.e-grid .e-row.below-80 .e-rowcell{
color:green;
}
.e-grid .e-row.above-80 .e-rowcell{
color:rgb(18, 6, 134);
}
