Search results

Migration from Essential JS 1 in JavaScript Spreadsheet control

20 Apr 2021 / 23 minutes to read

This article describes the API migration process of the Spreadsheet component from Essential JS 1 to Essential JS 2.

Editing

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the editing feature Property: allowEditing

new ej.Spreadsheet($("#sheet"), { allowEditing: true });
Property: allowEditing

let spreadsheet: Spreadsheet = new Spreadsheet({ allowEditing: true });
spreadsheet.appendTo('#sheet');
Edit a particular cell Method: XLEdit.editCell

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLEdit.editCell(1, 1);
Method: startEdit

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.selectRange('A1'); ssObj.startEdit();
Save the edited cell value Method: XLEdit.saveCell

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLEdit.saveCell();
Method: endEdit

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.endEdit();
Update a particular cell value Method: XLEdit.updateCell

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLEdit.updateCell({rowIndex: 1, colIndex: 1}, "product");
Method: updateCell

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.updateCell({ value: 'product' }, 'A1');
 Triggers when the cell is edited  Event: cellEdit 

new ej.Spreadsheet($("#sheet"), { cellEdit: (args) => { } });
 Event: cellEdit 

new Spreadsheet({ cellEdit: (args) => { } });
 Triggers when the edited cell is saved  Event: cellSave 

new ej.Spreadsheet($("#sheet"), { cellSave: (args) => { } });
 Event: cellSave 

new Spreadsheet({ cellSave: (args) => { } });

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the selection feature Property: allowSelection

new ej.Spreadsheet($("#sheet"), { allowSelection: true });
Property: selectionSettings.mode

new Spreadsheet({ selectionSettings: { mode: 'Multiple' } });
Defines active cell in the sheet Property: selectionSettings.activeCell

new ej.Spreadsheet($("#sheet"), { selectionSettings: { activeCell: "A1" } });
Property: activeCell

new Spreadsheet({ sheets: [{ activeCell: "A1 }] });
Set selection unit Property: selectionSettings.selectionUnit

new ej.Spreadsheet($("#sheet"), { selectionSettings: { selectionUnit: ej.Spreadsheet.SelectionUnit.Single } });
Property: selectionSettings.mode

new Spreadsheet({ selectionSettings: { mode: 'Single' } });
Select the specified range of cells Method: XLSelection.selectRange

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSelection.selectRange("A1:B2");
Method: selectRange

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.selectRange("A1:B2");
Select a cell or range Method: performSelection

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.performSelection("B1:C3");
Method: selectRange

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.selectRange("B1:C3");
 Triggers before the cell selection  Event: beforeCellSelect 

new ej.Spreadsheet($("#sheet"), { beforeCellSelect: (args) => { } });
 Event: beforeSelect 

new Spreadsheet({ beforeSelect: (args) => { } });
 Triggers when the cell is selected  Event: cellSelected 

new ej.Spreadsheet($("#sheet"), { cellSelected: (args) => { } });
 Event: select 

new Spreadsheet({ select: (args) => { } });

Clipboard

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the clipboard feature Property: allowClipboard

new ej.Spreadsheet($("#sheet"), { allowClipboard: true });
Property: enableClipboard

new Spreadsheet({ enableClipboard: true });
Copy the selected cells Method: XLClipboard.copy

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLClipboard.copy();
Method: copy

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.copy("A1");
Cut the selected cells Method: XLClipboard.cut

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLClipboard.cut();
Method: cut

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.cut("A1");
Paste the cut or copied cells data Method: XLClipboard.paste

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLClipboard.paste();
Method: paste

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.paste("B1");

Formulas

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the formula bar Property: allowFormulaBar

new ej.Spreadsheet($("#sheet"), { allowFormulaBar: true });
Property: showFormulaBar

new Spreadsheet({ showFormulaBar: true });
Set name manager Property: nameManager

`new ej.Spreadsheet($(“#sheet”), { nameManager: [{ name: “inputRange”, refersto: “=Sheet1!$A2.
:$A” }] });| **Property:** *definedNames* <br><br>new Spreadsheet({ definedNames: [{ name: ‘namedRange1’, refersTo: ‘Sheet1!A1:B5’ }] });`
Add the custom formulas Property: customFormulas

new ej.Spreadsheet($("#sheet"), { customFormulas: [{ formulaName:"CUSTOMTOTAL", functionName:"customTotal" }] });
function customTotal(args) { }
Method: addCustomFunction

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.addCustomFunction("CustomFuntion", "SQRT");
window.CustomFuntion = num => Math.sqrt(num);
Method to Add custom formulas Method: addCustomFormula

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.addCustomFormula("CUSTOMTOTAL", "customTotal");
function customTotal(args){ }
Method: addCustomFunction

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.addCustomFunction("CustomFuntion", "SQRT");
window.CustomFuntion = num => Math.sqrt(num);
Add a name for a range in the name manager Method: XLRibbon.addNamedRange

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.addNamedRange("PRICE_LIST", "=Sheet1!$A:$A$7");
Method: addDefinedName

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.addDefinedName({name: 'value', refersTo: '=Sheet1!B2' });
Delete the defined name for a range in the name manager Method: XLRibbon.removeNamedRange

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.removeNamedRange("PRICE_LIST");
Method: removeDefinedName

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.removeDefinedName('value');

Formatting

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the cell format feature Property: allowCellFormatting

new ej.Spreadsheet($("#sheet"), { allowCellFormatting: true });
Property: allowCellFormatting

new Spreadsheet({ allowCellFormatting: true });
Enables or disables the conditional format feature Property: allowConditionalFormats

new ej.Spreadsheet($("#sheet"), { allowConditionalFormats: true });
Property: allowConditionalFormat

new Spreadsheet({ allowConditionalFormat: true });
Enables or disables the cell border feature Property: formatSettings.allowCellBorder

new ej.Spreadsheet($("#sheet"), { formatSettings: { allowCellBorder: true } });
By default, it is enabled by enabling the allowCellFormatting property
Enables or disables the decimal places Property: formatSettings.allowDecimalPlaces

new ej.Spreadsheet($("#sheet"), { formatSettings: { allowDecimalPlaces: true } });
By default, it is enabled by enabling the allowNumberFormatting property
Specifies the conditional formatting for the range of cells Property: sheets.cFormatRule

new ej.Spreadsheet($("#sheet"), { sheets: [{ cFormatRule: [{ action: ej.Spreadsheet.CFormatRule.LessThan, inputs: ["30"], color: ej.Spreadsheet.CFormatHighlightColor.RedFillwithDarkRedText, range: "A1:E1" }] }] });
Property: sheets.conditionalFormats

new Spreadsheet({ sheets: [{ conditionalFormats: [{ type: "GreaterThan", cFColor: "RedFT", value: 700, range: "B2:B9" }] }] });
Clear the applied conditional formatting rules Method: XLCFormat.clearCF

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCFormat.clearCF([1, 0, 7, 0]);
Method: clearConditionalFormat

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.clearConditionalFormat("A1:B3");
Set the conditional formatting rule Method: XLCFormat.setCFRule

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCFormat.setCFRule({ action: "lessthan", inputs: ["30"], color: "yellowft", range: "H3:H7" });
Method: conditionalFormat

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.conditionalFormat({type:"GreaterThan" cFColor:"RedFT" value:"700", range:"B2:B9"});
Set format style for the range of cells Method: XLFormat.format

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLFormat.format({style:{ "background-color": "#C0C0C0"}}, "A1:C10");
Method: cellFormat

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
 Triggers before formatting the cells  Event: beforeCellFormat 

new ej.Spreadsheet($("#sheet"), { beforeCellFormat: (args) => { } });
 Event: beforeCellFormat 

new Spreadsheet({ beforeCellFormat: (args) => { } });
Specifies the border for the cell Property: sheets.border

new ej.Spreadsheet($("#sheet"), { sheets: [{ border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }] }] });
Property: sheets.rows.cells.border

new Spreadsheet({ sheets: [{ rows: [{ cells: [{ border: '1px solid #456534' }] }] }] });
Set border for the specified range of cells Method: setBorder

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.setBorder({ style: "solid", type: "outside", color: "#000000"}, "B2:B6");
Method: setBorder

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.setBorder({ border: "1px solid #000000" }, "B2:B6", "Outer");

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the filtering feature Property: allowFiltering

new ej.Spreadsheet($("#sheet"), { allowFiltering: true });
Property: allowFiltering

new Spreadsheet({ allowFiltering: true });
Clear the filter in the filtered columns Method: XLFilter.clearFilter

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLFilter.clearFilter();
Method: clearFilter

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.clearFilter();
Apply filter for the specified range of cells Method: XLFilter.filter

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLFilter.filter("A3:C8");
Method: applyFilter

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.applyFilter([{ field: 'E', operator: 'equal', value: '20' }], 'A1:H1');

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the sorting feature Property: allowSorting

new ej.Spreadsheet($("#sheet"), { allowSorting: true });
Property: allowSorting

new Spreadsheet({ allowSorting: true });
Sort a particular range of cells based on its values Method: XLSort.sortByRange

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSort.sortByRange("A1:D3", "B", "ascending");
Method: sort

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.sort({ sortDescriptors: { order: 'Ascending' }, containsHeader: true}, 'A1:H11');
Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the hyperlink feature Property: allowHyperlink

new ej.Spreadsheet($("#sheet"), { allowHyperlink: true });
Property: allowHyperlink

new Spreadsheet({ allowHyperlink: true });
Remove the hyperlink in the specified cells Method: removeHyperlink

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.removeHyperlink("A2:A3");
Method: removeHyperlink

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.removeHyperlink("A2:A3");
Set the hyperlink in the specified cells Method: setHyperlink

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.setHyperlink("A2:A3",{"cellAddr":"A2:A8"}, 3);
Method: addHyperlink

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.addHyperlink({ address: 'B2' }, 'A1');

Protection

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the lock cell feature Property: allowLockCell

new ej.Spreadsheet($("#sheet"), { allowLockCell: true });
By default, it is enabled.
Protect or Unprotect the active sheet Method: protectSheet

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.protectSheet();
Method: protectSheet

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.protectSheet(0, {});
Lock or Unlock the range of cells Method: lockCells

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.lockCells("A3:B5", true);
Method: lockCells

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.lockCells("A3:B5", true);

Find and Replace

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the find & replace feature Property: allowSearching

new ej.Spreadsheet($("#sheet"), { allowSearching: true });
Property: allowFindAndReplace

new Spreadsheet({ allowFindAndReplace: true });
Find the next occurrence of the given value Method: XLSearch.findNext

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSearch.findNext("g", {isCSen: false, isEMatch: false, type: "value", mode: "sheet", searchBy: "rows"}, 1);
Method: find

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.find({ value: "Jenna Schoolfield", sheetIndex: 1, findOpt: "next", mode: "Sheet", isCSen: false, isEMatch: false, searchBy: "By Row" });
Find the previous occurrence of the given value Method: XLSearch.findPrevious

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSearch.findPrevious("g", {isCSen: true, isEMatch: false, type: "value", mode: "sheet", searchBy: "columns"}, 1);
Method: find

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.find({ value: "Jenna Schoolfield", sheetIndex: 1, findOpt: "previous", mode: "Sheet", isCSen: false, isEMatch: false, searchBy: "By Row" });
Find and replace all the data by sheet Method: XLSearch.replaceAllBySheet

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSearch.replaceAllBySheet("Sheet", "Spreadsheet", true, false);
Method: replace

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.replace({replaceValue: 'new value', mode: 'Sheet', replaceBy: 'replaceAll', value: '10'});
Find and replace all the data by workbook Method: XLSearch.replaceAllByBook

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSearch.replaceAllByBook("Sheet", "Spreadsheet", true, false);
Method: replace

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.replace({replaceValue: 'new value', mode: 'Workbook', replaceBy: 'replaceAll', value: '10'});

Ribbon

Behavior API in Essential JS 1 API in Essential JS 2
Show or hide the ribbon Property: showRibbon

new ej.Spreadsheet($("#sheet"), { showRibbon: true });
Property: showRibbon

new Spreadsheet({ showRibbon: true });
Add the menu items in the file menu Method: XLRibbon.addMenuItem

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.addMenuItem([{ id: "newitem", text: "New Item", parentId: "FILE" }], 2);
Method: addFileMenuItems

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.addFileMenuItems([{ text: 'New Item' }], "Save As");
Add the tab in the ribbon Method: XLRibbon.addTab

let xlObj = $("#sheet").data("ejSpreadsheet"); let tabGroup = [{ alignType: ej.Ribbon.AlignType.Rows, content: [{ groups: [{ id: "new", text: "New", toolTip: "New", buttonSettings: { contentType: ej.ContentType.ImageOnly, imagePosition: ej.ImagePosition.ImageTop, prefixIcon: "e-icon e-ssr-cut",click: "executeAction" }}], defaults: { type: ej.Ribbon.Type.Button, width: 60, height: 70} }] }];xlObj.XLRibbon.addTab("Tab2", tabGroup, 2);
Method: addRibbonTabs

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.addRibbonTabs([{ header: { text: 'Custom' }, content: [{ text: 'Custom', tooltipText: 'Custom Btn' }] }], 'Data');
Disable ribbon items Method: XLRibbon.disableRibbonItems

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.disableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]);
Method: enableToolbarItems

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.enableToolbarItems('Home', ['spreadsheet_line-through'], false);
Enable ribbon items Method: XLRibbon.enableRibbonItems

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.enableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]);
Method: enableToolbarItems

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.enableToolbarItems('Home', ['spreadsheet_line-through']);
Hide the file menu in the ribbon tab Method: XLRibbon.hideMenu

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.hideMenu();
Method: hideFileMenuItems

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.hideFileMenuItems(['File']);
 Triggers when the file menu item is selected  Event: menuClick 

new ej.Spreadsheet($("#sheet"), { menuClick: (args) => { } });
 Event: fileMenuItemSelect 

new Spreadsheet({ fileMenuItemSelect: (args) => { } });

Undo and Redo

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the undo and redo feature Property: allowUndoRedo

new ej.Spreadsheet($("#sheet"), { allowUndoRedo: true });
Property: allowUndoRedo

new Spreadsheet({ allowUndoRedo: true });
Update the details for custom undo and redo operations. Method: updateUndoRedoCollection

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.updateUndoRedoCollection({ action: "custom", cell: xlObj.getActiveCell(), sheetIndex: 1 });
Method: updateUndoRedoCollection

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: 0, colIdx: 0, action: 'customCSS' } });

Worksheet

Behavior API in Essential JS 1 API in Essential JS 2
Set active sheet index in the workbook Property: activeSheetIndex

new ej.Spreadsheet($("#sheet"), { activeSheetIndex: true });
Property: activeSheetIndex

new Spreadsheet({ activeSheetIndex: true });
Specifies the rows for a sheet Property: sheets.rows

new ej.Spreadsheet($("#sheet"), { sheets: [{ rows:[{ height:30, index: 1, cells:[{ value: "Item Name" }] }] }] });
Property: sheets.rows

new Spreadsheet({ sheets: [{ rows: [{ height:30, index:1, cells: [{ value: "Item Name" }] }] }] });
Specifies the cells of a row Property: sheets.rows.cells

new ej.Spreadsheet($("#sheet"), { sheets: [{ rows:[{ cells:[{ index: 1, value: "Item Name", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }, format: { type: "general" }, hyperlink: { webAddr: "www.google.com" }, isLocked: true }] }] }] });
Property: sheets.rows.cells

new Spreadsheet({ sheets: [{ rows: [{ cells: [{ index:1, value: "Item Name", style:{ fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', backgroundColor: '#428bca', border: '1px solid #e0e0e0' }, format : "General", hyperlink: 'https://www.google.com/', isLocked: true }] }] }] });
Show or hide the grid lines Property: sheets.showGridlines

new ej.Spreadsheet($("#sheet"), { sheets: [{ showGridlines: true }] });
Property: sheets.showGridLines

new Spreadsheet({ sheets: [{ showGridLines: true }] });
Show or hide the headings Property: sheets.showHeadings

new ej.Spreadsheet($("#sheet"), { sheets: [{ showHeadings: true }] });
Property: sheets.showHeaders

new Spreadsheet({ sheets: [{ showHeaders: true }] });
Specifies the name for the sheet Property: sheets.sheetName

new ej.Spreadsheet($("#sheet"), { sheets: [{ sheetName: "Sheet Name" }] });
Property: sheets.name

new Spreadsheet({ sheets: [{ name: "Sheet Name }] });
Show or hide the pager Property: showPager

new ej.Spreadsheet($("#sheet"), { showPager: true });
Property: showSheetTabs

new Spreadsheet({ showSheetTabs: true });
Defines the number of rows to be rendered in the sheet Property: sheets.rowCount

new ej.Spreadsheet($("#sheet"), { sheets: [{ rowCount: 21 }] });
Property: sheets.rowCount

new Spreadsheet({ sheets: [{ rowCount: 21 }] });
Defines the number of columns to be rendered in the sheet Property: sheets.colCount

new ej.Spreadsheet($("#sheet"), { sheets: [{ colCount: 25 }] });
Property: colCount

new Spreadsheet({ sheets: [{ colCount: 21 }] });

Open and Save

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the import feature Property: allowImport

new ej.Spreadsheet($("#sheet"), { allowImport: true });
Property: allowOpen

new Spreadsheet({ allowOpen: true });
Enables or disables the exporting feature Property: exportSettings.allowExporting

new ej.Spreadsheet($("#sheet"), { exportSettings: { allowExporting: true } });
Property: allowSave

new Spreadsheet({ allowSave: true });
Defines the excelUrl to export to the excel format Property: exportSettings.excelUrl

new ej.Spreadsheet($("#sheet"), { exportSettings: { excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport" } });
Property: saveUrl

new Spreadsheet({ saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save' });
Defines the csvUrl to export to the csv format Property: exportSettings.csvUrl

new ej.Spreadsheet($("#sheet"), { exportSettings: { csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport" } });
Property: saveUrl

You can use the same service url and specify saveType as Csv in the beforeSave eventnew Spreadsheet({ saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', beforeSave: (args) => { args.saveType = 'Csv' } });
Import mapper to perform the import feature Property: importSettings.importMapper

new ej.Spreadsheet($("#sheet"), { importSettings: { importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import" } });
Property: openUrl

new Spreadsheet({ openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open' });
Import excel file Method: import

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.import({ file: file });
Method: open

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.open({ file: file });
Load JSON data of the Spreadsheet Method: loadFromJSON

let xlObj = $("#sheet").data("ejSpreadsheet"); let response = xlObj.saveAsJSON(); xlObj.loadFromJSON(response);
Method: openFromJson

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.saveAsJson().then(response => (ssObj.openFromJson({ file: response.jsonObject })));
 Triggers when a file is imported  Event: onImport 

new ej.Spreadsheet($("#sheet"), { onImport: (args) => { } });
 Event: openComplete 

new Spreadsheet({ openComplete: (args) => { } });
 Triggers when the opened Excel file fails to load  Event: openFailure 

new ej.Spreadsheet($("#sheet"), { openFailure: (args) => { } });
 Event: openFailure 

new Spreadsheet({ openFailure: (args) => { } });
Save the sheet data as Excel or CSV document Method: XLExport.export

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLExport.export("Excel");
Method: save

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.save({ saveType: 'Xlsx' });
Save the sheet data as Excel or CSV document Method: XLExport.export

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLExport.export("Excel");
Method: save

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.save({ saveType: 'Xlsx' });
Save JSON data of the Spreadsheet Method: saveAsJSON

let xlObj = $("#sheet").data("ejSpreadsheet"); let response = xlObj.saveAsJSON(); xlObj.loadFromJSON(response);
Method: saveAsJson

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.saveAsJson().then(response => (ssObj.openFromJson({ file: response.jsonObject })));

Data Binding

Behavior API in Essential JS 1 API in Essential JS 2
Specifies the single range or multiple range settings for a sheet Property: sheets.rangeSettings

new ej.Spreadsheet($("#sheet"), { sheets: [{ rangeSettings: [{ dataSource: defaultData, showHeader: true, startCell: "A1", query: ej.Query().take(50) }] }] });
Property: sheets.ranges

new Spreadsheet({ sheets: [{ ranges: [{ dataSource:defaultData, startCell: "A1", showFieldAsHeader: true, query:query }] }] });

Context Menu

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the context menu Property: enableContextMenu

new ej.Spreadsheet($("#sheet"), { enableContextMenu: true });
Property: enableContextMenu

new Spreadsheet({ enableContextMenu: true });
Dynamically add items in the context menu Method: XLCMenu.addItem

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.Cell, [{"text":"Added item 1!!!", "url":"#", "id": "Added item1", "spriteCssClass": "e-icon e-ss-cut" }], 'insertbefore');
Method: addContextMenuItems

let ssObj: Spreadsheet = new Spreadsheet({ contextMenuBeforeOpen: (args) => { ssObj.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false); } });
Disable the items in the context menu Method: XLCMenu.disableItem

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCMenu.disableItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]);
Method: enableContextMenuItems

let ssObj: Spreadsheet = new Spreadsheet({contextMenuBeforeOpen: (args) => { ssObj.enableContextMenuItems(['Copy'], false) } });
Enable the items in the context menu Method: XLCMenu.enableItem

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCMenu.enableItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]);
Method: enableContextMenuItems

let ssObj: Spreadsheet = new Spreadsheet({contextMenuBeforeOpen: (args) => { ssObj.enableContextMenuItems(['Copy'], true) } });
Remove the items in the context menu Method: XLCMenu.removeItem

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCMenu.removeItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]);
Method: removeContextMenuItems

let ssObj: Spreadsheet = new Spreadsheet({contextMenuBeforeOpen: (args) => { ssObj.removeContextMenuItems(['Copy']); } });
 Triggers before the context menu is opened  Event: beforeOpen 

new ej.Spreadsheet($("#sheet"), { beforeOpen: (args) => { } });
 Event: contextMenuBeforeOpen 

new Spreadsheet({ contextMenuBeforeOpen: (args) => { } });
 Triggers when the context menu item is selected  Event: contextMenuClick 

new ej.Spreadsheet($("#sheet"), { contextMenuClick: (args) => { } });
 Event: contextMenuItemSelect 

new Spreadsheet({ contextMenuItemSelect: (args) => { } });

Cell Template

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the cell type feature Property: allowCellType

new ej.Spreadsheet($("#sheet"), { allowCellType: true });
By default, it is enabled.
Specifies the cell types for a cell or range Property: sheets.cellTypes

new ej.Spreadsheet($("#sheet"), { sheets: [{ cellTypes: [{ range: 'F5', settings: { type: ej.Spreadsheet.CustomCellType.Button, background-color': 'yellow', color: 'black', text: 'BUTTON' } }] }] });
Property: sheets.ranges.template

new Spreadsheet({ sheets: [{ ranges: [{ template : "<button class='e-button-template'>BUTTON</button>", address : "F5" }] }] });

Merge

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the merge feature Property: allowMerging

new ej.Spreadsheet($("#sheet"), { allowMerging: true });
Property: allowMerge

new Spreadsheet({ allowMerge: true });
Merge cells across Method: mergeAcrossCells

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.mergeAcrossCells("A3:B5");
Method: merge

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.merge("A3:B5", "Horizontally");
Merge the specified ranges Property: sheets.mergeCells

new ej.Spreadsheet($("#sheet"), { sheets: [{ mergeCells:["A1:A2"] }] });
Property: sheets.rows.cells.rowSpan & sheets.rows.cells.colSpan

new Spreadsheet({ sheets: [{ rows: [{ cells: [{ rowSpan:2, colSpan:2 }] }] }] });
Method to merge the specified ranges Method: mergeCells

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.mergeCells("A3:B5");
Method: merge

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.merge("A3:B5", "All");

Insert and Delete

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the delete feature Property: allowDelete

new ej.Spreadsheet($("#sheet"), { allowDelete: true });
Property: allowDelete

new Spreadsheet({ allowDelete: true });
Enables or disables the insert feature Property: allowInsert

new ej.Spreadsheet($("#sheet"), { allowInsert: true });
Property: allowInsert

new Spreadsheet({ allowInsert: true });
Add a new sheet Method: addNewSheet

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.addNewSheet();
Method: insertSheet

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.insertSheet();
Insert a column Method: insertEntireColumn

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.insertEntireColumn(1, 2);
Method: insertColumn

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.insertColumn(1, 2);
Insert a row Method: insertEntireRow

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.insertEntireRow(1, 2);
Method: insertRow

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.insertRow(1, 2);
Insert a sheet Method: insertSheet

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.insertSheet();
Method: insertSheet

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.insertSheet();
Delete the entire column Method: deleteEntireColumn

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.deleteEntireColumn(2, 3);
Method: delete

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.delete(2, 3, 'Column');
Delete the entire row Method: deleteEntireRow

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.deleteEntireRow(2, 3);
Method: delete

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.delete(2, 3, 'Row');
Delete a sheet Method: deleteSheet

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.deleteSheet(2);
Method: delete

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.delete(2, null, 'Sheet');

Clear

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the clear feature Property: allowClear

new ej.Spreadsheet($("#sheet"), { allowClear: true });
By default, it is enabled.
Clear all the data and format in the specified range of cells Method: clearAll

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.clearAll("A2:A6");
Method: clear

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.clear({ type: "Clear All", range: "A2:A6" });
Clear all the format in the specified range of cells Method: clearAllFormat

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.clearAllFormat("A2:A6");
Method: clear

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.clear({ type: "Clear Formats", range: "A2:A6" });
Clear the contents in the specified range of cells Method: clearContents

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.clearContents("A2:A6");
Method: clear

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.clear({ type: "Clear Contents", range: "A2:A6" });

Data Validation

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the data validation feature Property: allowDataValidation

new ej.Spreadsheet($("#sheet"), { allowDataValidation: true });
Property: allowDataValidation

new Spreadsheet({ allowDataValidation: true });
Apply data validation rules in a selected range of cells based on the defined condition Method: XLValidate.applyDVRules

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLValidate.applyDVRules("A1:D3", ["Between", "15", "20"], "number" ,true, true);
Method: addDataValidation

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5');
Clear the applied validation rules in a specified range of cells Method: XLValidate.clearDV

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLValidate.clearDV("A2:A7");
Method: removeDataValidation

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.removeDataValidation("A2:A5");
Clear invalid data highlights in the given range Method: XLValidate.clearHighlightedValData

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLValidate.clearHighlightedValData("A2:A7");
Method: removeInvalidHighlight

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.removeInvalidHighlight("A1:H5");
Highlight invalid data in a specified range of cells Method: XLValidate.highlightInvalidData

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLValidate.highlightInvalidData("A2:A7");
Method: addInvalidHighlight

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.addInvalidHighlight('A1:H5');

Wrap

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the wrap text feature Property: allowWrap

new ej.Spreadsheet($("#sheet"), { allowWrap: true });
Property: allowWrap

new Spreadsheet({ allowWrap: true });
Unwrap the specified range of cells Method: unWrapText

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.unWrapText("A1:B3");
Method: wrap

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.wrap("A1:B3", false);
Wrap the specified range of cells Method: wrapText

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.wrapText("A1:B3");
Method: wrap

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.wrap("A1:B3");

Scrolling

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the scrolling feature Property: scrollSettings.allowScrolling

new ej.Spreadsheet($("#sheet"), { scrollSettings: { allowScrolling: true } });
Property: allowScrolling

new Spreadsheet({ allowScrolling: true });
Enables or disables the sheet on demand Property: scrollSettings.allowSheetOnDemand

new ej.Spreadsheet($("#sheet"), { scrollSettings: { allowSheetOnDemand: true } });
By default, each sheet will be rendered on demand
Enables or disables the virtual scrolling feature Property: scrollSettings.allowVirtualScrolling

new ej.Spreadsheet($("#sheet"), { scrollSettings: { allowVirtualScrolling: true } });
Property: scrollSettings.enableVirtualization

new Spreadsheet({ scrollSettings: { enableVirtualization: true } });
Set the scroll mode to finite Property: scrollSettings.scrollMode

new ej.Spreadsheet($("#sheet"), { scrollSettings: { scrollMode: ej.Spreadsheet.scrollMode.Normal } });
Property: scrollSettings.isFinite

new Spreadsheet({ scrollSettings: { isFinite: true } });
Perform goto operation Method: XLScroll.goTo

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLScroll.goTo("A30");
Method: goTo

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.goTo('A30');
Scroll the sheet content to the specified cell address Method: XLScroll.scrollToCell

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLScroll.scrollToCell("A30");
Method: goTo

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.goTo('A30');

Common Properties

Behavior API in Essential JS 1 API in Essential JS 2
Enables or disables the keyboard navigation feature Property: allowKeyboardNavigation

new ej.Spreadsheet($("#sheet"), { allowKeyboardNavigation: true });
Property: enableKeyboardNavigation

new Spreadsheet({ enableKeyboardNavigation: true });
Enables or disables the resizing feature Property: allowResizing

new ej.Spreadsheet($("#sheet"), { allowResizing: true });
Property: allowResizing

new Spreadsheet({ allowResizing: true });
Add the CSS class to the root element to customize the appearance Property: cssClass

new ej.Spreadsheet($("#sheet"), { cssClass: "custom-class" });
Property: cssClass

new Spreadsheet({ cssClass: "custom-class" });
Enables or disables the touch support Property: enableTouch

new ej.Spreadsheet($("#sheet"), { enableTouch: true });
By default, it is enabled.
Overrides the global culture and localization Property: locale

new ej.Spreadsheet($("#sheet"), { locale: "en-ES" });
Property: locale

new Spreadsheet({ locale: "en-US" });
Enables or disables the picture feature Property: pictureSettings.allowPictures

new ej.Spreadsheet($("#sheet"), { pictureSettings: { allowPictures: true } });
Property: allowImage

new Spreadsheet({ allowImage: true });
Set the height of the Spreadsheet Property: scrollSettings.height

new ej.Spreadsheet($("#sheet"), { scrollSettings: { height: 600 } });
Property: height

new Spreadsheet({ height:600 });
Set the width of the Spreadsheet Property: scrollSettings.width

new ej.Spreadsheet($("#sheet"), { scrollSettings: { width: 1300 } });
Property: width

new Spreadsheet({ width:1300 });
Hide the specified columns Property: sheets.hideColumns

new ej.Spreadsheet($("#sheet"), { sheets: [{ hideColumns: [3] }] });
Property: sheets.columns.hidden

new Spreadsheet({ sheets: [{ columns: [{ index:3, hidden: true }] }] });
Hide the specified rows Property: sheets.hideRows

new ej.Spreadsheet($("#sheet"), { sheets: [{ hideRows: [3] }] });
Property: sheets.rows.hidden

new Spreadsheet({ sheets: [{ rows: [{ index:3, hidden:true }] }] });

Common Methods

Behavior API in Essential JS 1 API in Essential JS 2
Get the data in the specified range Method: getRangeData

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.getRangeData({range: [2, 6, 2, 6], property: ["value", "value2", "format"], sheetIdx: 1});
Method: getData

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.getData(getRangeAddress('A1:D5')).then((cells)=>{ cells.forEach((cell, key)=>{ }) });
Get the range indices array based on the specified alpha range Method: getRangeIndices

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.getRangeIndices("A1:A9");
Method: getRangeIndexes

import { getRangeIndexes } from '@syncfusion/ej2-spreadsheet';
getRangeIndexes("A1:A9")
Send a paging request to the specified sheet Index Method: gotoPage

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.gotoPage(1);
Method: goTo

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.goTo('Sheet2!A1');
Hide the specified columns Method: hideColumn

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.hideColumn(1, 4);
Method: hideColumn

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.hideColumn(1, 4);
Hide the specified rows Method: hideRow

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.hideRow(1, 4);
Method: hideRow

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.hideRow(1, 4);
Refresh the Spreadsheet Method: refreshSpreadsheet

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.refreshSpreadsheet();
Method: refresh

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.refresh(0, {});
Set the height for the rows Method: setHeightToRows

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.setHeightToRows([{rowIndex: 2, height: 40}]);
Method: setRowHeight

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.setRowHeight(40, 2);
Set the width for the columns Method: setWidthToColumns

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.setWidthToColumns([{colIndex: 2, width: 40}]);
Method: setColWidth

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.setColWidth(40, 2);
Show the hidden columns within the specified range Method: showColumn

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.showColumn(3, 6);
Method: hideColumn

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.hideColumn(3, 6, false);
Show the hidden rows in the specified range Method: showRow

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.showRow(3, 6);
Method: hideRow

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.hideRow(3, 6, false);
Show waiting pop-up in the Spreadsheet Method: showWaitingPopUp

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.showWaitingPopUp();
Method: showSpinner

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.showSpinner();
Hide displayed waiting pop-up in Spreadsheet Method: hideWaitingPopUp

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.hideWaitingPopUp();
Method: hideSpinner

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.hideSpinner();
Fit the height of rows Method: XLResize.fitHeight

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLResize.fitHeight([2,3,4,5]);
Method: autoFit

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.autoFit('1:4');
Fit the width of columns Method: XLResize.fitWidth

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLResize.fitWidth([2,3,4,5]);
Method: autoFit

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.autoFit('A:D');
Set the column width of the specified column index Method: XLResize.setColWidth

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLResize.setColWidth(2, 100);
Method: setColWidth

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.setColWidth(100, 2);
Set the row height of the specified row index Method: XLResize.setRowHeight

let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLResize.setRowHeight(2, 100);
Method: setRowHeight

let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];
ssObj.setRowHeight(100, 2);

Common Events

Behavior API in Essential JS 1 API in Essential JS 2
 Triggers for every action before it starts  Event: actionBegin 

new ej.Spreadsheet($("#sheet"), { actionBegin: (args) => { } });
 Event: actionBegin 

new Spreadsheet({ actionBegin: (args) => { } });
 Triggers for every completed action  Event: actionComplete 

new ej.Spreadsheet($("#sheet"), { actionComplete: (args) => { } });
 Event: actionComplete 

new Spreadsheet({ actionComplete: (args) => { } });
 Triggers after the sheet is loaded  Event: loadComplete 

new ej.Spreadsheet($("#sheet"), { loadComplete: (args) => { } });
 Event: created 

new Spreadsheet({ created: () => { } });