How to highlight a specific row if any of its cells have an empty value in an Angular Spreadsheet?

This knowledge base article explains you how to highlight a specific row if any of its cells have an empty value in an Angular Spreadsheet.

On the created event, it iterated within the used range and returned the address where the cells were empty. Invoked a user-defined function and highlighted the rows containing empty cells. Check for an empty value on the row during the cellSave event; if not, remove the color from the highlighted row using the cellFormat method.

[app.component.html]

<div class="control-section">
  <ejs-spreadsheet #default= (created)="created()" (cellsave)="cellSave($event)">
      <e-sheets>
          <e-sheet name="Car Sales Report">
              <e-ranges>
                  <e-range [datasource]="data"></e-range>
              </e-ranges>
              <e-columns>
                  <e-column [width]="150"></e-column>
                  <e-column [width]="130"></e-column>
                  <e-column [width]="110"></e-column>
                  <e-column [width]="150"></e-column>
              </e-columns>
          </e-sheet>
      </e-sheets>
  </ejs-spreadsheet>
</div>

[app.component.ts]

import { getCellAddress, SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { getDefaultData } from './data';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { CellModel, CellSaveEventArgs, getCell, getColumnHeaderText, SheetModel, UsedRangeModel } from '@syncfusion/ej2-spreadsheet';

@Component({
standalone: true,
imports: [SpreadsheetAllModule],
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
public data: Object[] = getDefaultData();
public addressCollection: string[] = [];
public usedColumnHeader: string = '';
created(): void {
  this.spreadsheetObj.cellFormat(
    { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
    'A1:D1'
  );

  // Logic to apply format based on row value.
  let sheet: SheetModel = this.spreadsheetObj.getActiveSheet();
  let range: UsedRangeModel = sheet.usedRange;
  // Iterate the used range and take empty cell address to highlight the respective row.
  this.usedColumnHeader = getColumnHeaderText(range.colIndex + 1);
  for (let i: number = 0; i <= range.rowIndex; i++) {
    // Fetch the cell model for the respective row.
    let cells: CellModel[] = sheet.rows[i].cells;
    for (let j: number = 0; j &lt;= range.colIndex; j++) {
      if (!cells[j].value) {
        let address: string = getCellAddress(i, j);
        this.addressCollection.push(address);
      }
    }
  }

  // User defined function to highlight the row with reference to row data.
  this.highlightRow();
}

cellSave(args: CellSaveEventArgs): void {
  let sheet: SheetModel = this.spreadsheetObj.getActiveSheet();
  let range: UsedRangeModel = sheet.usedRange;
  let address: string[] = args.address.split('!');
  let cellIndex: string = address[1].slice(1);
  // Checking for column header value
  if (Number(cellIndex) != 1) {
    for (let i: number = 0; i &lt;= range.colIndex; i++) {
      let cell: CellModel = getCell(Number(cellIndex) - 1, i, sheet);
      // Check whether the data is entered is empty.
      if (cell &amp;&amp; !cell.value) {
        this.spreadsheetObj.cellFormat(
          {
            fontWeight: 'bold',
            backgroundColor: '#279377',
            color: '#ffffff',
          },
          'A' + cellIndex + ':' + this.usedColumnHeader + cellIndex
        );
        break;
      } else {
        this.spreadsheetObj.cellFormat(
          {
            fontWeight: 'normal',
            backgroundColor: '#ffffff',
            color: '#000000',
          },
          'A' + cellIndex + ':' + this.usedColumnHeader + cellIndex
        );
      }
    }
  }
}

highlightRow(): void {
  for (let i: number = 0; i &lt; this.addressCollection.length; i++) {
    // Apply format to the fetched address.
    this.spreadsheetObj.cellFormat(
      { fontWeight: 'bold', backgroundColor: '#279377', color: '#ffffff' },
      'A' +
        this.addressCollection[i].slice(1) +
        ':' +
        this.usedColumnHeader +
        this.addressCollection[i].slice(1)
    );
  }
}
}

Sample Link:

https://stackblitz.com/edit/angular-6sjfuf-brpdjv?file=src%2Fapp.component.ts

Output:

For further information about this, see the documentation that follows.

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

Conclusion
I hope you enjoyed learning about how to highlight a specific row if any of its cells have an empty value in an Angular Spreadsheet.

You can refer to our Angular Spreadsheet’s feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our Angular Spreadsheet example to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Spreadsheet and other Angular components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!