From c4b5084abc09a89bf86512ec2ab255e175c35f59 Mon Sep 17 00:00:00 2001 From: bhuvaneshdhakshinmaoorthy Date: Mon, 1 Jun 2026 10:59:07 +0530 Subject: [PATCH 1/2] 1027433: Creation batch ui update for suspend and resume refresh for core, mvc, angular, vue, js, ts --- Document-Processing-toc.html | 6 + .../Spreadsheet/ASP-NET-CORE/batch-update.md | 144 ++++++++++++++++++ .../Spreadsheet/ASP-NET-MVC/batch-update.md | 143 +++++++++++++++++ .../Excel/Spreadsheet/Angular/batch-update.md | 132 ++++++++++++++++ .../Javascript-ES5/batch-update.md | 132 ++++++++++++++++ .../Javascript-ES6/batch-update.md | 132 ++++++++++++++++ .../Excel/Spreadsheet/Vue/batch-update.md | 132 ++++++++++++++++ .../angular/batch-update-cs1/angular.json | 70 +++++++++ .../angular/batch-update-cs1/index.html | 37 +++++ .../angular/batch-update-cs1/src/app.ts | 73 +++++++++ .../batch-update-cs1/src/datasource.ts | 12 ++ .../angular/batch-update-cs1/src/main.ts | 4 + .../angular/batch-update-cs1/src/styles.css | 14 ++ .../angular/batch-update-cs1/tsconfig.json | 32 ++++ .../batch-update-cs1/batchUpdate.cs | 18 +++ .../asp-net-core/batch-update-cs1/razor | 47 ++++++ .../asp-net-core/batch-update-cs1/tagHelper | 47 ++++++ .../batch-update-cs1/batchUpdate.cs | 18 +++ .../asp-net-mvc/batch-update-cs1/razor | 48 ++++++ .../asp-net-mvc/batch-update-cs1/tagHelper | 49 ++++++ .../batch-update-cs1/datasource.ts | 12 ++ .../batch-update-cs1/es5-datasource.js | 12 ++ .../batch-update-cs1/index.html | 38 +++++ .../javascript-es5/batch-update-cs1/index.js | 44 ++++++ .../javascript-es5/batch-update-cs1/index.ts | 50 ++++++ .../batch-update-cs1/styles.css | 19 +++ .../batch-update-cs1/system.config.js | 44 ++++++ .../batch-update-cs1/datasource.ts | 12 ++ .../batch-update-cs1/es5-datasource.js | 12 ++ .../batch-update-cs1/index.html | 43 ++++++ .../javascript-es6/batch-update-cs1/index.js | 43 ++++++ .../javascript-es6/batch-update-cs1/index.ts | 48 ++++++ .../batch-update-cs1/styles.css | 19 +++ .../batch-update-cs1/system.config.js | 44 ++++++ .../vue/batch-update-cs1/app-composition.vue | 73 +++++++++ .../spreadsheet/vue/batch-update-cs1/app.vue | 89 +++++++++++ .../spreadsheet/vue/batch-update-cs1/data.js | 12 ++ .../vue/batch-update-cs1/index.css | 12 ++ .../vue/batch-update-cs1/index.html | 23 +++ .../spreadsheet/vue/batch-update-cs1/index.js | 68 +++++++++ .../vue/batch-update-cs1/systemjs.config.js | 45 ++++++ 41 files changed, 2052 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/batch-update.md create mode 100644 Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/batch-update.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/batch-update.md create mode 100644 Document-Processing/Excel/Spreadsheet/Javascript-ES5/batch-update.md create mode 100644 Document-Processing/Excel/Spreadsheet/Javascript-ES6/batch-update.md create mode 100644 Document-Processing/Excel/Spreadsheet/Vue/batch-update.md create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/angular.json create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/app.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/datasource.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/main.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/styles.css create mode 100644 Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/tsconfig.json create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/batchUpdate.cs create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/razor create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/tagHelper create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/batchUpdate.cs create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/razor create mode 100644 Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/tagHelper create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/datasource.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/es5-datasource.js create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.js create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/styles.css create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/system.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/datasource.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/es5-datasource.js create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.js create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.ts create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/styles.css create mode 100644 Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/system.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/app-composition.vue create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/app.vue create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/data.js create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.css create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.js create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/systemjs.config.js diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index dce0bc7f2c..5759827d87 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5418,6 +5418,7 @@
  • Ribbon
  • Print
  • Performance Best Practices
    • +
  • Batch Update
  • Globalization
  • Accessibility
  • Keyboard Shortcuts
    • @@ -5467,6 +5468,7 @@
  • Ribbon
  • Print
  • Performance Best Practices
    • +
  • Batch Update
  • Globalization
  • Accessibility
  • Keyboard Shortcuts
    • @@ -5520,6 +5522,7 @@
  • Styles and Appearance
  • Print
  • Performance Best Practices
    • +
  • Batch Update
  • Performance Metrics
  • Globalization
  • Accessibility
    • @@ -5712,6 +5715,7 @@
  • Ribbon
  • Print
  • Performance Best Practices
    • +
  • Batch Update
  • Globalization
  • Accessibility
  • Keyboard Shortcuts @@ -5761,6 +5765,7 @@
  • Styles and Appearance
  • Print
  • Performance Best Practices
    • +
  • Batch Update
  • Globalization
  • Accessibility
  • Keyboard Shortcuts
    • @@ -5807,6 +5812,7 @@
  • Styles and Appearance
  • Print
  • Performance Best Practices
    • +
  • Batch Update
  • Performance Metrics
  • Globalization
  • Accessibility
    • diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/batch-update.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/batch-update.md new file mode 100644 index 0000000000..f145734594 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/batch-update.md @@ -0,0 +1,144 @@ +--- +layout: post +title: Batch Update in ASP.NET Core Spreadsheet component | Syncfusion +description: Improve performance in Syncfusion ASP.NET Core Spreadsheet by using suspendRefresh and resumeRefresh to batch multiple updates and avoid repeated rendering. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Batch Update in ASP.NET Core Spreadsheet + +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 **batch update** 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 batch update + +Use batch update 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, batch update is usually not required. + +## How to use batch update + +Batch update is performed with two 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. + +### Pattern for batch update + +```js +let spreadsheet; + +function created() { + 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(); +} +``` + +## 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 + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/batch-update-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="BatchUpdate.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/batch-update-cs1/batchupdate.cs %} +{% endhighlight %} +{% endtabs %} + +## Common operations supported in batch update + +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 batch update only when multiple operations are executed together +- Avoid using it for few, simple actions +- It is most useful for initialization logic and programmatic bulk updates +- Data and model changes are processed during the suspended state; only visual refresh is delayed + +## See Also + +* [Data Binding](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/data-binding) +* [Worksheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/worksheet) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/batch-update.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/batch-update.md new file mode 100644 index 0000000000..9f9ac49635 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/batch-update.md @@ -0,0 +1,143 @@ +--- +layout: post +title: Batch Update in ASP.NET MVC Spreadsheet component | Syncfusion +description: Improve performance in Syncfusion ASP.NET MVC Spreadsheet by using suspendRefresh and resumeRefresh to batch multiple updates and avoid repeated rendering. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Batch Update in ASP.NET MVC Spreadsheet + +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 **batch update** 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 batch update + +Use batch update 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, batch update is usually not required. + +## How to use batch update + +Batch update is performed with two 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. + +### Pattern for batch update + +```js +function created() { + var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet'); + spreadsheetObj.suspendRefresh(); + spreadsheetObj.insertRow(0, 0); + spreadsheetObj.updateCell({ value: 'Project Budget Tracker - Q2 2026' }, 'A1'); + spreadsheetObj.merge('A1:K1'); + spreadsheetObj.updateCell({ value: 'Reference' }, 'K2'); + spreadsheetObj.updateCell({ value: 'Total Budget' }, 'A13'); + spreadsheetObj.updateCell({ formula: '=SUM(F3:F12)' }, 'F13'); + spreadsheetObj.updateCell({ formula: '=SUM(G3:G12)' }, 'G13'); + spreadsheetObj.updateCell({ formula: '=SUM(H3:H12)' }, 'H13'); + spreadsheetObj.addHyperlink('https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/overview', 'K3:K12', 'Open Guide'); + spreadsheetObj.cellFormat({ fontWeight: 'bold', fontSize: '14pt', textAlign: 'center', verticalAlign: 'middle', backgroundColor: '#4472C4', color: '#FFFFFF' }, 'A1:K1'); + spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', backgroundColor: '#EAEAEA' }, 'A2:K2'); + spreadsheetObj.numberFormat('$#,##0.00', 'F3:H13'); + spreadsheetObj.addDataValidation({ type: 'WholeNumber', operator: 'Between', value1: '1', value2: '5', isHighlighted: true }, 'J3:J12'); + spreadsheetObj.wrap('A3:A12', true); + spreadsheetObj.setBorder({ border: '1px solid #C8C8C8' }, 'A2:K13', 'Outer'); + spreadsheetObj.setRowHeight(50, 0); + spreadsheetObj.setRowsHeight(30, ['1:13']); + spreadsheetObj.setColWidth(220, 0); + spreadsheetObj.setColumnsWidth(90, ['B:K']); + spreadsheetObj.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 + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="BatchUpdate.cs" %} +{% include code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/batchUpdate.cs %} +{% endhighlight %} +{% endtabs %} + +## Common operations supported in batch update + +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 batch update only when multiple operations are executed together +- Avoid using it for few, simple actions +- It is most useful for initialization logic and programmatic bulk updates +- Data and model changes are processed during the suspended state; only visual refresh is delayed + +## See Also + +* [Data Binding](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/data-binding) +* [Worksheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/worksheet) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/batch-update.md b/Document-Processing/Excel/Spreadsheet/Angular/batch-update.md new file mode 100644 index 0000000000..c9f72bacd3 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/batch-update.md @@ -0,0 +1,132 @@ +--- +layout: post +title: Batch Update in Angular Spreadsheet component | Syncfusion +description: Improve performance in Syncfusion Angular Spreadsheet by using suspendRefresh and resumeRefresh to batch multiple updates and avoid repeated rendering. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Batch Update in Angular Spreadsheet + +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 **batch update** 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 batch update + +Use batch update 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, batch update is usually not required. + +## How to use batch update + +Batch update is performed with two 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. + +### Pattern for batch update + +```js +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 + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/angular/batch-update-cs1/src/app.ts %} +{% endhighlight %} +{% highlight ts tabtitle="main.ts" %} +{% include code-snippet/spreadsheet/angular/batch-update-cs1/src/main.ts %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/angular/batch-update-cs1" %} + +## Common operations supported in batch update + +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 batch update only when multiple operations are executed together +- Avoid using it for few, simple actions +- It is most useful for initialization logic and programmatic bulk updates +- Data and model changes are processed during the suspended state; only visual refresh is delayed + +## See Also + +* [Data Binding](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/data-binding) +* [Worksheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/worksheet) diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/batch-update.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/batch-update.md new file mode 100644 index 0000000000..1a3e99cbce --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/batch-update.md @@ -0,0 +1,132 @@ +--- +layout: post +title: Batch Update in EJ2 Javascript Spreadsheet control | Syncfusion +description: Improve performance in Syncfusion EJ2 Javascript Spreadsheet by using suspendRefresh and resumeRefresh to batch multiple updates and avoid repeated rendering. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Batch Update in EJ2 Javascript Spreadsheet control + +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 **batch update** 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 batch update + +Use batch update 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, batch update is usually not required. + +## How to use batch update + +Batch update is performed with two 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. + +### Pattern for batch update + +```js +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 + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1" %} + +## Common operations supported in batch update + +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 batch update only when multiple operations are executed together +- Avoid using it for few, simple actions +- It is most useful for initialization logic and programmatic bulk updates +- Data and model changes are processed during the suspended state; only visual refresh is delayed + +## See Also + +* [Data Binding](./data-binding) +* [Worksheet](./worksheet) diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/batch-update.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/batch-update.md new file mode 100644 index 0000000000..e6d313e55c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/batch-update.md @@ -0,0 +1,132 @@ +--- +layout: post +title: Batch Update in EJ2 JavaScript Spreadsheet control | Syncfusion +description: Improve performance in Syncfusion EJ2 JavaScript Spreadsheet by using suspendRefresh and resumeRefresh to batch multiple updates and avoid repeated rendering. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Batch Update in EJ2 JavaScript Spreadsheet control + +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 **batch update** 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 batch update + +Use batch update 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, batch update is usually not required. + +## How to use batch update + +Batch update is performed with two 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. + +### Pattern for batch update + +```js +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 + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1" %} + +## Common operations supported in batch update + +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 batch update only when multiple operations are executed together +- Avoid using it for few, simple actions +- It is most useful for initialization logic and programmatic bulk updates +- Data and model changes are processed during the suspended state; only visual refresh is delayed + +## See Also + +* [Data Binding](./data-binding) +* [Worksheet](./worksheet) diff --git a/Document-Processing/Excel/Spreadsheet/Vue/batch-update.md b/Document-Processing/Excel/Spreadsheet/Vue/batch-update.md new file mode 100644 index 0000000000..2529f9d3b4 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Vue/batch-update.md @@ -0,0 +1,132 @@ +--- +layout: post +title: Batch Update in Vue Spreadsheet component | Syncfusion +description: Improve performance in Syncfusion Vue Spreadsheet by using suspendRefresh and resumeRefresh to batch multiple updates and avoid repeated rendering. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Batch Update in Vue Spreadsheet + +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 **batch update** 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 batch update + +Use batch update 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, batch update is usually not required. + +## How to use batch update + +Batch update is performed with two 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. + +### Pattern for batch update + +```js +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 + +{% tabs %} +{% highlight js tabtitle="app.vue" %} +{% include code-snippet/spreadsheet/vue/batch-update-cs1/app.vue %} +{% endhighlight %} +{% highlight js tabtitle="app-composition.vue" %} +{% include code-snippet/spreadsheet/vue/batch-update-cs1/app-composition.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/vue/batch-update-cs1" %} + +## Common operations supported in batch update + +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 batch update only when multiple operations are executed together +- Avoid using it for few, simple actions +- It is most useful for initialization logic and programmatic bulk updates +- Data and model changes are processed during the suspended state; only visual refresh is delayed + +## See Also + +* [Data Binding](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/data-binding) +* [Worksheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/worksheet) diff --git a/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/angular.json b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/angular.json new file mode 100644 index 0000000000..98b735ee4b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/angular.json @@ -0,0 +1,70 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "syncfusion-component": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist", + "index": "index.html", + "main": "src/main.ts", + "tsConfig": "tsconfig.json", + "styles": [ + "src/styles.css" + ], + "assets": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "syncfusion-component:build:production" + }, + "development": { + "buildTarget": "syncfusion-component:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + }, + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/index.html new file mode 100644 index 0000000000..8b31f405ca --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/index.html @@ -0,0 +1,37 @@ + + + + Syncfusion Angular Spreadsheet + + + + + + + + + +
    LOADING....
    +     + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/app.ts b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/app.ts new file mode 100644 index 0000000000..416731f957 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/app.ts @@ -0,0 +1,73 @@ +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: ` + + + + + + + + + + + + + + + + + + + + ` +}) +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(); + } +} + + diff --git a/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/datasource.ts b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/datasource.ts new file mode 100644 index 0000000000..6eadfd9668 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/datasource.ts @@ -0,0 +1,12 @@ +export let defaultData: object[] = [ + { 'Project Name': 'Website Redesign', Manager: 'Anita', Department: 'Marketing', 'Start Date': '04/01/2026', 'End Date': '06/20/2026', Budget: 25000, Spent: 18000, Variance: 7000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Mobile App Upgrade', Manager: 'David', Department: 'Engineering', 'Start Date': '04/05/2026', 'End Date': '07/15/2026', Budget: 42000, Spent: 26500, Variance: 15500, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'CRM Migration', Manager: 'Priya', Department: 'Sales', 'Start Date': '03/18/2026', 'End Date': '08/10/2026', Budget: 38000, Spent: 31000, Variance: 7000, Status: 'On Hold', Priority: 2 }, + { 'Project Name': 'HR Portal Refresh', Manager: 'Kumar', Department: 'HR', 'Start Date': '04/12/2026', 'End Date': '05/30/2026', Budget: 12000, Spent: 9500, Variance: 2500, Status: 'Completed', Priority: 3 }, + { 'Project Name': 'Finance Dashboard', Manager: 'Meera', Department: 'Finance', 'Start Date': '05/01/2026', 'End Date': '07/28/2026', Budget: 30000, Spent: 14250, Variance: 15750, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Vendor Portal Integration', Manager: 'John', Department: 'Procurement', 'Start Date': '04/22/2026', 'End Date': '08/05/2026', Budget: 27000, Spent: 11000, Variance: 16000, Status: 'Not Started', Priority: 4 }, + { 'Project Name': 'Security Audit Remediation', Manager: 'Sara', Department: 'IT', 'Start Date': '03/25/2026', 'End Date': '06/18/2026', Budget: 16000, Spent: 13200, Variance: 2800, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Customer Support Automation', Manager: 'Rahul', Department: 'Support', 'Start Date': '04/08/2026', 'End Date': '07/01/2026', Budget: 21000, Spent: 8000, Variance: 13000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Inventory Sync Improvement', Manager: 'Latha', Department: 'Operations', 'Start Date': '05/10/2026', 'End Date': '08/22/2026', Budget: 19500, Spent: 6200, Variance: 13300, Status: 'Not Started', Priority: 3 }, + { 'Project Name': 'Analytics Reporting Pack', Manager: 'Arun', Department: 'Business Intelligence', 'Start Date': '04/15/2026', 'End Date': '06/30/2026', Budget: 17500, Spent: 12400, Variance: 5100, Status: 'Completed', Priority: 2 }, +]; diff --git a/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/main.ts new file mode 100644 index 0000000000..37a1e9c190 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/main.ts @@ -0,0 +1,4 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app'; +import 'zone.js'; +bootstrapApplication(AppComponent).catch((err) => console.error(err)); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/styles.css b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/styles.css new file mode 100644 index 0000000000..3b6646ab1d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/src/styles.css @@ -0,0 +1,14 @@ + +@import 'node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-base/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/tailwind3.css'; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/tsconfig.json b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/tsconfig.json new file mode 100644 index 0000000000..9fa16d6333 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/angular/batch-update-cs1/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/batchUpdate.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/batchUpdate.cs new file mode 100644 index 0000000000..ebd9bfeb0b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/batchUpdate.cs @@ -0,0 +1,18 @@ +public IActionResult Index() +{ + List defaultData = new List() + { + 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(); +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/razor new file mode 100644 index 0000000000..72a2975538 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/razor @@ -0,0 +1,47 @@ +@Html.EJS().Spreadsheet("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").Sheets(sheet => +{ + sheet.Name("Project Budget").Ranges(ranges => + { + ranges.DataSource((IEnumerable)ViewBag.DefaultData).StartCell("A1").Add(); + }).Columns(column => + { + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + }).Add(); + }).Render() + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/tagHelper new file mode 100644 index 0000000000..5c8be6ca04 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/batch-update-cs1/tagHelper @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/batchUpdate.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/batchUpdate.cs new file mode 100644 index 0000000000..40d5440fb6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/batchUpdate.cs @@ -0,0 +1,18 @@ +public ActionResult Index() +{ + List defaultData = new List() + { + 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(); +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/razor new file mode 100644 index 0000000000..11a407643c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/razor @@ -0,0 +1,48 @@ +@Html.EJS().Spreadsheet("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").Sheets(sheet => +{ + sheet.Name("Project Budget").Ranges(ranges => + { + ranges.DataSource((IEnumerable)ViewBag.DefaultData).StartCell("A1").Add(); + }).Columns(column => + { + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + column.Add(); + }).Add(); + }).Render() + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/tagHelper new file mode 100644 index 0000000000..35eada57f0 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/batch-update-cs1/tagHelper @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/datasource.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/datasource.ts new file mode 100644 index 0000000000..308b39d3fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/datasource.ts @@ -0,0 +1,12 @@ +export let defaultData: Object[] = [ + { 'Project Name': 'Website Redesign', Manager: 'Anita', Department: 'Marketing', 'Start Date': '04/01/2026', 'End Date': '06/20/2026', Budget: 25000, Spent: 18000, Variance: 7000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Mobile App Upgrade', Manager: 'David', Department: 'Engineering', 'Start Date': '04/05/2026', 'End Date': '07/15/2026', Budget: 42000, Spent: 26500, Variance: 15500, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'CRM Migration', Manager: 'Priya', Department: 'Sales', 'Start Date': '03/18/2026', 'End Date': '08/10/2026', Budget: 38000, Spent: 31000, Variance: 7000, Status: 'On Hold', Priority: 2 }, + { 'Project Name': 'HR Portal Refresh', Manager: 'Kumar', Department: 'HR', 'Start Date': '04/12/2026', 'End Date': '05/30/2026', Budget: 12000, Spent: 9500, Variance: 2500, Status: 'Completed', Priority: 3 }, + { 'Project Name': 'Finance Dashboard', Manager: 'Meera', Department: 'Finance', 'Start Date': '05/01/2026', 'End Date': '07/28/2026', Budget: 30000, Spent: 14250, Variance: 15750, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Vendor Portal Integration', Manager: 'John', Department: 'Procurement', 'Start Date': '04/22/2026', 'End Date': '08/05/2026', Budget: 27000, Spent: 11000, Variance: 16000, Status: 'Not Started', Priority: 4 }, + { 'Project Name': 'Security Audit Remediation', Manager: 'Sara', Department: 'IT', 'Start Date': '03/25/2026', 'End Date': '06/18/2026', Budget: 16000, Spent: 13200, Variance: 2800, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Customer Support Automation', Manager: 'Rahul', Department: 'Support', 'Start Date': '04/08/2026', 'End Date': '07/01/2026', Budget: 21000, Spent: 8000, Variance: 13000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Inventory Sync Improvement', Manager: 'Latha', Department: 'Operations', 'Start Date': '05/10/2026', 'End Date': '08/22/2026', Budget: 19500, Spent: 6200, Variance: 13300, Status: 'Not Started', Priority: 3 }, + { 'Project Name': 'Analytics Reporting Pack', Manager: 'Arun', Department: 'Business Intelligence', 'Start Date': '04/15/2026', 'End Date': '06/30/2026', Budget: 17500, Spent: 12400, Variance: 5100, Status: 'Completed', Priority: 2 }, +]; diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/es5-datasource.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/es5-datasource.js new file mode 100644 index 0000000000..e4952f08ca --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/es5-datasource.js @@ -0,0 +1,12 @@ +var defaultData = [ + { 'Project Name': 'Website Redesign', Manager: 'Anita', Department: 'Marketing', 'Start Date': '04/01/2026', 'End Date': '06/20/2026', Budget: 25000, Spent: 18000, Variance: 7000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Mobile App Upgrade', Manager: 'David', Department: 'Engineering', 'Start Date': '04/05/2026', 'End Date': '07/15/2026', Budget: 42000, Spent: 26500, Variance: 15500, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'CRM Migration', Manager: 'Priya', Department: 'Sales', 'Start Date': '03/18/2026', 'End Date': '08/10/2026', Budget: 38000, Spent: 31000, Variance: 7000, Status: 'On Hold', Priority: 2 }, + { 'Project Name': 'HR Portal Refresh', Manager: 'Kumar', Department: 'HR', 'Start Date': '04/12/2026', 'End Date': '05/30/2026', Budget: 12000, Spent: 9500, Variance: 2500, Status: 'Completed', Priority: 3 }, + { 'Project Name': 'Finance Dashboard', Manager: 'Meera', Department: 'Finance', 'Start Date': '05/01/2026', 'End Date': '07/28/2026', Budget: 30000, Spent: 14250, Variance: 15750, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Vendor Portal Integration', Manager: 'John', Department: 'Procurement', 'Start Date': '04/22/2026', 'End Date': '08/05/2026', Budget: 27000, Spent: 11000, Variance: 16000, Status: 'Not Started', Priority: 4 }, + { 'Project Name': 'Security Audit Remediation', Manager: 'Sara', Department: 'IT', 'Start Date': '03/25/2026', 'End Date': '06/18/2026', Budget: 16000, Spent: 13200, Variance: 2800, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Customer Support Automation', Manager: 'Rahul', Department: 'Support', 'Start Date': '04/08/2026', 'End Date': '07/01/2026', Budget: 21000, Spent: 8000, Variance: 13000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Inventory Sync Improvement', Manager: 'Latha', Department: 'Operations', 'Start Date': '05/10/2026', 'End Date': '08/22/2026', Budget: 19500, Spent: 6200, Variance: 13300, Status: 'Not Started', Priority: 3 }, + { 'Project Name': 'Analytics Reporting Pack', Manager: 'Arun', Department: 'Business Intelligence', 'Start Date': '04/15/2026', 'End Date': '06/30/2026', Budget: 17500, Spent: 12400, Variance: 5100, Status: 'Completed', Priority: 2 }, +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.html new file mode 100644 index 0000000000..614ff24adb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.html @@ -0,0 +1,38 @@ + + EJ2 SpreadSheet + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.js new file mode 100644 index 0000000000..5adbe72fea --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.js @@ -0,0 +1,44 @@ +ej.base.enableRipple(true); + +var sheets = [ + { + name: 'Project Budget', + ranges: [{ dataSource: defaultData, startCell: 'A1' }], + columns: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}] + } +]; + +var spreadsheet = new ej.spreadsheet.Spreadsheet({ + sheets: sheets, + 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', + created: function () { + 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/javascript/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(); + } +}); + +spreadsheet.appendTo('#spreadsheet'); + + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.ts new file mode 100644 index 0000000000..4a0f2ce467 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/index.ts @@ -0,0 +1,50 @@ +import { Spreadsheet, SheetModel } from '@syncfusion/ej2-spreadsheet'; +import { defaultData } from './datasource.ts'; +import { enableRipple } from '@syncfusion/ej2-base'; + +enableRipple(true); + +let sheets: SheetModel[] = [ + { + name: 'Project Budget', + ranges: [{ dataSource: defaultData , startCell: 'A1' }], + columns: [ + { }, { }, { }, { }, { }, { }, { }, { }, { }, { } + ] + } + ]; + +let spreadsheet: Spreadsheet = new Spreadsheet({ + sheets: sheets, + 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', + created: function () { + 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/javascript/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(); + } +}); + +spreadsheet.appendTo('#spreadsheet'); + + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/styles.css new file mode 100644 index 0000000000..b0a0c68276 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/styles.css @@ -0,0 +1,19 @@ +#container { + visibility: hidden; +} + +#spreadsheet_sheet_panel { + height: 380px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +body { + height: 475px; +} diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/system.config.js new file mode 100644 index 0000000000..2dc57dd526 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/batch-update-cs1/system.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + //Syncfusion packages mapping + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/datasource.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/datasource.ts new file mode 100644 index 0000000000..58b487e52b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/datasource.ts @@ -0,0 +1,12 @@ +export let defaultData: Object[] = [ + { 'Project Name': 'Website Redesign', Manager: 'Anita', Department: 'Marketing', 'Start Date': '04/01/2026', 'End Date': '06/20/2026', Budget: 25000, Spent: 18000, Variance: 7000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Mobile App Upgrade', Manager: 'David', Department: 'Engineering', 'Start Date': '04/05/2026', 'End Date': '07/15/2026', Budget: 42000, Spent: 26500, Variance: 15500, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'CRM Migration', Manager: 'Priya', Department: 'Sales', 'Start Date': '03/18/2026', 'End Date': '08/10/2026', Budget: 38000, Spent: 31000, Variance: 7000, Status: 'On Hold', Priority: 2 }, + { 'Project Name': 'HR Portal Refresh', Manager: 'Kumar', Department: 'HR', 'Start Date': '04/12/2026', 'End Date': '05/30/2026', Budget: 12000, Spent: 9500, Variance: 2500, Status: 'Completed', Priority: 3 }, + { 'Project Name': 'Finance Dashboard', Manager: 'Meera', Department: 'Finance', 'Start Date': '05/01/2026', 'End Date': '07/28/2026', Budget: 30000, Spent: 14250, Variance: 15750, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Vendor Portal Integration', Manager: 'John', Department: 'Procurement', 'Start Date': '04/22/2026', 'End Date': '08/05/2026', Budget: 27000, Spent: 11000, Variance: 16000, Status: 'Not Started', Priority: 4 }, + { 'Project Name': 'Security Audit Remediation', Manager: 'Sara', Department: 'IT', 'Start Date': '03/25/2026', 'End Date': '06/18/2026', Budget: 16000, Spent: 13200, Variance: 2800, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Customer Support Automation', Manager: 'Rahul', Department: 'Support', 'Start Date': '04/08/2026', 'End Date': '07/01/2026', Budget: 21000, Spent: 8000, Variance: 13000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Inventory Sync Improvement', Manager: 'Latha', Department: 'Operations', 'Start Date': '05/10/2026', 'End Date': '08/22/2026', Budget: 19500, Spent: 6200, Variance: 13300, Status: 'Not Started', Priority: 3 }, + { 'Project Name': 'Analytics Reporting Pack', Manager: 'Arun', Department: 'Business Intelligence', 'Start Date': '04/15/2026', 'End Date': '06/30/2026', Budget: 17500, Spent: 12400, Variance: 5100, Status: 'Completed', Priority: 2 }, +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/es5-datasource.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/es5-datasource.js new file mode 100644 index 0000000000..e4952f08ca --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/es5-datasource.js @@ -0,0 +1,12 @@ +var defaultData = [ + { 'Project Name': 'Website Redesign', Manager: 'Anita', Department: 'Marketing', 'Start Date': '04/01/2026', 'End Date': '06/20/2026', Budget: 25000, Spent: 18000, Variance: 7000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Mobile App Upgrade', Manager: 'David', Department: 'Engineering', 'Start Date': '04/05/2026', 'End Date': '07/15/2026', Budget: 42000, Spent: 26500, Variance: 15500, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'CRM Migration', Manager: 'Priya', Department: 'Sales', 'Start Date': '03/18/2026', 'End Date': '08/10/2026', Budget: 38000, Spent: 31000, Variance: 7000, Status: 'On Hold', Priority: 2 }, + { 'Project Name': 'HR Portal Refresh', Manager: 'Kumar', Department: 'HR', 'Start Date': '04/12/2026', 'End Date': '05/30/2026', Budget: 12000, Spent: 9500, Variance: 2500, Status: 'Completed', Priority: 3 }, + { 'Project Name': 'Finance Dashboard', Manager: 'Meera', Department: 'Finance', 'Start Date': '05/01/2026', 'End Date': '07/28/2026', Budget: 30000, Spent: 14250, Variance: 15750, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Vendor Portal Integration', Manager: 'John', Department: 'Procurement', 'Start Date': '04/22/2026', 'End Date': '08/05/2026', Budget: 27000, Spent: 11000, Variance: 16000, Status: 'Not Started', Priority: 4 }, + { 'Project Name': 'Security Audit Remediation', Manager: 'Sara', Department: 'IT', 'Start Date': '03/25/2026', 'End Date': '06/18/2026', Budget: 16000, Spent: 13200, Variance: 2800, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Customer Support Automation', Manager: 'Rahul', Department: 'Support', 'Start Date': '04/08/2026', 'End Date': '07/01/2026', Budget: 21000, Spent: 8000, Variance: 13000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Inventory Sync Improvement', Manager: 'Latha', Department: 'Operations', 'Start Date': '05/10/2026', 'End Date': '08/22/2026', Budget: 19500, Spent: 6200, Variance: 13300, Status: 'Not Started', Priority: 3 }, + { 'Project Name': 'Analytics Reporting Pack', Manager: 'Arun', Department: 'Business Intelligence', 'Start Date': '04/15/2026', 'End Date': '06/30/2026', Budget: 17500, Spent: 12400, Variance: 5100, Status: 'Completed', Priority: 2 }, +]; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.html new file mode 100644 index 0000000000..d4643ebcea --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.html @@ -0,0 +1,43 @@ + + + + + EJ2 JavaScript Spreadsheet + + + + + + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.js new file mode 100644 index 0000000000..2e92e23962 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.js @@ -0,0 +1,43 @@ +ej.base.enableRipple(true); + +var sheets = [ + { + name: 'Project Budget', + ranges: [{ dataSource: defaultData, startCell: 'A1' }], + columns: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}] + } +]; + +var spreadsheet = new ej.spreadsheet.Spreadsheet({ + sheets: sheets, + 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', + created: function () { + 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/javascript/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(); + } +}); + +spreadsheet.appendTo('#spreadsheet'); + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.ts new file mode 100644 index 0000000000..17e8cc83d3 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/index.ts @@ -0,0 +1,48 @@ +import { Spreadsheet, SheetModel } from '@syncfusion/ej2-spreadsheet'; +import { defaultData } from './datasource.ts'; +import { enableRipple } from '@syncfusion/ej2-base'; + +enableRipple(true); + +let sheets: SheetModel[] = [ + { + name: 'Project Budget', + ranges: [{ dataSource: defaultData, startCell: 'A1' }], + columns: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}] + } +]; + +let spreadsheet: Spreadsheet = new Spreadsheet({ + sheets: sheets, + 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', + created: function () { + 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/javascript/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(); + } +}); + +spreadsheet.appendTo('#spreadsheet'); + + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/styles.css new file mode 100644 index 0000000000..b0a0c68276 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/styles.css @@ -0,0 +1,19 @@ +#container { + visibility: hidden; +} + +#spreadsheet_sheet_panel { + height: 380px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +body { + height: 475px; +} diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/system.config.js new file mode 100644 index 0000000000..2dc57dd526 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/batch-update-cs1/system.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + //Syncfusion packages mapping + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/app-composition.vue b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/app-composition.vue new file mode 100644 index 0000000000..7fc7e37b98 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/app-composition.vue @@ -0,0 +1,73 @@ + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/app.vue b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/app.vue new file mode 100644 index 0000000000..173ca16237 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/app.vue @@ -0,0 +1,89 @@ + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/data.js b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/data.js new file mode 100644 index 0000000000..e0daeddc7a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/data.js @@ -0,0 +1,12 @@ +export const defaultData = [ + { 'Project Name': 'Website Redesign', Manager: 'Anita', Department: 'Marketing', 'Start Date': '04/01/2026', 'End Date': '06/20/2026', Budget: 25000, Spent: 18000, Variance: 7000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Mobile App Upgrade', Manager: 'David', Department: 'Engineering', 'Start Date': '04/05/2026', 'End Date': '07/15/2026', Budget: 42000, Spent: 26500, Variance: 15500, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'CRM Migration', Manager: 'Priya', Department: 'Sales', 'Start Date': '03/18/2026', 'End Date': '08/10/2026', Budget: 38000, Spent: 31000, Variance: 7000, Status: 'On Hold', Priority: 2 }, + { 'Project Name': 'HR Portal Refresh', Manager: 'Kumar', Department: 'HR', 'Start Date': '04/12/2026', 'End Date': '05/30/2026', Budget: 12000, Spent: 9500, Variance: 2500, Status: 'Completed', Priority: 3 }, + { 'Project Name': 'Finance Dashboard', Manager: 'Meera', Department: 'Finance', 'Start Date': '05/01/2026', 'End Date': '07/28/2026', Budget: 30000, Spent: 14250, Variance: 15750, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Vendor Portal Integration', Manager: 'John', Department: 'Procurement', 'Start Date': '04/22/2026', 'End Date': '08/05/2026', Budget: 27000, Spent: 11000, Variance: 16000, Status: 'Not Started', Priority: 4 }, + { 'Project Name': 'Security Audit Remediation', Manager: 'Sara', Department: 'IT', 'Start Date': '03/25/2026', 'End Date': '06/18/2026', Budget: 16000, Spent: 13200, Variance: 2800, Status: 'In Progress', Priority: 1 }, + { 'Project Name': 'Customer Support Automation', Manager: 'Rahul', Department: 'Support', 'Start Date': '04/08/2026', 'End Date': '07/01/2026', Budget: 21000, Spent: 8000, Variance: 13000, Status: 'In Progress', Priority: 2 }, + { 'Project Name': 'Inventory Sync Improvement', Manager: 'Latha', Department: 'Operations', 'Start Date': '05/10/2026', 'End Date': '08/22/2026', Budget: 19500, Spent: 6200, Variance: 13300, Status: 'Not Started', Priority: 3 }, + { 'Project Name': 'Analytics Reporting Pack', Manager: 'Arun', Department: 'Business Intelligence', 'Start Date': '04/15/2026', 'End Date': '06/30/2026', Budget: 17500, Spent: 12400, Variance: 5100, Status: 'Completed', Priority: 2 } +]; diff --git a/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.css b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.css new file mode 100644 index 0000000000..33f94a07c7 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.css @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.html new file mode 100644 index 0000000000..6bbb3bc243 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.js new file mode 100644 index 0000000000..7fbd6ac735 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/index.js @@ -0,0 +1,68 @@ +import Vue from "vue"; +import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet"; +import { defaultData } from './data.js'; +Vue.use(SpreadsheetPlugin); + +new Vue({ + el: '#app', + template: ` +
    + + + + + + + + + + + + + + + + + + + + + +
    +`, + + data: () => { + return { + dataSource: defaultData, + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' + }; + }, + methods: { + created: function () { + var spreadsheet = this.$refs.spreadsheet; + 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/vue/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(); + } + } + +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/systemjs.config.js new file mode 100644 index 0000000000..50ef05bc08 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/batch-update-cs1/systemjs.config.js @@ -0,0 +1,45 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-spreadsheet": "syncfusion:ej2-vue-spreadsheet/dist/ej2-vue-spreadsheet.umd.min.js", + "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js", + '@syncfusion/ej2-vue-buttons': 'syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js' + } +}); + +System.import('index.js'); From 9a38b48435b27679b05dd41fc72e96a1a517e8fb Mon Sep 17 00:00:00 2001 From: bhuvaneshdhakshinmaoorthy Date: Mon, 1 Jun 2026 11:27:58 +0530 Subject: [PATCH 2/2] 1027433: Resolved technical error --- .../Excel/Spreadsheet/Javascript-ES5/batch-update.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/batch-update.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/batch-update.md index 1a3e99cbce..f0e5f5ad1a 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/batch-update.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/batch-update.md @@ -7,7 +7,7 @@ control: Spreadsheet documentation: ug --- -# Batch Update in EJ2 Javascript Spreadsheet control +# Batch Update in EJ2 JavaScript Spreadsheet control 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.