Suspend and Resume UI Refresh in ASP.NET Core Spreadsheet

24 Jul 202611 minutes to read

The Spreadsheet refreshes its UI after each public method call, such as updating a cell, applying formatting, or inserting rows. Immediate rendering works well for a few actions but can cause performance issues when many operations are performed in sequence.

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 performing several operations 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

This feature is generally not required for a few simple operations.

How to use

Use the following methods:

suspendRefresh — Pauses UI refresh while allowing the required Spreadsheet operations to run.
resumeRefresh — Resumes UI refresh and renders the pending visual changes.

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

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

Always pair each suspendRefresh call with a corresponding resumeRefresh call. If resumeRefresh is not called, the pending UI changes may not be rendered.

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

CSHTML
BatchUpdate.cs
<ejs-spreadsheet id="spreadsheet" created="created" allowOpen="true" allowSave="true" openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open" saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save">
	<e-spreadsheet-sheets>
		<e-spreadsheet-sheet name="Project Budget">
			<e-spreadsheet-ranges>
				<e-spreadsheet-range dataSource="ViewBag.DefaultData" startCell="A1"></e-spreadsheet-range>
			</e-spreadsheet-ranges>
			<e-spreadsheet-columns>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
				<e-spreadsheet-column></e-spreadsheet-column>
			</e-spreadsheet-columns>
		</e-spreadsheet-sheet>
	</e-spreadsheet-sheets>
</ejs-spreadsheet>

<script>
	function created() {
		this.suspendRefresh();
		this.insertRow(0, 0);
		this.updateCell({ value: 'Project Budget Tracker - Q2 2026' }, 'A1');
		this.merge('A1:K1');
		this.updateCell({ value: 'Reference' }, 'K2');
		this.updateCell({ value: 'Total Budget' }, 'A13');
		this.updateCell({ formula: '=SUM(F3:F12)' }, 'F13');
		this.updateCell({ formula: '=SUM(G3:G12)' }, 'G13');
		this.updateCell({ formula: '=SUM(H3:H12)' }, 'H13');
		this.addHyperlink('https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/overview', 'K3:K12', 'Open Guide');
		this.cellFormat({ fontWeight: 'bold', fontSize: '14pt', textAlign: 'center', verticalAlign: 'middle', backgroundColor: '#4472C4', color: '#FFFFFF' }, 'A1:K1');
		this.cellFormat({ fontWeight: 'bold', textAlign: 'center', backgroundColor: '#EAEAEA' }, 'A2:K2');
		this.numberFormat('$#,##0.00', 'F3:H13');
		this.addDataValidation({ type: 'WholeNumber', operator: 'Between', value1: '1', value2: '5', isHighlighted: true }, 'J3:J12');
		this.wrap('A3:A12', true);
		this.setBorder({ border: '1px solid #C8C8C8' }, 'A2:K13', 'Outer');
		this.setRowHeight(50, 0);
		this.setRowsHeight(30, ['1:13']);
		this.setColWidth(220, 0);
		this.setColumnsWidth(90, ['B:K']);
		this.resumeRefresh();
	}
</script>
public IActionResult Index()
{
    List<object> defaultData = new List<object>()
    {
        new { ProjectName = "Website Redesign", Manager = "Anita", Department = "Marketing", StartDate = "04/01/2026", EndDate = "06/20/2026", Budget = 25000, Spent = 18000, Variance = 7000, Status = "In Progress", Priority = 2 },
        new { ProjectName = "Mobile App Upgrade", Manager = "David", Department = "Engineering", StartDate = "04/05/2026", EndDate = "07/15/2026", Budget = 42000, Spent = 26500, Variance = 15500, Status = "In Progress", Priority = 1 },
        new { ProjectName = "CRM Migration", Manager = "Priya", Department = "Sales", StartDate = "03/18/2026", EndDate = "08/10/2026", Budget = 38000, Spent = 31000, Variance = 7000, Status = "On Hold", Priority = 2 },
        new { ProjectName = "HR Portal Refresh", Manager = "Kumar", Department = "HR", StartDate = "04/12/2026", EndDate = "05/30/2026", Budget = 12000, Spent = 9500, Variance = 2500, Status = "Completed", Priority = 3 },
        new { ProjectName = "Finance Dashboard", Manager = "Meera", Department = "Finance", StartDate = "05/01/2026", EndDate = "07/28/2026", Budget = 30000, Spent = 14250, Variance = 15750, Status = "In Progress", Priority = 1 },
        new { ProjectName = "Vendor Portal Integration", Manager = "John", Department = "Procurement", StartDate = "04/22/2026", EndDate = "08/05/2026", Budget = 27000, Spent = 11000, Variance = 16000, Status = "Not Started", Priority = 4 },
        new { ProjectName = "Security Audit Remediation", Manager = "Sara", Department = "IT", StartDate = "03/25/2026", EndDate = "06/18/2026", Budget = 16000, Spent = 13200, Variance = 2800, Status = "In Progress", Priority = 1 },
        new { ProjectName = "Customer Support Automation", Manager = "Rahul", Department = "Support", StartDate = "04/08/2026", EndDate = "07/01/2026", Budget = 21000, Spent = 8000, Variance = 13000, Status = "In Progress", Priority = 2 },
        new { ProjectName = "Inventory Sync Improvement", Manager = "Latha", Department = "Operations", StartDate = "05/10/2026", EndDate = "08/22/2026", Budget = 19500, Spent = 6200, Variance = 13300, Status = "Not Started", Priority = 3 },
        new { ProjectName = "Analytics Reporting Pack", Manager = "Arun", Department = "Business Intelligence", StartDate = "04/15/2026", EndDate = "06/30/2026", Budget = 17500, Spent = 12400, Variance = 5100, Status = "Completed", Priority = 2 }
    };
    ViewBag.DefaultData = defaultData;
    return View();
}

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.

Search docs

Ask Syncfusion AI Assistant