Category / Section
How to apply conditional formatting for blank cells in JavaScript Spreadsheet
2 mins read
This knowledge base explains how to apply conditional formatting for blank cells in JavaScript Spreadsheet. You can achieve this requirement by using the cellFormat method and the created event. Apply the cell format for the empty cells by iterating the used range cells in the created event.
[HTML]
<div id="spreadsheet"></div>
[TS]
import { CellModel, getCellAddress, SheetModel, Spreadsheet, UsedRangeModel } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './default-data.json';
let spreadsheet: Spreadsheet = new Spreadsheet({
sheets: [
{
ranges: [{ dataSource: (dataSource as any).defaultData }],
columns: [
{ width: 180 },
{ width: 130 },
{ width: 130 },
{ width: 180 },
{ width: 130 },
{ width: 120 },
],
},
],
created: (): void => {
let sheet: SheetModel = spreadsheet.getActiveSheet();
let range: UsedRangeModel = sheet.usedRange;
for (let i: number = 0; i <= range.rowIndex; i++) {
let cells: CellModel[] = sheet.rows[i].cells;
for (let j: number = 0; j <= range.colIndex; j++) {
//Check whether the cell contains value.
if (!cells[j].value) {
let address: string = getCellAddress(i, j);
//Apply formatting to the blank cells using cell formatting
spreadsheet.cellFormat(
{
fontWeight: 'bold',
fontSize: '12pt',
backgroundColor: '#279377',
color: '#ffffff',
},
address
);
}
}
}
},
});
spreadsheet.appendTo('#spreadsheet');
Sample Link:
https://stackblitz.com/edit/rmxbjh?file=index.ts
Output:
Documentation link:
https://ej2.syncfusion.com/documentation/spreadsheet/formatting
Demo link:
https://ej2.syncfusion.com/demos/#/material3/spreadsheet/cell-formatting.html
Didn't find an answer?
Contact Support