diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 3261933ed3..3dda4586dc 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5432,6 +5432,7 @@
  • Ribbon
  • Print
  • Performance Best Practices
    • +
  • Suspend and Resume refresh
  • Globalization
  • Accessibility
  • Keyboard Shortcuts
    • @@ -5481,6 +5482,7 @@
  • Ribbon
  • Print
  • Performance Best Practices
    • +
  • Suspend and Resume refresh
  • Globalization
  • Accessibility
  • Keyboard Shortcuts
    • @@ -5534,6 +5536,7 @@
  • Styles and Appearance
  • Print
  • Performance Best Practices
    • +
  • Suspend and Resume refresh
  • Performance Metrics
  • Globalization
  • Accessibility
    • @@ -5657,7 +5660,7 @@
  • Undo and Redo
  • Print
  • Performance Best Practices
    • -
  • Batch Update
    • +
  • Suspend and Resume refresh
  • Globalization
  • Accessibility
  • Keyboard Shortcuts
    • @@ -5727,6 +5730,7 @@
  • Ribbon
  • Print
  • Performance Best Practices
    • +
  • Suspend and Resume refresh
  • Globalization
  • Accessibility
  • Keyboard Shortcuts @@ -5776,6 +5780,7 @@
  • Styles and Appearance
  • Print
  • Performance Best Practices
    • +
  • Suspend and Resume refresh
  • Globalization
  • Accessibility
  • Keyboard Shortcuts
    • @@ -5822,6 +5827,7 @@
  • Styles and Appearance
  • Print
  • Performance Best Practices
    • +
  • Suspend and Resume refresh
  • Performance Metrics
  • Globalization
  • Accessibility
    • diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/suspend-resume.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/suspend-resume.md new file mode 100644 index 0000000000..0ad385a71c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/suspend-resume.md @@ -0,0 +1,143 @@ +--- +layout: post +title: Suspend and Resume UI Refresh in ASP.NET Core Spreadsheet | Syncfusion +description: Improve performance in Syncfusion ASP.NET Core Spreadsheet by using suspendRefresh and resumeRefresh to group multiple updates and avoid repeated rendering. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Suspend and Resume UI Refresh 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 **suspend and resume refresh** feature lets you temporarily pause UI rendering, perform multiple operations, and then refresh the UI only once at the end. This helps reduce unnecessary re-rendering and improves the overall performance of bulk updates. + +This is especially useful when the Spreadsheet is updated programmatically during initialization, data processing, or large-scale scenarios. + +## When to use + +Use this feature when you need to perform several actions in sequence, such as: + +- Updating many cells at once +- Applying formatting to a large range +- Inserting or deleting multiple rows or columns +- Running repeated operations inside a loop +- Working with large datasets + +For a few operations, this feature is usually not required. + +## How to use + +Use the following methods: + +- `suspendRefresh` — pauses UI rendering +- `resumeRefresh` — applies all pending visual updates + +### Step 1: Suspend UI refresh + +Call `suspendRefresh` before starting multiple Spreadsheet operations. + +### Step 2: Perform the required operations + +Execute the actions you want to apply. The Spreadsheet model is updated, but the UI is not refreshed after each call. + +### Step 3: Resume UI refresh + +Call `resumeRefresh` after all operations are complete. The Spreadsheet then renders all accumulated changes in a single refresh. + +### Example pattern + +```js + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/tagHelper new file mode 100644 index 0000000000..5c8be6ca04 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/tagHelper @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/suspend-resume-cs1/batchUpdate.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/suspend-resume-cs1/batchUpdate.cs new file mode 100644 index 0000000000..40d5440fb6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/suspend-resume-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/suspend-resume-cs1/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/suspend-resume-cs1/razor new file mode 100644 index 0000000000..11a407643c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/suspend-resume-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/suspend-resume-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/suspend-resume-cs1/tagHelper new file mode 100644 index 0000000000..35eada57f0 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/suspend-resume-cs1/tagHelper @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-cs1/datasource.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-cs1/datasource.ts new file mode 100644 index 0000000000..308b39d3fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-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/suspend-resume-cs1/es5-datasource.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-cs1/es5-datasource.js new file mode 100644 index 0000000000..e4952f08ca --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-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/suspend-resume-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-cs1/index.html new file mode 100644 index 0000000000..614ff24adb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-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/suspend-resume-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-cs1/index.js new file mode 100644 index 0000000000..5adbe72fea --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-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/suspend-resume-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-cs1/index.ts new file mode 100644 index 0000000000..4a0f2ce467 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-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/suspend-resume-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-cs1/styles.css new file mode 100644 index 0000000000..b0a0c68276 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-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/suspend-resume-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-cs1/system.config.js new file mode 100644 index 0000000000..2dc57dd526 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/suspend-resume-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/suspend-resume-cs1/datasource.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/datasource.ts new file mode 100644 index 0000000000..58b487e52b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-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/suspend-resume-cs1/es5-datasource.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/es5-datasource.js new file mode 100644 index 0000000000..e4952f08ca --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-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/suspend-resume-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/index.html new file mode 100644 index 0000000000..d4643ebcea --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/index.html @@ -0,0 +1,43 @@ + + + + + EJ2 JavaScript Spreadsheet + + + + + + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/index.js new file mode 100644 index 0000000000..2e92e23962 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-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/suspend-resume-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/index.ts new file mode 100644 index 0000000000..17e8cc83d3 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-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/suspend-resume-cs1/styles.css b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/styles.css new file mode 100644 index 0000000000..b0a0c68276 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-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/suspend-resume-cs1/system.config.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-cs1/system.config.js new file mode 100644 index 0000000000..2dc57dd526 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/suspend-resume-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/react/batch-update/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/app/app.jsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/batch-update/app/app.jsx rename to Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/app/app.jsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/batch-update/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/app/app.tsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/batch-update/app/app.tsx rename to Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/app/app.tsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/batch-update/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/app/datasource.jsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/batch-update/app/datasource.jsx rename to Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/app/datasource.jsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/batch-update/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/app/datasource.tsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/batch-update/app/datasource.tsx rename to Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/app/datasource.tsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/batch-update/index.html b/Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/index.html similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/batch-update/index.html rename to Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/index.html diff --git a/Document-Processing/code-snippet/spreadsheet/react/batch-update/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/systemjs.config.js similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/batch-update/systemjs.config.js rename to Document-Processing/code-snippet/spreadsheet/react/suspend-resume-cs1/systemjs.config.js diff --git a/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/app-composition.vue b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/app-composition.vue new file mode 100644 index 0000000000..7fc7e37b98 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/app-composition.vue @@ -0,0 +1,73 @@ + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/app.vue b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/app.vue new file mode 100644 index 0000000000..173ca16237 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/app.vue @@ -0,0 +1,89 @@ + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/data.js b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/data.js new file mode 100644 index 0000000000..e0daeddc7a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-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/suspend-resume-cs1/index.css b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/index.css new file mode 100644 index 0000000000..33f94a07c7 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/index.css @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/index.html new file mode 100644 index 0000000000..6bbb3bc243 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/index.js new file mode 100644 index 0000000000..7fbd6ac735 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-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/suspend-resume-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-cs1/systemjs.config.js new file mode 100644 index 0000000000..50ef05bc08 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/vue/suspend-resume-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');