Articles in this section
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:

Formatting for blank cells.png

Documentation link:

https://ej2.syncfusion.com/documentation/spreadsheet/formatting

Demo link:

https://ej2.syncfusion.com/demos/#/material3/spreadsheet/cell-formatting.html

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied