Ej1 api migration in EJ2 TypeScript Spreadsheet control

2 May 202324 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!$A$1:$A$2" }] });
Property: definedNames

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$2:$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://services.syncfusion.com/js/production/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://services.syncfusion.com/js/production/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://services.syncfusion.com/js/production/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');

Comparision between EJ1 and EJ2 Spreadsheet features

The following table compares Excel functionality with the availability of EJ1 and EJ2 Spreadsheet features.

Features Available in EJ1 Spreadsheet Available in EJ2 Spreadsheet Comments
Ribbon Yes Yes -
Formula bar Yes Yes -
Sheet tab Yes Yes -
Show / Hide gridlines and header Yes Yes -
Scrolling Partially Yes -
Selection Yes Yes -
Editing Yes Yes -
Formulae Yes Partially EJ2 supports limited number of most used formulas
Named range Yes Partially EJ2 Spreadsheet Named range supports only in workbook scope
Data Binding Yes Yes -
Formatting Yes Yes -
Context menu Yes Yes -
Keyboard navigation Yes Yes -
Keyboard shortcuts Yes Yes -
Sorting Yes Yes -
Filtering Yes Yes -
Hyperlink Yes Yes -
Undo & redo Yes Yes -
Open and Save Yes Yes -
Resize / Autofit Yes Yes -
Clipboard Yes Yes -
Collaborative editing No Yes -
Wrap text Yes Yes -
Template No Yes -
Merge cells Yes Yes -
Show / Hide rows and columns Yes Yes -
Sheet customizations Yes Partially Move or copy sheet is not supported in EJ2 spreadsheet.
Data Validation Yes Yes -
Table Yes No -
Chart Yes Yes -
Image Yes Yes -
Conditional formatting Yes Yes -
Freeze Pane Yes Yes -
Scaling No No -
Print Yes No -
Grouping No No -
Autofill Yes No -
Auto Sum Yes Yes -
Format painter Yes No -
Cell Style Yes Partially We can only customize the cell style in EJ2 Spreadsheet through API.
Protection Yes Partially Custom encryption is not supported in EJ2 Spreadsheet’s protect workbook.
Find and replace Yes Yes -
Drag and Drop Yes No -
Notes Yes No -
Comments No No -
Pivot table Yes No -
Sparklines Yes No -
Form controls Yes No -
Shapes No No -
Clear Yes Yes -

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: () => { } });