This article describes the API migration process of the Spreadsheet component from Essential JS 1 to Essential JS 2.
| 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) => { } }); |
| 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) => { } }); |
| 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"); |
| 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'); |
| 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"); |
| 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'); |
| 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'); |
| 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); |
| 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'}); |
| 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) => { } }); |
| 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' } }); |
| 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 }] }); |
| 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 event new 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 }))); |
| 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 }] }] }); |
| 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) => { } }); |
| 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" }] }] }); |
| 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"); |
| 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'); |
| 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" }); |
| 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'); |
| 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"); |
| 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'); |
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 | - |
| 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 | - |
| 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 }] }] }); |
| 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); |
| 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: () => { } }); |