Suspend and Resume UI Refresh in Angular Spreadsheet

8 Jun 20267 minutes to read

The Spreadsheet refreshes its UI after each operation performed through public methods, such as updating a cell, applying formatting, or inserting rows. This immediate rendering works well for a few actions, but it can lead to performance issues when many operations are executed one after another.

The suspend and resume refresh feature lets you temporarily pause UI rendering, perform multiple operations, and then refresh the UI only once at the end. This helps reduce unnecessary re-rendering and improves the overall performance of bulk updates.

This is especially useful when the Spreadsheet is updated programmatically during initialization, data processing, or large-scale scenarios.

When to use

Use this feature when you need to perform several actions in sequence, such as:

  • Updating many cells at once
  • Applying formatting to a large range
  • Inserting or deleting multiple rows or columns
  • Running repeated operations inside a loop
  • Working with large datasets

For a few operations, this feature is usually not required.

How to use

Use the following methods:

  • suspendRefresh — pauses UI rendering
  • resumeRefresh — applies all pending visual updates

Step 1: Suspend UI refresh

Call suspendRefresh before starting multiple Spreadsheet operations.

Step 2: Perform the required operations

Execute the actions you want to apply. The Spreadsheet model is updated, but the UI is not refreshed after each call.

Step 3: Resume UI refresh

Call resumeRefresh after all operations are complete. The Spreadsheet then renders all accumulated changes in a single refresh.

Example pattern

let spreadsheet;

function onCreated() {
    spreadsheet.suspendRefresh();
    spreadsheet.updateCell({ value: 'Total' }, 'A1');
    spreadsheet.updateCell({ value: '1200' }, 'B1');
    spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A1:B1');
    spreadsheet.numberFormat('$#,##0.00', 'B1');
    spreadsheet.setRowsHeight(28, 0);
    spreadsheet.resumeRefresh();
};

API reference

suspendRefresh

Suspends visual updates in the Spreadsheet.

Behavior:

  • Prevents the UI from refreshing after each operation
  • Allows multiple actions to be grouped together
  • Keeps internal model updates running
  • Must be paired with resumeRefresh

resumeRefresh

Resumes visual updates and applies all pending changes.

Behavior:

  • Applies all operations performed after suspendRefresh
  • Refreshes the Spreadsheet UI once
  • Improves rendering efficiency for bulk operations

Code example

import { Component, ViewChild } from '@angular/core';
import { SpreadsheetAllModule, SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
import { enableRipple } from '@syncfusion/ej2-base';

import { defaultData } from './datasource';

enableRipple(true);

@Component({
  imports: [SpreadsheetAllModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-spreadsheet #spreadsheet (created)="created()" [allowOpen]="true" [allowSave]="true"
  [openUrl]="openUrl" [saveUrl]="saveUrl">
    <e-sheets>
      <e-sheet name="Project Budget">
        <e-ranges>
          <e-range [dataSource]="data"></e-range>
        </e-ranges>
        <e-columns>
          <e-column></e-column>
          <e-column></e-column>
          <e-column></e-column>
          <e-column></e-column>
          <e-column></e-column>
          <e-column></e-column>
          <e-column></e-column>
          <e-column></e-column>
          <e-column></e-column>
          <e-column></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>`
})
export class AppComponent {
  @ViewChild('spreadsheet')
  public spreadsheetObj?: SpreadsheetComponent;

  public data: object[] = defaultData;
  public openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
  public saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';

  public created(): void {
    if (!this.spreadsheetObj) {
      return;
    }

    this.spreadsheetObj.suspendRefresh();
    this.spreadsheetObj.insertRow(0, 0);
    this.spreadsheetObj.updateCell({ value: 'Project Budget Tracker - Q2 2026' }, 'A1');
    this.spreadsheetObj.merge('A1:K1');
    this.spreadsheetObj.updateCell({ value: 'Reference' }, 'K2');
    this.spreadsheetObj.updateCell({ value: 'Total Budget' }, 'A13');
    this.spreadsheetObj.updateCell({ formula: '=SUM(F3:F12)' }, 'F13');
    this.spreadsheetObj.updateCell({ formula: '=SUM(G3:G12)' }, 'G13');
    this.spreadsheetObj.updateCell({ formula: '=SUM(H3:H12)' }, 'H13');
    this.spreadsheetObj.addHyperlink('https://help.syncfusion.com/document-processing/excel/spreadsheet/react/overview', 'K3:K12', 'Open Guide');
    this.spreadsheetObj.cellFormat({ fontWeight: 'bold', fontSize: '14pt', textAlign: 'center', verticalAlign: 'middle', backgroundColor: '#4472C4', color: '#FFFFFF' }, 'A1:K1');
    this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', backgroundColor: '#EAEAEA' }, 'A2:K2');
    this.spreadsheetObj.numberFormat('$#,##0.00', 'F3:H13');
    this.spreadsheetObj.addDataValidation({ type: 'WholeNumber', operator: 'Between', value1: '1', value2: '5', isHighlighted: true }, 'J3:J12');
    this.spreadsheetObj.wrap('A3:A12', true);
    this.spreadsheetObj.setBorder({ border: '1px solid #C8C8C8' }, 'A2:K13', 'Outer');
    this.spreadsheetObj.setRowHeight(50, 0);
    this.spreadsheetObj.setRowsHeight(30, ['1:13']);
    this.spreadsheetObj.setColWidth(220, 0);
    this.spreadsheetObj.setColumnsWidth(90, ['B:K']);
    this.spreadsheetObj.resumeRefresh();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Supported operations

The following types of operations can be performed between suspendRefresh and resumeRefresh:

  • Cell operations: updateCell, autoFill, clear
  • Row and column operations: insertRow, insertColumn, hideRow, hideColumn, setRowsHeight, setRowHeight, setColWidth, setColumnsWidth, autoFit
  • Formatting: cellFormat, numberFormat, wrap, setBorder
  • Merge operations: merge, unMerge
  • Hyperlinks: addHyperlink, removeHyperlink
  • Data validation: addDataValidation, removeDataValidation, addInvalidHighlight, removeInvalidHighlight
  • Conditional formatting: conditionalFormat, clearConditionalFormat
  • Sheet operations: insertSheet, duplicateSheet, moveSheet, delete
  • Protection: protectSheet, unProtectSheet
  • Freeze panes: freezePanes, unfreezePanes
  • Clipboard operations: cut, copy, paste
  • Editing and navigation: find, replace, selectRange, goTo
  • Charts: insertChart, deleteChart
  • Images: insertImage, deleteImage
  • Filtering: applyFilter, clearFilter
  • Other actions: sort, calculateNow, addDefinedName, updateRange

Notes

  • Use suspend and resume UI refresh when multiple operations are executed together.
  • Avoid using it for few or simple operations.
  • Useful during initialization and large data updates.
  • Data and model changes are processed during the suspended state; only visual refresh is delayed.

See Also