Home > Angular, DevExpress > DevExpress boolean colums in Angular DataGrid

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