DevExpress boolean colums in Angular DataGrid
2023/03/31
In order to show a Boolean column with a red background for false with X as text, or a green one for true using the symbol ā,
<dx-data-grid #dataGrid
(onCellPrepared)="onCellPreparedLog($event)"
...
<dxi-column dataField="Esit" alignment="center" cellTemplate="boolCell">
</dxi-column>
<div *dxTemplate="let cellData of 'boolCell'">
{{cellData.value ? '\u2713' : 'X'}}
</div>
In .ts
onCellPreparedLog(e: any) {
if (e.rowType === "data" && e.column.dataField === 'Esit') {
if (e.data.Esit) {
e.cellElement.style.backgroundColor = "green";
return;
}
e.cellElement.style.backgroundColor = "red";
}
}
Categories: Angular, DevExpress