From 240cdeb48ce4f7b96043a352ea064714268ca3ac Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Thu, 12 Feb 2026 11:36:20 +0530
Subject: [PATCH 1/5] 1009433: Need to ensure JavaScript(ES5) Document Coding
Standards in Spreadsheet JavaScript ES5 platform
---
.../Javascript-ES5/docker-deployment.md | 2 +-
.../Spreadsheet/Javascript-ES5/formatting.md | 2 +-
.../Spreadsheet/Javascript-ES5/open-save.md | 60 ++---
.../performance-best-practices.md | 2 +-
.../Excel/Spreadsheet/Javascript-ES5/sort.md | 4 +-
.../javascript-es5/base-64-string/index.js | 25 ++-
.../change-active-sheet-cs1/index.js | 2 +-
.../javascript-es5/chart-cs3/index.js | 2 +-
.../javascript-es5/clipboard-cs1/index.js | 6 +-
.../javascript-es5/clipboard-cs2/index.js | 31 ++-
.../column-header-change-cs1/index.js | 4 +-
.../dynamic-data-binding-cs1/index.js | 41 ++--
.../es5-datasource.js | 2 +-
.../dynamic-data-binding-cs2/index.js | 211 +++++++++---------
.../javascript-es5/filter-cs1/index.js | 19 +-
.../filter-cs2/es5-datasource.js | 2 +-
.../javascript-es5/filter-cs2/index.js | 18 +-
.../find-target-context-menu/index.js | 2 +-
.../format/globalization-cs1/index.js | 77 ++++---
.../index.js | 7 +-
.../open-from-blobdata-cs1/index.html | 1 -
.../open-from-blobdata-cs1/index.js | 8 +-
.../javascript-es5/open-from-json/index.js | 23 +-
.../javascript-es5/open-save-cs2/index.js | 29 ++-
.../javascript-es5/open-save-cs3/index.js | 31 +--
.../javascript-es5/open-save-cs7/index.js | 18 +-
.../javascript-es5/print-cs1/index.js | 6 +-
.../javascript-es5/print-cs2/index.js | 2 +-
.../javascript-es5/protect-sheet-cs2/index.js | 47 ++--
.../protect-workbook/default-cs1/index.js | 2 +-
.../protect-workbook/default-cs2/index.js | 2 +-
.../javascript-es5/readonly-cs1/index.js | 19 +-
.../ribbon/cutomization-cs1/index.js | 4 +-
.../save-as-blobdata-cs1/index.js | 6 +-
.../javascript-es5/save-as-json/index.js | 48 ++--
.../javascript-es5/save-cs1/index.js | 20 +-
.../selected-cell-values/es5-datasource.js | 2 +-
.../selected-cell-values/index.js | 33 ++-
.../javascript-es5/selection-cs1/index.js | 2 +-
.../javascript-es5/selection-cs2/index.js | 7 +-
40 files changed, 412 insertions(+), 417 deletions(-)
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
index b9f1a43a0..d8c24451c 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
@@ -103,7 +103,7 @@ Now the Spreadsheet server Docker instance runs on localhost with the provided p
-
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-from-blobdata-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-from-blobdata-cs1/index.js
index 91c909574..4efd71f63 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-from-blobdata-cs1/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-from-blobdata-cs1/index.js
@@ -7,11 +7,11 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [{
}],
- created: () => {
+ created: function () {
fetch(base64String)
- // To obtain blob data from base64 string.
- .then((response) => response.blob())
- .then((fileBlob) => {
+ // To obtain blob data from base64 string.
+ .then(function (response) { return response.blob(); })
+ .then(function (fileBlob) {
// To convert obtained blob data as a file.
var file = new File([fileBlob], 'Sample.xlsx');
spreadsheet.open({ file: file });
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-from-json/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-from-json/index.js
index 1ae0dfb70..c998da2a7 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-from-json/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-from-json/index.js
@@ -1,15 +1,15 @@
//Initialize the Spreadsheet control
var spreadsheet = new ej.spreadsheet.Spreadsheet({
- beforeOpen: (args) => {
+ beforeOpen: function (args) {
args.cancel = true;
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
fetch(
'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
args.requestData
- ).then((response) => {
- response.json().then((data) => {
- spreadsheet.openFromJson({ file: data }, options)
+ ).then(function (response) {
+ response.json().then(function (data) {
+ spreadsheet.openFromJson({ file: data }, options);
});
});
}
@@ -26,9 +26,9 @@ var uploader = new ej.inputs.Uploader({
allowedExtensions: '.xlsx, .xls, .csv',
showFileList: false,
buttons: {
- browse: 'Choose file',
+ browse: 'Choose file'
},
- success: (args) => {
+ success: function (args) {
if (args.operation == 'upload') {
spreadsheet.open({ file: args.file.rawFile });
}
@@ -54,15 +54,16 @@ function createOptions() {
function toggleCheckboxes() {
var valueOnlyCheckbox = document.getElementById('valueOnly');
var checkboxes = document.querySelectorAll('#Openfromjson input[type="checkbox"]:not(#valueOnly)');
- checkboxes.forEach(checkbox => {
- (checkbox).disabled = valueOnlyCheckbox.checked;
+ for (var i = 0; i < checkboxes.length; i++) {
+ var checkbox = checkboxes[i];
+ checkbox.disabled = valueOnlyCheckbox.checked;
if (valueOnlyCheckbox.checked) {
- (checkbox).checked = false;
+ checkbox.checked = false;
}
- });
+ }
}
var valueOnlyElement = document.getElementById('valueOnly');
if (valueOnlyElement) {
valueOnlyElement.addEventListener('change', toggleCheckboxes);
-}
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs2/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs2/index.js
index 79e1db5ce..b01fd514b 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs2/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs2/index.js
@@ -1,17 +1,16 @@
- //Initialize Spreadsheet component.
- var spreadsheet = new ej.spreadsheet.Spreadsheet({
- 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 () {
- fetch("https://cdn.syncfusion.com/scripts/spreadsheet/Sample.xlsx") // fetch the remote url
- .then((response) => {
- response.blob().then((fileBlob) => { // convert the excel file to blob
+//Initialize Spreadsheet component.
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
+ 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 () {
+ fetch("https://cdn.syncfusion.com/scripts/spreadsheet/Sample.xlsx") // fetch the remote url
+ .then(function (response) {
+ response.blob().then(function (fileBlob) { // convert the excel file to blob
var file = new File([fileBlob], "Sample.xlsx"); //convert the blob into file
spreadsheet.open({ file: file }); // open the file into Spreadsheet
- })
- })
- }
- });
- //Render initialized Spreadsheet component.
- spreadsheet.appendTo('#spreadsheet');
-
+ });
+ });
+ }
+});
+//Render initialized Spreadsheet component.
+spreadsheet.appendTo('#spreadsheet');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs3/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs3/index.js
index 26aa9fbe6..0719a1bcb 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs3/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs3/index.js
@@ -1,14 +1,19 @@
- //Initialize Spreadsheet component.
- var spreadsheet = new ej.spreadsheet.Spreadsheet({
- openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
- saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
- beforeOpen: function (args) {
- args.requestData['headers'] = {
- ...args.requestData,
- headers: { Authorization: 'YOUR TEXT' },
- };
+//Initialize Spreadsheet component.
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
+ openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
+ saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
+ beforeOpen: function (args) {
+ // Ensure requestData exists
+ if (!args.requestData) {
+ args.requestData = {};
}
- });
- //Render initialized Spreadsheet component.
- spreadsheet.appendTo('#spreadsheet');
-
+ // Ensure headers object exists (preserve any existing headers)
+ if (!args.requestData.headers) {
+ args.requestData.headers = {};
+ }
+ // Set/override the Authorization header
+ args.requestData.headers.Authorization = 'YOUR TEXT';
+ }
+});
+//Render initialized Spreadsheet component.
+spreadsheet.appendTo('#spreadsheet');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs7/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs7/index.js
index 49f6549c2..ed4b5f823 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs7/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/open-save-cs7/index.js
@@ -1,4 +1,3 @@
-
var sheet = [{
rows: [{
index: 0,
@@ -64,7 +63,7 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
fileMenuItemSelect: function (args) {
if (args.item.text === 'Microsoft Excel') {
args.cancel = true;
- spreadsheet.saveAsJson().then((response) => {
+ spreadsheet.saveAsJson().then(function (response) {
var formData = new FormData();
formData.append(
'JSONData',
@@ -72,18 +71,18 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
);
formData.append('fileName', 'Sample');
formData.append('saveType', 'Xlsx');
- formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' })),
+ formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' }));
fetch(
'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
{
method: 'POST',
headers: { Authorization: 'YOUR TEXT' },
- body: formData,
+ body: formData
}
- ).then((response) => {
- response.blob().then((data) => {
+ ).then(function (response) {
+ response.blob().then(function (data) {
var anchor = ej.base.createElement('a', {
- attrs: { download: 'Sample.xlsx' },
+ attrs: { download: 'Sample.xlsx' }
});
var url = URL.createObjectURL(data);
anchor.href = url;
@@ -95,8 +94,7 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
});
});
}
- },
+ }
});
//Render initialized Spreadsheet component.
-spreadsheet.appendTo('#spreadsheet');
-
+spreadsheet.appendTo('#spreadsheet');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/print-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/print-cs1/index.js
index 2503f4dee..2c522a6b9 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/print-cs1/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/print-cs1/index.js
@@ -12,7 +12,7 @@ var items = [
var drpDownBtn = new ej.splitbuttons.DropDownButton({
items: items,
cssClass: "e-round-corner",
- select: (args) => {
+ select: function (args) {
if (args.item.text === 'Print') {
printElement.querySelector(".e-sheet-content").innerHTML = document.querySelector(
".e-sheet-content"
@@ -73,13 +73,13 @@ var columns = [{ width: 100 }, { width: 100 },{ width: 100},
var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], columns: columns },
{name: 'Salary', ranges: [{ dataSource: salaryData }], columns: columns}],
- created: () => {
+ created: function () {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
spreadsheet.cellFormat({ fontWeight: 'bold'}, 'A11:D11');
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Salary!A1:D1');
spreadsheet.cellFormat({ fontWeight: 'bold'}, 'Salary!A7:D7');
},
- dataBound: () => {
+ dataBound: function () {
if (isPrint) {
printElement.querySelector(".e-sheet-content").innerHTML += document
.querySelector(".e-sheet-content").outerHTML;
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/print-cs2/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/print-cs2/index.js
index da9a59336..fa5e62aef 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/print-cs2/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/print-cs2/index.js
@@ -115,7 +115,7 @@ var allowRowColumnHeader;
var drpDownBtn = new ej.splitbuttons.DropDownButton({
items: items,
cssClass: 'e-round-corner',
- select: (args) => {
+ select: function (args) {
spreadsheet.print({
type: args.item.text,
allowGridLines: allowGridLines,
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-sheet-cs2/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-sheet-cs2/index.js
index 1f72c2751..09020f50f 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-sheet-cs2/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-sheet-cs2/index.js
@@ -1,39 +1,38 @@
// Initialize the Spreadsheet component.
-var columns = [{ width: 100 }, { width: 100 },{ width: 100},
- { width: 100 }];
-let spreadsheet = new ej.spreadsheet.Spreadsheet({
- sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], columns: columns,isProtected: true, protectSettings: {selectCells: true} },
- {name: 'Salary', ranges: [{ dataSource: salaryData }], columns: columns}],
+var columns = [{ width: 100 }, { width: 100 }, { width: 100 },
+{ width: 100 }];
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
+ sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], columns: columns, isProtected: true, protectSettings: { selectCells: true } },
+ { name: 'Salary', ranges: [{ dataSource: salaryData }], columns: columns }],
dataBound: function () {
- spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
- spreadsheet.cellFormat({ fontWeight: 'bold'}, 'A11:D11');
- }
+ spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
+ spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
+ }
});
spreadsheet.appendTo('#spreadsheet');
var dialogObj = new ej.popups.Dialog({
- header: 'Spreadsheet',
- target: document.getElementById('spreadsheet'),
- content: '"A1:F3" range of cells has been unlocked.',
- showCloseIcon: true,
- isModal: true,
- visible: false,
- width: '500px',
- buttons: [{
- click: lockCells,
- buttonModel: { content: 'Ok', isPrimary: true }
- }]
- });
+ header: 'Spreadsheet',
+ target: document.getElementById('spreadsheet'),
+ content: '"A1:F3" range of cells has been unlocked.',
+ showCloseIcon: true,
+ isModal: true,
+ visible: false,
+ width: '500px',
+ buttons: [{
+ click: lockCells,
+ buttonModel: { content: 'Ok', isPrimary: true }
+ }]
+});
dialogObj.appendTo('#dialog');
-var button = new ej.buttons.Button({content: 'Unlock cells'});
+var button = new ej.buttons.Button({ content: 'Unlock cells' });
button.appendTo('#button');
-document.getElementById('button').onclick = () => {
+document.getElementById('button').onclick = function () {
dialogObj.show();
};
function lockCells() {
spreadsheet.lockCells('A1:F3', false);
dialogObj.hide();
-}
-
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-workbook/default-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-workbook/default-cs1/index.js
index c5b1c8bba..83b17262a 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-workbook/default-cs1/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-workbook/default-cs1/index.js
@@ -1,7 +1,7 @@
// Initialize the Spreadsheet component.
var columns = [{ width: 100 }, { width: 100 },{ width: 100},
{ width: 100 }];
-let spreadsheet = new ej.spreadsheet.Spreadsheet({
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
isProtected: true,
sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], columns: columns }],
dataBound: function () {
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-workbook/default-cs2/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-workbook/default-cs2/index.js
index 39c91b343..40df057d1 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-workbook/default-cs2/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/protect-workbook/default-cs2/index.js
@@ -1,7 +1,7 @@
// Initialize the Spreadsheet component.
var columns = [{ width: 100 }, { width: 100 },{ width: 100},
{ width: 100 }];
-let spreadsheet = new ej.spreadsheet.Spreadsheet({
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
password: 'syncfusion',
sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], columns: columns }],
dataBound: function () {
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/readonly-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/readonly-cs1/index.js
index 22beaa122..df902d3c3 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/readonly-cs1/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/readonly-cs1/index.js
@@ -1,33 +1,32 @@
+var columns = [{ width: 100 }, { width: 100 }, { width: 100, isReadOnly: true },
+{ width: 100 }, { width: 100 }, { width: 100 }];
-var columns = [{ width: 100 }, { width: 100 },{ width: 100 , isReadOnly: true},
- { width: 100 }, { width: 100 },{ width: 100 }];
-
-var rows = [{index:3,isReadOnly:true},{index:4, cells:[{index:5, isReadOnly: true}]},{}]
+var rows = [{ index: 3, isReadOnly: true }, { index: 4, cells: [{ index: 5, isReadOnly: true }] }, {}]
var spreadsheet = new ej.spreadsheet.Spreadsheet({
- sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], rows: rows, columns: columns}]
+ sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], rows: rows, columns: columns }]
});
spreadsheet.appendTo('#spreadsheet');
// To make row 2 readonly.
-document.getElementById('button1').onclick = () => {
+document.getElementById('button1').onclick = function () {
spreadsheet.setRangeReadOnly(true, '2:2', spreadsheet.activeSheetIndex);
}
// To make Column A readonly.
-document.getElementById('button2').onclick = () => {
+document.getElementById('button2').onclick = function () {
spreadsheet.setRangeReadOnly(true, 'A:A', spreadsheet.activeSheetIndex);
}
// To make E5 cell readonly.
-document.getElementById('button3').onclick = () => {
+document.getElementById('button3').onclick = function () {
spreadsheet.setRangeReadOnly(true, 'E5:E5', spreadsheet.activeSheetIndex);
}
// To remove readonly.
-document.getElementById('button4').onclick = () => {
+document.getElementById('button4').onclick = function () {
spreadsheet.setRangeReadOnly(false, '2:2', spreadsheet.activeSheetIndex);
spreadsheet.setRangeReadOnly(false, 'A:A', spreadsheet.activeSheetIndex);
spreadsheet.setRangeReadOnly(false, 'E5:E5', spreadsheet.activeSheetIndex);
-}
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/ribbon/cutomization-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/ribbon/cutomization-cs1/index.js
index 0d546a2cc..b1caca487 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/ribbon/cutomization-cs1/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/ribbon/cutomization-cs1/index.js
@@ -75,7 +75,7 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
spreadsheet.appendTo('#spreadsheet');
function appendDropdownBtn(id) {
- let ddlItems = [
+ var ddlItems = [
{
text: 'Download Excel',
},
@@ -83,7 +83,7 @@ function appendDropdownBtn(id) {
text: 'Download CSV',
},
];
- let btnObj = new ej.splitbuttons.DropDownButton({
+ var btnObj = new ej.splitbuttons.DropDownButton({
items: ddlItems,
content: 'Download',
iconCss: 'e-icons e-download',
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-blobdata-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-blobdata-cs1/index.js
index a714ac42c..5e9b9948a 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-blobdata-cs1/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-blobdata-cs1/index.js
@@ -13,12 +13,12 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
]
}],
- beforeSave: (args) => {
+ beforeSave: function (args) {
args.needBlobData = true; // To trigger the saveComplete event.
args.isFullPost = false; // Get the spreadsheet data as blob data in the saveComplete event.
},
- saveComplete: (args) => {
+ saveComplete: function (args) {
// To obtain the blob data
console.log('Spreadsheet BlobData : ', args.blobData)
}
@@ -26,4 +26,4 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
});
// Render initialized Spreadsheet.
-spreadsheet.appendTo('#spreadsheet');
+spreadsheet.appendTo('#spreadsheet');
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-json/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-json/index.js
index b9178d3d6..5350525b1 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-json/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-json/index.js
@@ -2,7 +2,7 @@
var spreadsheet = new ej.spreadsheet.Spreadsheet({
allowOpen: true,
openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
- beforeOpen: (args) => {
+ beforeOpen: function (args) {
// your code snippets here
}
});
@@ -13,10 +13,10 @@ spreadsheet.appendTo('#spreadsheet');
var saveElement = document.getElementById("save");
if (saveElement) {
// Save button click event listener
- saveElement.onclick = () => {
+ saveElement.onclick = function () {
var valueOnlyCheckbox = document.getElementById("valueOnly").checked;
var options = valueOnlyCheckbox ? { onlyValues: true } : createOptions();
- spreadsheet.saveAsJson(options).then((response) => {
+ spreadsheet.saveAsJson(options).then(function (response) {
var formData = new FormData();
formData.append(
'JSONData',
@@ -24,26 +24,26 @@ if (saveElement) {
);
formData.append('fileName', 'Sample');
formData.append('saveType', 'Xlsx');
- formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' })),
- fetch(
- 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
- {
- method: 'POST',
- body: formData,
- }
- ).then((response) => {
- response.blob().then((data) => {
- var anchor = ej.base.createElement('a', {
- attrs: { download: 'Sample.xlsx' },
- });
- var url = URL.createObjectURL(data);
- anchor.href = url;
- document.body.appendChild(anchor);
- anchor.click();
- URL.revokeObjectURL(url);
- document.body.removeChild(anchor);
+ formData.append('pdfLayoutSettings', JSON.stringify({ fitSheetOnOnePage: false, orientation: 'Portrait' }));
+ fetch(
+ 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
+ {
+ method: 'POST',
+ body: formData
+ }
+ ).then(function (response) {
+ response.blob().then(function (data) {
+ var anchor = ej.base.createElement('a', {
+ attrs: { download: 'Sample.xlsx' }
});
+ var url = URL.createObjectURL(data);
+ anchor.href = url;
+ document.body.appendChild(anchor);
+ anchor.click();
+ URL.revokeObjectURL(url);
+ document.body.removeChild(anchor);
});
+ });
});
};
}
@@ -66,12 +66,14 @@ function createOptions() {
function toggleCheckboxes() {
var valueOnlyCheckbox = document.getElementById('valueOnly');
var checkboxes = document.querySelectorAll('#Saveasjson input[type="checkbox"]:not(#valueOnly)');
- checkboxes.forEach(checkbox => {
+ // ES5-friendly loop (NodeList.forEach may not be available in old browsers)
+ for (var i = 0; i < checkboxes.length; i++) {
+ var checkbox = checkboxes[i];
checkbox.disabled = valueOnlyCheckbox.checked;
if (valueOnlyCheckbox.checked) {
checkbox.checked = false;
}
- });
+ }
}
var valueOnlyElement = document.getElementById('valueOnly');
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-cs1/index.js
index c4a07f6ca..329bbec19 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-cs1/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-cs1/index.js
@@ -19,15 +19,15 @@ var items = [
var drpDownBtn = new ej.splitbuttons.DropDownButton({
items: items,
cssClass: "e-round-corner",
- select: (args) => {
+ select: function (args) {
if (args.item.text === 'Save As xlsx')
- spreadsheet.save({url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', fileName: "Sample", saveType: "Xlsx"});
+ spreadsheet.save({ url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', fileName: "Sample", saveType: "Xlsx" });
if (args.item.text === 'Save As xls')
- spreadsheet.save({url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', fileName: "Sample", saveType: "Xls"});
+ spreadsheet.save({ url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', fileName: "Sample", saveType: "Xls" });
if (args.item.text === 'Save As csv')
- spreadsheet.save({url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',fileName: "Sample", saveType: "Csv"});
+ spreadsheet.save({ url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', fileName: "Sample", saveType: "Csv" });
if (args.item.text === 'Save As pdf')
- spreadsheet.save({url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',fileName: "Sample", saveType: "Pdf"});
+ spreadsheet.save({ url: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save', fileName: "Sample", saveType: "Pdf" });
}
});
@@ -35,13 +35,13 @@ var drpDownBtn = new ej.splitbuttons.DropDownButton({
drpDownBtn.appendTo("#element");
-var columns = [{ width: 100 }, { width: 130 },{ width: 96},
- { width: 130 }, { width: 130 },{ width: 96},
- { width: 100 }, { width: 100 },{ width: 110}, { width: 100 }, { width: 130 },{ width: 150}]
+var columns = [{ width: 100 }, { width: 130 }, { width: 96 },
+{ width: 130 }, { width: 130 }, { width: 96 },
+{ width: 100 }, { width: 100 }, { width: 110 }, { width: 100 }, { width: 130 }, { width: 150 }]
var spreadsheet = new ej.spreadsheet.Spreadsheet({
- sheets: [{ ranges: [{ dataSource: data }], columns: columns }],
- allowSave: true
+ sheets: [{ ranges: [{ dataSource: data }], columns: columns }],
+ allowSave: true
});
//Render the initialized Spreadsheet.
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/selected-cell-values/es5-datasource.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/selected-cell-values/es5-datasource.js
index 95a2c578b..0b6a601f8 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/selected-cell-values/es5-datasource.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/selected-cell-values/es5-datasource.js
@@ -1,5 +1,5 @@
-let defaultData = [
+var defaultData = [
{
"Customer Name": "Romona Heaslip",
"Model": "Taurus",
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/selected-cell-values/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/selected-cell-values/index.js
index cd37d72bb..c471ed49b 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/selected-cell-values/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/selected-cell-values/index.js
@@ -1,5 +1,4 @@
-
-let sheet = [{
+var sheet = [{
ranges: [{ dataSource: defaultData }],
columns: [
{ width: 180 }, { width: 130 }, { width: 130 }, { width: 180 },
@@ -7,7 +6,7 @@ let sheet = [{
]
}];
-let spreadsheet = new ej.spreadsheet.Spreadsheet({
+var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: sheet,
created: function () {
// Applies cell formatting to specified range of the active sheet
@@ -17,19 +16,19 @@ let spreadsheet = new ej.spreadsheet.Spreadsheet({
spreadsheet.appendTo('#spreadsheet');
-document.getElementById("getSelectedCellValues").onclick = () => {
- let sheet = spreadsheet.getActiveSheet();
- let selectedRange = sheet.selectedRange;
- let index = ej.spreadsheet.getRangeIndexes(selectedRange);
- let cellRange = ej.spreadsheet.getSwapRange(index);
- let swappedRange = ej.spreadsheet.getRangeAddress(cellRange);
- let valueObject = [];
- let range = sheet.name + '!' + swappedRange;
- // Get the collection of selected cell values by using the getData() method.
- spreadsheet.getData(range).then((cells) => {
- cells.forEach((cell) => {
- valueObject.push(ej.base.isNullOrUndefined(cell.value) ? '' : cell.value);
- });
- console.log("Collection of selected cell values:", valueObject);
+document.getElementById("getSelectedCellValues").onclick = function () {
+ var sheet = spreadsheet.getActiveSheet();
+ var selectedRange = sheet.selectedRange;
+ var index = ej.spreadsheet.getRangeIndexes(selectedRange);
+ var cellRange = ej.spreadsheet.getSwapRange(index);
+ var swappedRange = ej.spreadsheet.getRangeAddress(cellRange);
+ var valueObject = [];
+ var range = sheet.name + '!' + swappedRange;
+ // Get the collection of selected cell values by using the getData() method.
+ spreadsheet.getData(range).then(function (cells) {
+ cells.forEach(function (cell) {
+ valueObject.push(ej.base.isNullOrUndefined(cell.value) ? '' : cell.value);
+ });
+ console.log("Collection of selected cell values:", valueObject);
});
};
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/selection-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/selection-cs1/index.js
index 5cdaa7ba5..9394217ee 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/selection-cs1/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/selection-cs1/index.js
@@ -15,7 +15,7 @@ var columns = [
var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], columns: columns }],
selectionSettings: { mode: 'Multiple' },
- created: () => {
+ created: function () {
var colCount = spreadsheet.getActiveSheet().colCount;
spreadsheet.selectRange(ej.spreadsheet.getRangeAddress([4, 0, 4, colCount]));
}
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/selection-cs2/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/selection-cs2/index.js
index e9ef12954..488b1f22d 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/selection-cs2/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/selection-cs2/index.js
@@ -15,13 +15,12 @@ var columns = [
var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [{ name: 'Budget', ranges: [{ dataSource: budgetData }], columns: columns }],
selectionSettings: { mode: 'Multiple' },
- created: () => {
+ created: function () {
spreadsheet.selectRange('B2:E6');
}
});
-
-// Render initialized Spreadsheet.
-spreadsheet.appendTo('#spreadsheet');
+// Render initialized Spreadsheet.
+spreadsheet.appendTo('#spreadsheet');
\ No newline at end of file
From c360e90bd597438e80541b5dba1c6d67176ff8b5 Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Thu, 12 Feb 2026 12:04:19 +0530
Subject: [PATCH 2/5] 1009433: Need to ensure JavaScript(ES5) Document Coding
Standards in Spreadsheet JavaScript ES5 platform
---
.../spreadsheet/javascript-es5/save-as-json/index.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-json/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-json/index.js
index 5350525b1..cde84ec18 100644
--- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-json/index.js
+++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/save-as-json/index.js
@@ -66,7 +66,6 @@ function createOptions() {
function toggleCheckboxes() {
var valueOnlyCheckbox = document.getElementById('valueOnly');
var checkboxes = document.querySelectorAll('#Saveasjson input[type="checkbox"]:not(#valueOnly)');
- // ES5-friendly loop (NodeList.forEach may not be available in old browsers)
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.disabled = valueOnlyCheckbox.checked;
From 5b5a1f1100c10f5ac1fcd72289576f003516180a Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Tue, 17 Feb 2026 15:03:10 +0530
Subject: [PATCH 3/5] 1009433: Checked and resolved the CI failures.
---
.../Javascript-ES5/docker-deployment.md | 10 +--
.../Spreadsheet/Javascript-ES5/formatting.md | 24 +++----
.../Spreadsheet/Javascript-ES5/open-save.md | 66 +++++++++----------
.../Excel/Spreadsheet/Javascript-ES5/sort.md | 24 +++----
4 files changed, 62 insertions(+), 62 deletions(-)
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
index d8c24451c..c58b55063 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
@@ -1,17 +1,17 @@
---
layout: post
-title: Docker image deployment in EJ2 Javascript Spreadsheet control | Syncfusion
-description: Learn here all about Docker image deployment in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more.
+title: Docker image deployment in EJ2 JavaScript Spreadsheet control | Syncfusion
+description: Learn here all about Docker image deployment in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Docker deployment
documentation: ug
---
-# Docker Image Overview in EJ2 Javascript Spreadsheet control
+# Docker Image Overview in EJ2 JavaScript Spreadsheet control
The [**Syncfusion® Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents.
-This Docker image is the pre-defined Docker container for Syncfusion's® Spreadsheet backend functionalities. This server-side Web API project targets ASP.NET Core 8.0.
+This Docker image is the pre-defined Docker container for Syncfusion's® Spreadsheet back-end functionalities. This server-side Web API project targets ASP.NET Core 8.0.
You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker).
@@ -57,7 +57,7 @@ docker-compose up
Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`.
-**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet control. For more information on how to get started with the Spreadsheet control, refer to this [`getting started page.`](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es5/getting-started)
+**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet control. For more information on how to get started with the Spreadsheet control, refer to this [`getting started page.`](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es5/getting-started)
```html
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/formatting.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/formatting.md
index cbd02c597..f3b6641ac 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/formatting.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/formatting.md
@@ -1,13 +1,13 @@
---
layout: post
-title: Formatting in EJ2 Javascript Spreadsheet control | Syncfusion
-description: Learn here all about Formatting in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more.
+title: Formatting in EJ2 JavaScript Spreadsheet control | Syncfusion
+description: Learn here all about Formatting in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Formatting
documentation: ug
---
-# Formatting in EJ2 Javascript Spreadsheet control
+# Formatting in EJ2 JavaScript Spreadsheet control
Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are,
* Number Formatting
@@ -16,7 +16,7 @@ Formatting options make your data easier to view and understand. The different t
## Number Formatting
-Number formatting provides a type for your data in the Spreadsheet. Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet. The different types of number formatting supported in Spreadsheet are,
+Number formatting provides a type for your data in the Spreadsheet. Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet. The different types of number formatting supported in Spreadsheet are,
| Types | Format Code | Format ID |
|---------|---------|---------|
@@ -35,7 +35,7 @@ Number formatting provides a type for your data in the Spreadsheet. Use the [`al
Number formatting can be applied in following ways,
* Using the `format` property in `cell`, you can set the desired format to each cell at initial load.
-* Using the [`numberFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#numberformat) method, you can set the number format to a cell or range of cells.
+* Using the [`numberFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#numberformat) method, you can set the number format to a cell or range of cells.
* Selecting the number format option from ribbon toolbar.
@@ -86,7 +86,7 @@ The different types of custom number format populated in the custom number forma
Custom Number formatting can be applied in following ways,
-* Using the [`numberFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#numberformat) method, you can set your own custom number format to a cell or range of cells.
+* Using the [`numberFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#numberformat) method, you can set your own custom number format to a cell or range of cells.
* Selecting the custom number format option from custom number formats dialog or type your own format in dialog input and then click apply button. It will apply the custom format for selected cells.
@@ -113,7 +113,7 @@ Compared to Excel, the date, time, currency, and accounting formats vary across
> The format code should use the default decimal separator (.) and group separator (,).
-The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German (de)` culture.
+The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German` culture.
```js
var deLocaleFormats = [
@@ -157,9 +157,9 @@ The following code example demonstrates how to configure culture-based formats f
## Text and cell formatting
-Text and cell formatting enhances the look and feel of your cell. It helps to highlight a particular cell or range of cells from a whole workbook. You can apply formats like font size, font family, font color, text alignment, border etc. to a cell or range of cells. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowcellformatting) property to enable or disable the text and cell formatting option in Spreadsheet. You can set the formats in following ways,
+Text and cell formatting enhances the look and feel of your cell. It helps to highlight a particular cell or range of cells from a whole workbook. You can apply formats like font size, font family, font color, text alignment, border etc. to a cell or range of cells. Use the [`allowCellFormatting`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowcellformatting) property to enable or disable the text and cell formatting option in Spreadsheet. You can set the formats in following ways,
* Using the `style` property, you can set formats to each cell at initial load.
-* Using the [`cellFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#cellformat) method, you can set formats to a cell or range of cells.
+* Using the [`cellFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#cellformat) method, you can set formats to a cell or range of cells.
* You can also apply by clicking the desired format option from the ribbon toolbar.
### Fonts
@@ -234,7 +234,7 @@ The following features are not supported in Formatting:
## Conditional Formatting
-Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowConditionalFormat) property.
+Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowConditionalFormat) property.
> The default value for the `allowConditionalFormat` property is `true`.
@@ -244,7 +244,7 @@ You can apply conditional formatting by using one of the following ways,
* Select the conditional formatting icon in the Ribbon toolbar under the Home Tab.
-* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#conditionalFormat) method to define the condition.
+* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#conditionalFormat) method to define the condition.
* Using the `conditionalFormats` in sheets model.
@@ -312,7 +312,7 @@ You can clear the defined rules by using one of the following ways,
* Using the “Clear Rules” option in the Conditional Formatting button of HOME Tab in the ribbon to clear the rule from selected cells.
-* Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#clearConditionalFormat) method to clear the defined rules.
+* Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#clearConditionalFormat) method to clear the defined rules.
{% tabs %}
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md
index 01365b60d..7f76c4c6a 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md
@@ -1,25 +1,25 @@
---
layout: post
-title: Open save in EJ2 Javascript Spreadsheet control | Syncfusion
-description: Learn here all about Open save in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more.
+title: Open save in EJ2 JavaScript Spreadsheet control | Syncfusion
+description: Learn here all about Open save in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Open save
documentation: ug
---
-# Open save in EJ2 Javascript Spreadsheet control
+# Open save in EJ2 JavaScript Spreadsheet control
The native data format for Spreadsheet is `JSON`. When you open an excel file, it needs to be read and converted to client side Spreadsheet model. The converted client side Spreadsheet model is sent as JSON which is used to render Spreadsheet. Similarly, when you save the Spreadsheet, the client Spreadsheet model is sent to the server as JSON for processing and saved as Excel file formats. [`Server configuration`](./open-save#server-configuration) is used for this process.
## Open
-The Spreadsheet control opens an Excel document with its data, style, format, and more. To enable this feature, set [`allowOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowopen) as `true` and assign service url to the [`openUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openurl) property.
+The Spreadsheet control opens an Excel document with its data, style, format, and more. To enable this feature, set [`allowOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowopen) as `true` and assign service url to the [`openUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openurl) property.
**User Interface**:
In user interface you can open an Excel document by clicking `File > Open` menu item in ribbon.
-The following sample shows the `Open` option by using the [`openUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openurl) property in the Spreadsheet control. You can also use the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforeopen) event to trigger before opening an Excel file.
+The following sample shows the `Open` option by using the [`openUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openurl) property in the Spreadsheet control. You can also use the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforeopen) event to trigger before opening an Excel file.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -41,11 +41,11 @@ Please find the below table for the beforeOpen event arguments.
| requestData | object | To provide the Form data. |
> * Use `Ctrl + O` keyboard shortcut to open Excel documents.
-> * The default value of the [allowOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowopen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowopen) property in previous code snippet.
+> * The default value of the [allowOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowopen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowopen) property in previous code snippet.
### Open an excel file using a file uploader
-If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/javascript/documentation/api/uploader/#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#open) method to see the appropriate output.
+If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/javascript/documentation/api/uploader#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) method to see the appropriate output.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -60,7 +60,7 @@ If you explore your machine to select and upload an excel document using the fil
### Open an external URL excel file while initial load
-You can achieve to access the remote excel file by using the [`created`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#created) event. In this event you can fetch the excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#open) this file by using Spreadsheet component open method.
+You can achieve to access the remote excel file by using the [`created`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#created) event. In this event you can fetch the excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) this file by using Spreadsheet component open method.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -75,7 +75,7 @@ You can achieve to access the remote excel file by using the [`created`](https:/
### Open an excel file from blob data
-By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#open) method in the Spreadsheet control to load that `File` object.
+By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) method in the Spreadsheet control to load that `File` object.
Please find the code to fetch the blob data and load it into the Spreadsheet control below.
@@ -92,7 +92,7 @@ Please find the code to fetch the blob data and load it into the Spreadsheet con
### Open an Excel file located on a server
-By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method to load that `JSON data` into the Spreadsheet control.
+By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method to load that `JSON data` into the Spreadsheet control.
**Server Endpoint**:
@@ -151,9 +151,9 @@ Before proceeding with the opening process, you should deploy the spreadsheet op
[How to deploy a spreadsheet open and save web API service to AWS Lambda](https://support.syncfusion.com/kb/article/17184/how-to-deploy-a-spreadsheet-open-and-save-web-api-service-to-aws-lambda)
-After deployment, you will get the AWS service URL for the open and save actions. Before opening the Excel file with this hosted open URL, you need to prevent the default file opening process to avoid getting a corrupted file on the open service end. The spreadsheet component appends the file to the `formData` and sends it to the open service, which causes the file to get corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforeopen) event. After that, you will get the selected file in the `beforeOpen` event argument. Then, convert this file into a base64 string and send it to the open service URL using a fetch request.
+After deployment, you will get the AWS service URL for the open and save actions. Before opening the Excel file with this hosted open URL, you need to prevent the default file opening process to avoid getting a corrupted file on the open service end. The spreadsheet component appends the file to the `formData` and sends it to the open service, which causes the file to get corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforeopen) event. After that, you will get the selected file in the `beforeOpen` event argument. Then, convert this file into a base64 string and send it to the open service URL using a fetch request.
-On the open service end, convert the base64 string back to a file and pass it as an argument to the workbook `Open` method. The open service will process the file and return the spreadsheet data in JSON format. You will then receive this JSON data in the fetch success callback. Finally, use the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method to load this JSON data into the spreadsheet component.
+On the open service end, convert the base64 string back to a file and pass it as an argument to the workbook `Open` method. The open service will process the file and return the spreadsheet data in JSON format. You will then receive this JSON data in the fetch success callback. Finally, use the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method to load this JSON data into the spreadsheet component.
The following code example shows how to open an Excel file using a hosted web service in AWS Lambda, as mentioned above.
@@ -232,7 +232,7 @@ public class OpenOptions
### Open an excel file from Base64 string data
-In the Syncfusion® Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#open) method in the spreadsheet.
+In the Syncfusion® Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) method in the spreadsheet.
The following code example shows how to save the spreadsheet data as base64 string.
@@ -249,7 +249,7 @@ The following code example shows how to save the spreadsheet data as base64 stri
### Open excel file into a read-only mode
-You can open excel file into a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#lockcells) methods.
+You can open excel file into a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#lockcells) methods.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -264,7 +264,7 @@ You can open excel file into a read-only mode by using the [`openComplete`](http
### Configure JSON deserialization options
-Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet.
+Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet.
Now, you have the option to selectively ignore some features during the opening of the JSON object by configuring deserialization options and passing them as arguments to the `openFromJson` method. This argument is optional, and if not configured, the entire workbook JSON object will be loaded without ignoring any features.
@@ -335,7 +335,7 @@ public IActionResult Open(IFormCollection openRequest)
When opening large Excel files with many features and data, the server response can become very large. This might cause memory issues or connection problems during data transmission. The `Chunk Response Processing` feature solves this by dividing the server response into smaller parts, called chunks, and sending them to the client in parallel. The client receives these chunks and combines them to load the Excel data smoothly into the spreadsheet.
-You can enable this feature by setting the [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings/#chunksize) property in the [`openSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#opensettings) object. Set the [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings/#chunksize) to a value greater than 0 (in bytes). The [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings/#chunksize) defines how large each chunk will be. Make sure your server supports chunked responses to use this feature effectively.
+You can enable this feature by setting the [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings#chunksize) property in the [`openSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#opensettings) object. Set the [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings#chunksize) to a value greater than 0 (in bytes). The [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings#chunksize) defines how large each chunk will be. Make sure your server supports chunked responses to use this feature effectively.
> This feature reduces memory usage on both the server and client, ensuring that resources are managed efficiently during data transmission. By sending smaller parts of data, it prevents connection issues that could occur with large payloads, making the transmission process more reliable. Additionally, it allows large Excel files to be loaded smoothly into the spreadsheet, providing a seamless user experience even with extensive data.
@@ -391,7 +391,7 @@ The [attachment](https://www.syncfusion.com/downloads/support/directtrac/general
### Add custom header during open
-You can add your own custom header to the open action in the Spreadsheet. For processing the data, it has to be sent from server to client side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforeopen) event, the custom header can be added to the request during open action.
+You can add your own custom header to the open action in the Spreadsheet. For processing the data, it has to be sent from server to client side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforeopen) event, the custom header can be added to the request during open action.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -426,21 +426,21 @@ public IActionResult Open(IFormCollection openRequest)
The following list of Excel file formats are supported in Spreadsheet:
-* MS Excel (.xlsx)
-* MS Excel 97-2003 (.xls)
+* Microsoft Excel (.xlsx)
+* Microsoft Excel 97-2003 (.xls)
* Comma Separated Values (.csv)
* Excel Macro-Enabled Workbook (.xlsm)
* Excel Binary Workbook(.xlsb)
## Save
-The Spreadsheet control saves its data, style, format, and more as Excel file document. To enable this feature, set [`allowSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowsave) as `true` and assign service url to the [`saveUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#saveurl) property.
+The Spreadsheet control saves its data, style, format, and more as Excel file document. To enable this feature, set [`allowSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowsave) as `true` and assign service url to the [`saveUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveurl) property.
**User Interface**:
In user interface, you can save Spreadsheet data as Excel document by clicking `File > Save As` menu item in ribbon.
-The following sample shows the `Save` option by using the [`saveUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#saveurl) property in the Spreadsheet control. You can also use the [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforesave) event to trigger before saving the Spreadsheet as an Excel file.
+The following sample shows the `Save` option by using the [`saveUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveurl) property in the Spreadsheet control. You can also use the [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event to trigger before saving the Spreadsheet as an Excel file.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -467,12 +467,12 @@ Please find the below table for the beforeSave event arguments.
> * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file.
-> * The default value of [allowSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowsave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowsave) property in previous code snippet.
+> * The default value of [allowSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowsave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowsave) property in previous code snippet.
> * Demo purpose only, we have used the online web service url link.
### Save an excel file as blob data
-By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#savecomplete) event. You can then post the blob data to the server endpoint for saving.
+By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#savecomplete) event. You can then post the blob data to the server endpoint for saving.
Please find below the code to retrieve blob data from the Spreadsheet control below.
@@ -489,7 +489,7 @@ Please find below the code to retrieve blob data from the Spreadsheet control be
### Save an Excel file to a server
-By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location.
+By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location.
**Client Side**:
@@ -560,7 +560,7 @@ Before proceeding with the save process, you should deploy the spreadsheet open/
[How to deploy a spreadsheet open and save web API service to AWS Lambda](https://support.syncfusion.com/kb/article/17184/how-to-deploy-a-spreadsheet-open-and-save-web-api-service-to-aws-lambda)
-After deployment, you will get the AWS service URL for the open and save actions. Before saving the Excel file with this hosted save URL, you need to prevent the default save action to avoid getting a corrupted excel file on the client end. The save service returns the file stream as a result to the client, which can cause the file to become corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforesave) event. After that, convert the spreadsheet data into JSON format using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#saveasjson) method in the `beforeSave` event and send it to the save service endpoint URL using a fetch request.
+After deployment, you will get the AWS service URL for the open and save actions. Before saving the Excel file with this hosted save URL, you need to prevent the default save action to avoid getting a corrupted excel file on the client end. The save service returns the file stream as a result to the client, which can cause the file to become corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event. After that, convert the spreadsheet data into JSON format using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) method in the `beforeSave` event and send it to the save service endpoint URL using a fetch request.
On the server side, the save service will take the received JSON data, pass it to the workbook `Save` method, and return the result as a base64 string. The fetch success callback will receive the Excel file in base64 string format on the client side. Finally, you can then convert the base64 string back to a file on the client end to obtain a non-corrupted Excel file.
@@ -644,7 +644,7 @@ public string Save([FromForm]SaveSettings saveSettings)
In the Spreadsheet control, there is currently no direct option to save data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`.
-> You can get the Spreadsheet data as blob in the [saveComplete](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#savecomplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforesave) event.
+> You can get the Spreadsheet data as blob in the [saveComplete](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#savecomplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event.
The following code example shows how to save the spreadsheet data as base64 string.
@@ -661,7 +661,7 @@ The following code example shows how to save the spreadsheet data as base64 stri
### Configure JSON serialization options
-Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#saveasjson) method, the entire workbook with all loaded features were processed and saved as a JSON object.
+Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) method, the entire workbook with all loaded features were processed and saved as a JSON object.
Now, you have the option to selectively ignore some features while saving the Spreadsheet as a JSON object by configuring serialization options and passing them as arguments to the `saveAsJson` method. This argument is optional, and if not configured, the entire workbook JSON object will be saved without ignoring any features.
@@ -698,7 +698,7 @@ The following code snippet demonstrates how to configure the serialization optio
### Send and receive custom params from client to server
-Passing the custom parameters from client to server by using [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforesave) event.
+Passing the custom parameters from client to server by using [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event.
{% tabs %}
@@ -725,7 +725,7 @@ Server side code snippets:
### Add custom header during save
-You can add your own custom header to the save action in the Spreadsheet. For processing the data, it has to be sent from client to server side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`fileMenuItemSelect`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#filemenuitemselect) event, the custom header can be added to the request during save action.
+You can add your own custom header to the save action in the Spreadsheet. For processing the data, it has to be sent from client to server side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`fileMenuItemSelect`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#filemenuitemselect) event, the custom header can be added to the request during save action.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -740,7 +740,7 @@ You can add your own custom header to the save action in the Spreadsheet. For pr
### Change the PDF orientation
-By default, the PDF document is created in **Portrait** orientation. You can change the orientation of the PDF document by using the `args.pdfLayoutSettings.orientation` argument settings in the [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforesave) event.
+By default, the PDF document is created in **Portrait** orientation. You can change the orientation of the PDF document by using the `args.pdfLayoutSettings.orientation` argument settings in the [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event.
The possible values are:
@@ -762,14 +762,14 @@ The possible values are:
The following list of Excel file formats are supported in Spreadsheet:
-* MS Excel (.xlsx)
-* MS Excel 97-2003 (.xls)
+* Microsoft Excel (.xlsx)
+* Microsoft Excel 97-2003 (.xls)
* Comma Separated Values (.csv)
* Portable Document Format (.pdf)
### Methods
-To save the Spreadsheet document as an `xlsx, xls, csv, or pdf` file, by using [`save`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#save) method should be called with the `url`, `fileName` and `saveType` as parameters. The following code example shows to save the spreadsheet file as an `xlsx, xls, csv, or pdf` in the button click event.
+To save the Spreadsheet document as an `xlsx, xls, csv, or pdf` file, by using [`save`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#save) method should be called with the `url`, `fileName` and `saveType` as parameters. The following code example shows to save the spreadsheet file as an `xlsx, xls, csv, or pdf` in the button click event.
{% tabs %}
{% highlight js tabtitle="index.js" %}
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/sort.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/sort.md
index 8a7f9c441..028bd5cf1 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/sort.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/sort.md
@@ -1,15 +1,15 @@
---
layout: post
-title: Sort in EJ2 Javascript Spreadsheet control | Syncfusion
-description: Learn here all about Sort in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more.
+title: Sort in EJ2 JavaScript Spreadsheet control | Syncfusion
+description: Learn here all about Sort in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Sort
documentation: ug
---
-# Sort in EJ2 Javascript Spreadsheet control
+# Sort in EJ2 JavaScript Spreadsheet control
-Sorting helps arranging the data to a specific order in a selected range of cells. You can use the [`allowSorting`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowsorting) property to enable or disable sorting functionality.
+Sorting helps arranging the data to a specific order in a selected range of cells. You can use the [`allowSorting`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowsorting) property to enable or disable sorting functionality.
> * The default value for `allowSorting` property is `true`.
@@ -20,7 +20,7 @@ By default, the `sort` module is injected internally into Spreadsheet to perform
In the active Spreadsheet, select a range of cells to sort by cell value. The range sort can be done by any of the following ways:
* Select the sort item in the Ribbon toolbar and choose the ascending or descending item.
* Right-click the sheet, select the sort item in the context menu and choose the ascending/descending item.
-* Use the [`sort()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#sort) method programmatically.
+* Use the [`sort()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sort) method programmatically.
The cell values can be sorted in the following orders:
* Ascending
@@ -30,8 +30,8 @@ The cell values can be sorted in the following orders:
The `sort()` method with empty arguments will sort the selected range by active cell’s column as sort column in ascending order.
-> * The [`beforeSort`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforesort) event will be triggered before sorting the specified range.
-> * The [`sortComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#sortcomplete) event will be triggered after the sort action is completed successfully.
+> * The [`beforeSort`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesort) event will be triggered before sorting the specified range.
+> * The [`sortComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortcomplete) event will be triggered after the sort action is completed successfully.
The following code example shows `Sort` functionality in the Spreadsheet control.
@@ -48,7 +48,7 @@ The following code example shows `Sort` functionality in the Spreadsheet control
## Data contains header
-You can specify whether the selected range of cells contains header. To specify, you need to set the [`containsHeader`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#containsheader) property to `true` and pass it as `sortOption` arguments of the sort() method.
+You can specify whether the selected range of cells contains header. To specify, you need to set the [`containsHeader`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#containsheader) property to `true` and pass it as `sortOption` arguments of the sort() method.
> * If the `containsHeader` property is not set and active cell column’s first cell value type is differed from the second cell value type, the first row data in the range are marked as column headers.
@@ -69,7 +69,7 @@ In the custom sort dialog, the `Data contains header` checkbox is checked on loa
## Case sensitive sort
-The default sort functionality of Spreadsheet is a case insensitive sorting. When you want to perform sorting with case sensitive, you need to set the [`caseSensitive`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#caseSensitive) property to `true` and pass it as `sortOption` arguments of the sort() method.
+The default sort functionality of Spreadsheet is a case insensitive sorting. When you want to perform sorting with case sensitive, you need to set the [`caseSensitive`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#caseSensitive) property to `true` and pass it as `sortOption` arguments of the sort() method.
Case sensitive sorting is applicable only for cells with alphabets. In ascending order sorting with case sensitive enabled, the cells with lower case text will be placed above the cells with upper case text.
@@ -104,13 +104,13 @@ The custom sort dialog helps sorting multiple columns in the selected range by u
You can add multiple criteria using the `Add Column` button at the bottom of the dialog. Thus, multiple columns can be specified with different sort order. The newly added sort criteria items can be removed using the `delete` icons at the end of each items.
-You can refer to the [`Data contains header`](./sort/#data-contains-header) topic to learn more about `Data contains header` checkbox. To learn more about `Case sensitive` checkbox, you can refer to [`Case sensitive sort`](./sort/#case-sensitive-sort) topic.
+You can refer to the [`Data contains header`](./sort#data-contains-header) topic to learn more about `Data contains header` checkbox. To learn more about `Case sensitive` checkbox, you can refer to [`Case sensitive sort`](./sort#case-sensitive-sort) topic.
### Passing sort criteria manually
The multi-column sorting can also be performed manually by passing sort options to the `sort()` method programmatically. The `sortOption` have the following arguments:
-* [`sortDescriptors`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#sortdescriptors) – Sort criteria collection that holds the collection of field name, sort order, and [`sortComparer`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#sortcomparer).
+* [`sortDescriptors`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortdescriptors) – Sort criteria collection that holds the collection of field name, sort order, and [`sortComparer`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortcomparer).
* `containsHeader` – Boolean argument that specifies whether the range has headers in it.
* `caseSensitive` – Boolean argument that specifies whether the range needs to consider case.
@@ -131,7 +131,7 @@ The multi-column sorting can also be performed manually by passing sort options
## Custom sort comparer
-The [`sortDescriptor`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#sortdescriptors) holds the [`sortComparer`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#sortcomparer) property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each `sortDescriptor` can be customized using the custom sort comparer function.
+The [`sortDescriptor`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortdescriptors) holds the [`sortComparer`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortcomparer) property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each `sortDescriptor` can be customized using the custom sort comparer function.
By customizing sort comparer, you can define the sort action as desired.
From 051ab5a1139c642db968d0ec2bc3f0afc44e0ee2 Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Tue, 17 Feb 2026 15:10:21 +0530
Subject: [PATCH 4/5] 1009433: Checked and resolved the CI failures.
---
.../Excel/Spreadsheet/Javascript-ES5/docker-deployment.md | 2 +-
.../Spreadsheet/Javascript-ES5/performance-best-practices.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
index c58b55063..d57aa6f03 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Docker image deployment in EJ2 JavaScript Spreadsheet control | Syncfusion
+title: Docker image deployment in EJ2 JavaScript Spreadsheet | Syncfusion
description: Learn here all about Docker image deployment in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Docker deployment
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md
index c25242c67..6b54b3630 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Performance best practices in EJ2 Javascript Spreadsheet Control | Syncfusion
+title: Performance best practices in EJ2 Javascript Spreadsheet | Syncfusion
description: Learn here all about how to optimize the performance EJ2 Javascript Spreadsheet control, its elements and more.
platform: document-processing
control: Performance
From 226e64fe6b68afcf91c11dc563229e9a00d4a69c Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Tue, 17 Feb 2026 16:37:10 +0530
Subject: [PATCH 5/5] 1009433: Checked and resolved the CI failures.
---
.../performance-best-practices.md | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md
index 6b54b3630..d48ebfe56 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/performance-best-practices.md
@@ -1,13 +1,13 @@
---
layout: post
-title: Performance best practices in EJ2 Javascript Spreadsheet | Syncfusion
-description: Learn here all about how to optimize the performance EJ2 Javascript Spreadsheet control, its elements and more.
+title: Performance best practices in EJ2 JavaScript Spreadsheet | Syncfusion
+description: Learn here all about how to optimize the performance EJ2 JavaScript Spreadsheet control, its elements and more.
platform: document-processing
control: Performance
documentation: ug
---
-# Performance Best Practices in EJ2 Javascript Spreadsheet Control
+# Performance Best Practices in EJ2 JavaScript Spreadsheet Control
Performance optimization is crucial when working with large datasets in the [Syncfusion® JavaScript Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor). This documentation outlines best practices to enhance data handling efficiency and ensure a smooth, responsive user experience during various spreadsheet operations.
@@ -32,11 +32,11 @@ To enable the chunk response processing feature, you can refer to the following
### Configure JSON serialization options during open
-Serialization options in the EJ2 Spreadsheet allow you to exclude specific features—such as styles, formats, charts, images, wrap, etc.—from the `Workbook JSON object` when opening it in the Spreadsheet using the [`openFromJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks.
+Serialization options in the EJ2 Spreadsheet allow you to exclude specific features—such as styles, formats, charts, images, wrap, etc.—from the `Workbook JSON object` when opening it in the Spreadsheet using the [`openFromJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks.
This is particularly useful when:
* You need only the raw data without formatting.
-* You're opening the `Workbook JSON object` in the Spreadsheet using the [`openFromJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method.
+* You're opening the `Workbook JSON object` in the Spreadsheet using the [`openFromJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method.
* You want to minimize the size of the JSON payload and optimize processing speed.
Refer to the following UG section to learn how to configure these options:
@@ -103,7 +103,7 @@ To learn more about Manual Calculation Mode and how to enable it, you can refer
When saving large Excel files with extensive data and features using **File → Save As** or the **save** method, the Spreadsheet triggers a server API call through a form submit operation. This can lead to performance issues such as timeouts or delays, particularly due to the size and complexity of the workbook.
-To mitigate these issues during the save operation, you can set the [`isFullPost`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/beforeSaveEventArgs/#isfullpost) property to **false** in the [`beforeSave`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#beforesave) event of the Spreadsheet.
+To mitigate these issues during the save operation, you can set the [`isFullPost`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/beforeSaveEventArgs#isfullpost) property to **false** in the [`beforeSave`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event of the Spreadsheet.
The following code example shows how to set `isFullPost` to **false** in the Spreadsheet component:
@@ -117,11 +117,11 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({
### Configure JSON serialization options during save
-Serialization options in the EJ2 Spreadsheet allow you to exclude specific features such as styles, formats, charts, images, wrap, etc. from the `Workbook JSON object` when saving it using the [`saveAsJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#saveasjson) method in the Spreadsheet. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks.
+Serialization options in the EJ2 Spreadsheet allow you to exclude specific features such as styles, formats, charts, images, wrap, etc. from the `Workbook JSON object` when saving it using the [`saveAsJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) method in the Spreadsheet. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks.
This is particularly useful when:
* You need only the raw data without formatting.
-* You're saving the `Workbook JSON object` using the [`saveAsJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#saveasjson) method in the Spreadsheet.
+* You're saving the `Workbook JSON object` using the [`saveAsJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) method in the Spreadsheet.
* You want to minimize the size of the JSON payload and optimize processing speed.
Proper use of serialization options during save improves performance and reduces the time taken during the save process.
@@ -136,7 +136,7 @@ Refer to the following UG section to learn how to configure these options:
When working with large datasets in the EJ2 Spreadsheet, user interactions such as selecting a large range of cells can experience delays. This occurs because, by default, the Spreadsheet performs aggregate calculations (e.g., SUM, AVERAGE, COUNT, MIN, and MAX) on the selected range and displays the results in the sheet tab panel at the bottom-right corner.
-To enhance the responsiveness of cell selection, particularly in performance-critical scenarios, consider disabling unnecessary aggregate calculations using the [`showAggregate`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#showaggregate) property.
+To enhance the responsiveness of cell selection, particularly in performance-critical scenarios, consider disabling unnecessary aggregate calculations using the [`showAggregate`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#showaggregate) property.
Benefits:
* Reduces selection lag when dealing with large data ranges.