Ej1 api migration in Angular Spreadsheet component

4 Apr 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

<ej-spreadsheet [allowEditing]="true">
</ej-spreadsheet> 		Property: allowEditing

<ejs-spreadsheet [allowEditing]="true">
</ejs-spreadsheet>
Edit a particular cell Method: XLEdit.editCell

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLEdit.editCell(1, 1); } 		Method: startEdit

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.selectRange('A1'); this.spreadsheetObj.startEdit();
Save the edited cell value Method: XLEdit.saveCell

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLEdit.saveCell(); } 		Method: endEdit

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.endEdit();
Update a particular cell value Method: XLEdit.updateCell

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLEdit.updateCell({rowIndex: 1, colIndex: 1}, "product"); } 		Method: updateCell

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.updateCell({ value: 'product' }, 'A1');
 Triggers when the cell is edited  Event: cellEdit 

<ej-spreadsheet id="spreadsheet" (cellEdit)="onCellEdit($event)">
</ej-spreadsheet>
TS
onCellEdit(args){ } 		 Event: cellEdit 

<ejs-spreadsheet (cellEdit)="onCellEdit($event)">
</ejs-spreadsheet>
TS
onCellEdit(args){ }
 Triggers when the edited cell is saved  Event: cellSave 

<ej-spreadsheet id="spreadsheet" (cellSave)="onCellSave($event)">
</ej-spreadsheet>
TS
onCellSave(args){ } 		 Event: cellSave 

<ejs-spreadsheet (cellSave)="onCellSave($event)">
</ejs-spreadsheet>
TS
onCellSave(args){ }

Selection

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

<ej-spreadsheet [allowSelection]="true">
</ej-spreadsheet> 		Property: selectionSettings.mode

<ejs-spreadsheet [selectionSettings]="selectionSettings">
</ejs-spreadsheet>
TS
this.selectionSettings = { mode: 'Multiple' };
Defines active cell in the sheet Property: selectionSettings.activeCell

<ej-spreadsheet [selectionSettings]="selectionSettings">
</ej-spreadsheet>
Ts
this.selectionSettings = { activeCell: "A1" }; 		Property: activeCell

<ejs-spreadsheet>
<e-sheets><e-sheet activeCell="A1"></e-sheet></e-sheets>
</ejs-spreadsheet>
Set selection unit Property: selectionSettings.selectionUnit

<ej-spreadsheet [selectionSettings]="selectionSettings">
</ej-spreadsheet>
Ts
this.selectionSettings = { selectionUnit: ej.Spreadsheet.SelectionUnit.Single }; 		Property: selectionSettings.mode

<ejs-spreadsheet [selectionSettings]="selectionSettings">
</ejs-spreadsheet>
Ts
this.selectionSettings = { mode: 'Single' };
Select the specified range of cells Method: XLSelection.selectRange

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLSelection.selectRange("A1:B2"); } 		Method: selectRange

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.selectRange("A1:B2");
Select a cell or range Method: performSelection

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.performSelection("B1:C3"); } 		Method: selectRange

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.selectRange("B1:C3");
 Triggers before the cell selection  Event: beforeCellSelect 

<ej-spreadsheet id="spreadsheet" (beforeCellSelect)="onBeforeCellSelect($event)">
</ej-spreadsheet>
TS
onBeforeCellSelect(args){ } 		 Event: beforeSelect 

<ejs-spreadsheet (beforeSelect)="onBeforeSelect($event)">
</ejs-spreadsheet>
TS
onBeforeSelect(args){ }
 Triggers when the cell is selected  Event: cellSelected 

<ej-spreadsheet id="spreadsheet" (cellSelected)="onCellSelected($event)">
</ej-spreadsheet>
TS
onCellSelected(args){ } 		 Event: select 

<ejs-spreadsheet (select)="onSelect($event)">
</ejs-spreadsheet>
TS
onSelect(args){ }

Clipboard

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

<ej-spreadsheet [allowClipboard]="true">
</ej-spreadsheet> 		Property: enableClipboard

<ejs-spreadsheet [enableClipboard]="true">
</ejs-spreadsheet>
Copy the selected cells Method: XLClipboard.copy

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLClipboard.copy(); } 		Method: copy

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.copy("A1");
Cut the selected cells Method: XLClipboard.cut

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLClipboard.cut(); } 		Method: cut

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.cut("A1");
Paste the cut or copied cells data Method: XLClipboard.paste

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLClipboard.paste(); } 		Method: paste

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.paste("B1");

Formulas

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

<ej-spreadsheet [allowFormulaBar]="true">
</ej-spreadsheet> 		Property: showFormulaBar

<ejs-spreadsheet [showFormulaBar]="true">
</ejs-spreadsheet>
Set name manager Property: nameManager

<ej-spreadsheet [nameManager]="nameManager">
</ej-spreadsheet>
Ts
this.nameManager:[{ name: "inputRange", refersto: "=Sheet1!$A$1:$A$2" }]; 		Property: definedNames

<ejs-spreadsheet [definedNames]="definedNames">
</ejs-spreadsheet>
Ts
this.definedNames= [{ name: 'namedRange1', refersTo: 'Sheet1!A1:B5' }];
Add the custom formulas Property: customFormulas

<ej-spreadsheet [customFormulas]="customFormulas">
</ej-spreadsheet>
TS
this.customFormulas = [{ formulaName:"CUSTOMTOTAL", functionName:"customTotal" }];
customTotal(args) { } 		Method: addCustomFunction

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.addCustomFunction("CustomFuntion", "SQRT");
window.CustomFuntion = num => Math.sqrt(num);
Method to Add custom formulas Method: addCustomFormula

<ej-spreadsheet id="spreadsheet" >
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.addCustomFormula("CUSTOMTOTAL", "customTotal"); }
customTotal(args){ } 		Method: addCustomFunction

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.addCustomFunction("CustomFuntion", "SQRT");
window.CustomFuntion = num => Math.sqrt(num);
Add a name for a range in the name manager Method: XLRibbon.addNamedRange

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLRibbon.addNamedRange("PRICE_LIST", "=Sheet1!$A$2:$A$7"); } 		Method: addDefinedName

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.addDefinedName({name: 'value', refersTo: '=Sheet1!B2' });
Delete the defined name for a range in the name manager Method: XLRibbon.removeNamedRange

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLRibbon.removeNamedRange("PRICE_LIST"); } 		Method: removeDefinedName

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.removeDefinedName('value');

Formatting

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

<ej-spreadsheet [allowCellFormatting]="true">
</ej-spreadsheet>| Property: allowCellFormatting

<ejs-spreadsheet [allowCellFormatting]="true">
</ejs-spreadsheet>|
| Enables or disables the conditional format feature | Property: allowConditionalFormats

<ej-spreadsheet [allowConditionalFormats]="true">
</ej-spreadsheet>| Property: allowConditionalFormat

<ejs-spreadsheet [allowConditionalFormat]="true">
</ejs-spreadsheet>|
| Enables or disables the cell border feature | Property: formatSettings.allowCellBorder

<ej-spreadsheet [formatSettings.allowCellBorder]=true>
</ej-spreadsheet>| By default, it is enabled by enabling the allowCellFormatting property |
| Enables or disables the decimal places | Property: formatSettings.allowDecimalPlaces

<ej-spreadsheet [formatSettings.allowDecimalPlaces]=true>
</ej-spreadsheet>| By default, it is enabled by enabling the allowNumberFormatting property|
| Specifies the conditional formatting for the range of cells | Property: sheets.cFormatRule

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
this.sheets = [{ cFormatRule: [{ action: ej.Spreadsheet.CFormatRule.LessThan, inputs: ["30"], color: ej.Spreadsheet.CFormatHighlightColor.RedFillwithDarkRedText, range: "A1:E1" }] }]| Property: sheets.conditionalFormats

<ejs-spreadsheet>
<e-sheets><e-sheet> <e-conditionalformats><e-conditionalformat type="GreaterThan" cFColor="RedFT" value="700" range="B2:B9"></e-conditionalformat></e-conditionalformats></e-sheet></e-sheets><br></ejs-spreadsheet>| | Clear the applied conditional formatting rules | **Method:** *XLCFormat.clearCF* <br><br>`
`<br>**TS**<br>ngAfterViewInit(){ let xlObj = $(“#spreadsheet”).data(“ejSpreadsheet”); xlObj.XLCFormat.clearCF([1, 0, 7, 0]); }| **Method:** *clearConditionalFormat* <br><br><ejs-spreadsheet #default><br></ejs-spreadsheet><br>**TS**<br>@ViewChild(‘default’) public spreadsheetObj: SpreadsheetComponent;<br>this.spreadsheetObj.clearConditionalFormat(“A1:B3”);| | Set the conditional formatting rule | **Method:** *XLCFormat.setCFRule* <br><br>`
`<br>**TS**<br>ngAfterViewInit(){ let xlObj = $(“#spreadsheet”).data(“ejSpreadsheet”); xlObj.XLCFormat.setCFRule({ action: “lessthan”, inputs: [“30”], color: “yellowft”, range: “H3:H7” }); }| **Method:** *conditionalFormat* <br><br><ejs-spreadsheet #default><br></ejs-spreadsheet><br>**TS**<br>@ViewChild(‘default’) public spreadsheetObj: SpreadsheetComponent;<br>this.spreadsheetObj.conditionalFormat({type:”GreaterThan” cFColor:”RedFT” value:”700”, range:”B2:B9”});| | Set format style for the range of cells | **Method:** *XLFormat.format* <br><br>`
`<br>**TS**<br>ngAfterViewInit(){ let xlObj = $(“#spreadsheet”).data(“ejSpreadsheet”); xlObj.XLFormat.format({style:{ “background-color”: “#C0C0C0”}}, “A1:C10”); }| **Method:** *cellFormat* <br><br><ejs-spreadsheet #default><br></ejs-spreadsheet><br>**TS**<br>@ViewChild(‘default’) public spreadsheetObj: SpreadsheetComponent;<br>this.spreadsheetObj.cellFormat({ fontWeight: ‘bold’, fontSize: ‘12pt’, backgroundColor: ‘#279377’, color: ‘#ffffff’ }, ‘A2:E2’);| | Triggers before formatting the cells | **Event:** *beforeCellFormat* <br><br><ej-spreadsheet id=”spreadsheet” (beforeCellFormat)=”onBeforeCellFormat($event)”><br></ej-spreadsheet><br>**TS**<br>onBeforeCellFormat(args){ }| **Event:** *beforeCellFormat* <br><br><ejs-spreadsheet (beforeCellFormat)=”onBeforeCellFormat($event)”><br></ejs-spreadsheet><br>**TS**<br>onBeforeCellFormat(args){ }| | Specifies the border for the cell | **Property:** *sheets.border* <br><br><ej-spreadsheet [sheets]=”sheets”><br></ej-spreadsheet><br>**Ts**<br>this.sheets = [{ border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: “#456534”, range: “C6:D9” }] }];| **Property:** *sheets.rows.cells.border* <br><br>`
``
`| | Set border for the specified range of cells | **Method:** *setBorder* <br><br>`
`<br>**TS**<br>ngAfterViewInit(){ let xlObj = $(“#spreadsheet”).data(“ejSpreadsheet”); xlObj.setBorder({ style: “solid”, type: “outside”, color: “#000000”}, “B2:B6”); }| **Method:** *setBorder* <br><br><ejs-spreadsheet #default><br></ejs-spreadsheet><br>**TS**<br>@ViewChild(‘default’) public spreadsheetObj: SpreadsheetComponent;<br>this.spreadsheetObj.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

<ej-spreadsheet [allowFiltering]="true">
</ej-spreadsheet> 		Property: allowFiltering

<ejs-spreadsheet [allowFiltering]="true">
</ejs-spreadsheet>
Clear the filter in the filtered columns Method: XLFilter.clearFilter

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLFilter.clearFilter(); } 		Method: clearFilter

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.clearFilter();
Apply filter for the specified range of cells Method: XLFilter.filter

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLFilter.filter("A3:C8"); } 		Method: applyFilter

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [allowSorting]="true">
</ej-spreadsheet> 		Property: allowSorting

<ejs-spreadsheet [allowSorting]="true">
</ejs-spreadsheet>
Sort a particular range of cells based on its values Method: XLSort.sortByRange

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLSort.sortByRange("A1:D3", "B", "ascending"); } 		Method: sort

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [allowHyperlink]="true">
</ej-spreadsheet> 		Property: allowHyperlink

<ejs-spreadsheet [allowHyperlink]="true">
</ejs-spreadsheet>
Remove the hyperlink in the specified cells Method: removeHyperlink

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.removeHyperlink("A2:A3"); } 		Method: removeHyperlink

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.removeHyperlink("A2:A3");
Set the hyperlink in the specified cells Method: setHyperlink

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.setHyperlink("A2:A3",{"cellAddr":"A2:A8"}, 3); } 		Method: addHyperlink

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [allowLockCell]="true">
</ej-spreadsheet> 		By default, it is enabled.
Protect or Unprotect the active sheet Method: protectSheet

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.protectSheet(); } 		Method: protectSheet

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.protectSheet(0, {});
Lock or Unlock the range of cells Method: lockCells

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.lockCells("A3:B5", true); } 		Method: lockCells

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [allowSearching]="true">
</ej-spreadsheet> 		Property: allowFindAndReplace

<ejs-spreadsheet [allowFindAndReplace]="true">
</ejs-spreadsheet>
Find the next occurrence of the given value Method: XLSearch.findNext

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLSearch.findNext("g", {isCSen: false, isEMatch: false, type: "value", mode: "sheet", searchBy: "rows"}, 1); } 		Method: find

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLSearch.findPrevious("g", {isCSen: true, isEMatch: false, type: "value", mode: "sheet", searchBy: "columns"}, 1); } 		Method: find

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLSearch.replaceAllBySheet("Sheet", "Spreadsheet", true, false); } 		Method: replace

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.replace({replaceValue: 'new value', mode: 'Sheet', replaceBy: 'replaceAll', value: '10'});
Find and replace all the data by workbook Method: XLSearch.replaceAllByBook

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLSearch.replaceAllByBook("Sheet", "Spreadsheet", true, false); } 		Method: replace

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [showRibbon]="true">
</ej-spreadsheet> 		Property: showRibbon

<ejs-spreadsheet [showRibbon]="true">
</ejs-spreadsheet>
Add the menu items in the file menu Method: XLRibbon.addMenuItem

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLRibbon.addMenuItem([{ id: "newitem", text: "New Item", parentId: "FILE" }], 2); } 		Method: addFileMenuItems

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.addFileMenuItems([{ text: 'New Item' }], "Save As");
Add the tab in the ribbon Method: XLRibbon.addTab

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").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

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.addRibbonTabs([{ header: { text: 'Custom' }, content: [{ text: 'Custom', tooltipText: 'Custom Btn' }] }], 'Data');
Disable ribbon items Method: XLRibbon.disableRibbonItems

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLRibbon.disableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]); } 		Method: enableToolbarItems

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.enableToolbarItems('Home', ['spreadsheet_line-through'], false);
Enable ribbon items Method: XLRibbon.enableRibbonItems

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLRibbon.enableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]); } 		Method: enableToolbarItems

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.enableToolbarItems('Home', ['spreadsheet_line-through']);
Hide the file menu in the ribbon tab Method: XLRibbon.hideMenu

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLRibbon.hideMenu(); } 		Method: hideFileMenuItems

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.hideFileMenuItems(['File']);
 Triggers when the file menu item is selected  Event: menuClick 

<ej-spreadsheet id="spreadsheet" (menuClick)="onMenuClick($event)">
</ej-spreadsheet>
TS
onMenuClick(args){ } 		 Event: fileMenuItemSelect 

<ejs-spreadsheet (fileMenuItemSelect)="onFileMenuItemSelect($event)">
</ejs-spreadsheet>
TS
onFileMenuItemSelect(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

<ej-spreadsheet [allowUndoRedo]="true">
</ej-spreadsheet> 		Property: allowUndoRedo

<ejs-spreadsheet [allowUndoRedo]="true">
</ejs-spreadsheet>
Update the details for custom undo and redo operations. Method: updateUndoRedoCollection

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.updateUndoRedoCollection({ action: "custom", cell: xlObj.getActiveCell(), sheetIndex: 1 }); } 		Method: updateUndoRedoCollection

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [activeSheetIndex]="true">
</ej-spreadsheet>| Property: activeSheetIndex

<ejs-spreadsheet [activeSheetIndex]="true">
</ejs-spreadsheet>|
| Specifies the rows for a sheet | Property: sheets.rows

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
this.sheets = [{ rows:[{ height:30, index: 1, cells:[{ value: "Item Name" }] }] }]| Property: sheets.rows

<ejs-spreadsheet>
<e-sheets><e-sheet><e-rows><e-row height=30 index=1><e-cells><e-cell value="Item Name"></e-cell></e-cells></e-row></e-rows></e-sheet></e-sheets><br></ejs-spreadsheet>| | Specifies the cells of a row | **Property:** *sheets.rows.cells* <br><br><ej-spreadsheet [sheets]=”sheets”><br></ej-spreadsheet><br>**Ts**<br>this.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* <br><br>`
`<e-cell 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'></e-cell>
`| | Show or hide the grid lines | **Property:** *sheets.showGridlines* <br><br><ej-spreadsheet [sheets]=”sheets”><br></ej-spreadsheet><br>**TS**<br>this.sheets = [{ showGridlines: true }];| **Property:** *sheets.showGridLines* <br><br><e-sheet [showGridLines]="true"></e-sheet>`
`| | Show or hide the headings | **Property:** *sheets.showHeadings* <br><br><ej-spreadsheet [sheets]=”sheets”><br></ej-spreadsheet><br>**TS**<br>this.sheets = [{ showHeadings: true }];| **Property:** *sheets.showHeaders* <br><br><e-sheet [showHeaders]="true"></e-sheet>`
`| | Specifies the name for the sheet | **Property:** *sheets.sheetName* <br><br><ej-spreadsheet [sheets]=”sheets”><br></ej-spreadsheet><br>**TS**<br>this.sheets = [{ sheetName: “Sheet Name” }];| **Property:** *sheets.name* <br><br>`
`| | Show or hide the pager | **Property:** *showPager* <br><br><ej-spreadsheet [showPager]=”true”><br></ej-spreadsheet>| **Property:** *showSheetTabs* <br><br><ejs-spreadsheet [showSheetTabs]=”true”><br></ejs-spreadsheet>| | Defines the number of rows to be rendered in the sheet | **Property:** *sheets.rowCount* <br><br><ej-spreadsheet [sheets]=”sheets”><br></ej-spreadsheet><br>**TS**<br>this.sheets = [{ rowCount: 21 }];| **Property:** *sheets.rowCount* <br><br><e-sheet [rowCount]="21"></e-sheet>`
`| | Defines the number of columns to be rendered in the sheet | **Property:** *sheets.colCount* <br><br><ej-spreadsheet [sheets]=”sheets”><br></ej-spreadsheet><br>**TS**<br>this.sheets = [{ colCount: 25 }];| **Property:** *colCount* <br><br>`
`<e-sheet [colCount]="21"></e-sheet>`
``|

Open and Save

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

<ej-spreadsheet [allowImport]="true">
</ej-spreadsheet> 		Property: allowOpen

<ejs-spreadsheet [allowOpen]="true">
</ejs-spreadsheet>
Enables or disables the exporting feature Property: exportSettings.allowExporting

<ej-spreadsheet [exportSettings]="exportSettings">
</ej-spreadsheet>
Ts
this.exportSettings = { allowExporting: true } 		Property: allowSave

<ejs-spreadsheet [allowSave]="true">
</ejs-spreadsheet>
Defines the excelUrl to export to the excel format Property: exportSettings.excelUrl

<ej-spreadsheet [exportSettings]="exportSettings">
</ej-spreadsheet>
Ts
this.exportSettings = { excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport" } 		Property: saveUrl

<ejs-spreadsheet saveUrl='https://services.syncfusion.com/angular/production/api/spreadsheet/save'>
</ejs-spreadsheet>
Defines the csvUrl to export to the csv format Property: exportSettings.csvUrl

<ej-spreadsheet [exportSettings]="exportSettings">
</ej-spreadsheet>
Ts
this.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<ejs-spreadsheet saveUrl='https://services.syncfusion.com/angular/production/api/spreadsheet/save' (beforeSave)='beforeSave($event)'>
</ejs-spreadsheet>
Ts
beforeSave(args: BeforeSaveEventArgs) { args.saveType = 'Csv' }
Import mapper to perform the import feature Property: importSettings.importMapper

<ej-spreadsheet [importSettings]='importSettings'>
</ej-spreadsheet>
Ts
this.importSettings= { importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import" }; 		Property: openUrl

<ejs-spreadsheet openUrl='https://services.syncfusion.com/angular/production/api/spreadsheet/open'>
</ejs-spreadsheet>
Import excel file Method: import

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.import({ file: file }); } 		Method: open

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.open({ file: file });
Load JSON data of the Spreadsheet Method: loadFromJSON

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); let response = xlObj.saveAsJSON(); xlObj.loadFromJSON(response); } 		Method: openFromJson

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.saveAsJson().then(response => (this.spreadsheetObj.openFromJson({ file: response.jsonObject })));
 Triggers when a file is imported  Event: onImport 

<ej-spreadsheet id="spreadsheet" (onImport)="onImport($event)">
</ej-spreadsheet>
TS
onImport(args){ } 		 Event: openComplete 

<ejs-spreadsheet (openComplete)="onOpenComplete($event)">
</ejs-spreadsheet>
TS
onOpenComplete(args){ }
 Triggers when the opened Excel file fails to load  Event: openFailure 

<ej-spreadsheet id="spreadsheet" (openFailure)="onOpenFailure($event)">
</ej-spreadsheet>
TS
onOpenFailure(args){ } 		 Event: openFailure 

<ejs-spreadsheet (openFailure)="onOpenFailure($event)">
</ejs-spreadsheet>
TS
onOpenFailure(args){ }
Save the sheet data as Excel or CSV document Method: XLExport.export

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLExport.export("Excel"); } 		Method: save

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.save({ saveType: 'Xlsx' });
Save the sheet data as Excel or CSV document Method: XLExport.export

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLExport.export("Excel"); } 		Method: save

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.save({ saveType: 'Xlsx' });
Save JSON data of the Spreadsheet Method: saveAsJSON

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); let response = xlObj.saveAsJSON(); xlObj.loadFromJSON(response); } 		Method: saveAsJson

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.saveAsJson().then(response => (this.spreadsheetObj.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

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
this.sheets = [{ rangeSettings: [{ dataSource: defaultData, showHeader: true, startCell: "A1", query: ej.Query().take(50) }] }] 		Property: sheets.ranges

<ejs-spreadsheet>
<e-sheets><e-sheet><e-ranges><e-range [dataSource]="defaultData" startCell="A1" [showFieldAsHeader]="true" [query]="query"></e-range></e-ranges></e-sheet></e-sheets><br></ejs-spreadsheet>`

Context Menu

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

<ej-spreadsheet [enableContextMenu]="true">
</ej-spreadsheet> 		Property: enableContextMenu

<ejs-spreadsheet [enableContextMenu]="true">
</ejs-spreadsheet>
Dynamically add items in the context menu Method: XLCMenu.addItem

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").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

<ejs-spreadsheet (contextMenuBeforeOpen)="contextMenuBeforeOpen($event)" #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
contextMenuBeforeOpen(args) { this.spreadsheetObj.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false); }
Disable the items in the context menu Method: XLCMenu.disableItem

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLCMenu.disableItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]); } 		Method: enableContextMenuItems

<ejs-spreadsheet (contextMenuBeforeOpen)="contextMenuBeforeOpen($event)" #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
contextMenuBeforeOpen(args) { this.spreadsheetObj.enableContextMenuItems(['Copy'], false); }
Enable the items in the context menu Method: XLCMenu.enableItem

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLCMenu.enableItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]); } 		Method: enableContextMenuItems

<ejs-spreadsheet (contextMenuBeforeOpen)="contextMenuBeforeOpen($event)" #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
contextMenuBeforeOpen(args) { this.spreadsheetObj.enableContextMenuItems(['Copy'], true); }
Remove the items in the context menu Method: XLCMenu.removeItem

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLCMenu.removeItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]); } 		Method: removeContextMenuItems

<ejs-spreadsheet (contextMenuBeforeOpen)="contextMenuBeforeOpen($event)" #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
contextMenuBeforeOpen(args) { this.spreadsheetObj.removeContextMenuItems(['Copy']); }
 Triggers before the context menu is opened  Event: beforeOpen 

<ej-spreadsheet id="spreadsheet" (beforeOpen)="onBeforeOpen($event)">
</ej-spreadsheet>
TS
onBeforeOpen(args){ } 		 Event: contextMenuBeforeOpen 

<ejs-spreadsheet (contextMenuBeforeOpen)="onContextMenuBeforeOpen($event)">
</ejs-spreadsheet>
TS
onContextMenuBeforeOpen(args){ }
 Triggers when the context menu item is selected  Event: contextMenuClick 

<ej-spreadsheet id="spreadsheet" (contextMenuClick)="onContextMenuClick($event)">
</ej-spreadsheet>
TS
onContextMenuClick(args){ } 		 Event: contextMenuItemSelect 

<ejs-spreadsheet (contextMenuItemSelect)="onContextMenuItemSelect($event)">
</ejs-spreadsheet>
TS
onContextMenuItemSelect(args){ }

Cell Template

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

<ej-spreadsheet [allowCellType]="true">
</ej-spreadsheet> 		By default, it is enabled.
Specifies the cell types for a cell or range Property: sheets.cellTypes

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
this.sheets = [{ cellTypes: [{ range: 'F5', settings: { type: ej.Spreadsheet.CustomCellType.Button, background-color': 'yellow', color: 'black', text: 'BUTTON' } }] }]; 		Property: sheets.ranges.template

<ejs-spreadsheet>
<e-sheets><e-sheet><e-ranges><e-range template="<button class='e-button-template'>BUTTON</button>" address="F5"></e-range></e-ranges></e-sheet></e-sheets>
</ejs-spreadsheet>

Merge

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

<ej-spreadsheet [allowMerging]="true">
</ej-spreadsheet> 		Property: allowMerge

<ejs-spreadsheet [allowMerge]="true">
</ejs-spreadsheet>
Merge cells across Method: mergeAcrossCells

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.mergeAcrossCells("A3:B5"); } 		Method: merge

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.merge("A3:B5", "Horizontally");
Merge the specified ranges Property: sheets.mergeCells

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
this.sheets = [{ mergeCells:["A1:A2"] }] 		Property: sheets.rows.cells.rowSpan & sheets.rows.cells.colSpan

<ejs-spreadsheet>
<e-sheets><e-sheet><e-rows><e-row><e-cells><e-cell [rowSpan]=2 [colSpan]=2></e-cell></e-cells></e-row></e-rows></e-sheet></e-sheets>
</ejs-spreadsheet>
Method to merge the specified ranges Method: mergeCells

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.mergeCells("A3:B5"); } 		Method: merge

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [allowDelete]="true">
</ej-spreadsheet> 		Property: allowDelete

<ejs-spreadsheet [allowDelete]="true">
</ejs-spreadsheet>
Enables or disables the insert feature Property: allowInsert

<ej-spreadsheet [allowInsert]="true">
</ej-spreadsheet> 		Property: allowInsert

<ejs-spreadsheet [allowInsert]="true">
</ejs-spreadsheet>
Add a new sheet Method: addNewSheet

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.addNewSheet(); } 		Method: insertSheet

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.insertSheet();
Insert a column Method: insertEntireColumn

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.insertEntireColumn(1, 2); } 		Method: insertColumn

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.insertColumn(1, 2);
Insert a row Method: insertEntireRow

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.insertEntireRow(1, 2); } 		Method: insertRow

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.insertRow(1, 2);
Insert a sheet Method: insertSheet

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.insertSheet(); } 		Method: insertSheet

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.insertSheet();
Delete the entire column Method: deleteEntireColumn

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.deleteEntireColumn(2, 3); } 		Method: delete

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.delete(2, 3, 'Column');
Delete the entire row Method: deleteEntireRow

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.deleteEntireRow(2, 3); } 		Method: delete

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.delete(2, 3, 'Row');
Delete a sheet Method: deleteSheet

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.deleteSheet(2); } 		Method: delete

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.delete(2, null, 'Sheet');

Clear

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

<ej-spreadsheet [allowClear]="true">
</ej-spreadsheet> 		By default, it is enabled.
Clear all the data and format in the specified range of cells Method: clearAll

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.clearAll("A2:A6"); } 		Method: clear

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.clear({ type: "Clear All", range: "A2:A6" });
Clear all the format in the specified range of cells Method: clearAllFormat

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.clearAllFormat("A2:A6"); } 		Method: clear

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.clear({ type: "Clear Formats", range: "A2:A6" });
Clear the contents in the specified range of cells Method: clearContents

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.clearContents("A2:A6"); } 		Method: clear

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [allowDataValidation]="true">
</ej-spreadsheet> 		Property: allowDataValidation

<ejs-spreadsheet [allowDataValidation]="true">
</ejs-spreadsheet>
Apply data validation rules in a selected range of cells based on the defined condition Method: XLValidate.applyDVRules

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLValidate.applyDVRules("A1:D3", ["Between", "15", "20"], "number" ,true, true); } 		Method: addDataValidation

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5');
Clear the applied validation rules in a specified range of cells Method: XLValidate.clearDV

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLValidate.clearDV("A2:A7"); } 		Method: removeDataValidation

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.removeDataValidation("A2:A5");
Clear invalid data highlights in the given range Method: XLValidate.clearHighlightedValData

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLValidate.clearHighlightedValData("A2:A7"); } 		Method: removeInvalidHighlight

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.removeInvalidHighlight("A1:H5");
Highlight invalid data in a specified range of cells Method: XLValidate.highlightInvalidData

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLValidate.highlightInvalidData("A2:A7"); } 		Method: addInvalidHighlight

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.addInvalidHighlight('A1:H5');

Wrap

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

<ej-spreadsheet [allowWrap]="true">
</ej-spreadsheet> 		Property: allowWrap

<ejs-spreadsheet [allowWrap]="true">
</ejs-spreadsheet>
Unwrap the specified range of cells Method: unWrapText

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.unWrapText("A1:B3"); } 		Method: wrap

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.wrap("A1:B3", false);
Wrap the specified range of cells Method: wrapText

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.wrapText("A1:B3"); } 		Method: wrap

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.wrap("A1:B3");

Scrolling

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

<ej-spreadsheet [scrollSettings]="scrollSettings">
</ej-spreadsheet>
Ts
this.scrollSettings = { allowScrolling: true }; 		Property: allowScrolling

<ejs-spreadsheet [allowScrolling]="true">
</ejs-spreadsheet>
Enables or disables the sheet on demand Property: scrollSettings.allowSheetOnDemand

<ej-spreadsheet [scrollSettings]="scrollSettings">
</ej-spreadsheet>
Ts
this.scrollSettings = { allowSheetOnDemand: true }; 		By default, each sheet will be rendered on demand
Enables or disables the virtual scrolling feature Property: scrollSettings.allowVirtualScrolling

<ej-spreadsheet [scrollSettings]="scrollSettings">
</ej-spreadsheet>
Ts
this.scrollSettings = { allowVirtualScrolling: true }; 		Property: scrollSettings.enableVirtualization

<ejs-spreadsheet [scrollSettings]="scrollSettings">
</ejs-spreadsheet>
Ts
this.scrollSettings = { enableVirtualization: true };
Set the scroll mode to finite Property: scrollSettings.scrollMode

<ej-spreadsheet [scrollSettings]="scrollSettings">
</ej-spreadsheet>
Ts
this.scrollSettings = { scrollMode: ej.Spreadsheet.scrollMode.Normal }; 		Property: scrollSettings.isFinite

<ejs-spreadsheet [scrollSettings]="scrollSettings">
</ejs-spreadsheet>
Ts
this.scrollSettings = { isFinite: true };
Perform goto operation Method: XLScroll.goTo

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLScroll.goTo("A30"); } 		Method: goTo

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.goTo('A30');
Scroll the sheet content to the specified cell address Method: XLScroll.scrollToCell

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLScroll.scrollToCell("A30"); } 		Method: goTo

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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

<ej-spreadsheet [allowKeyboardNavigation]="true">
</ej-spreadsheet> 		Property: enableKeyboardNavigation

<ejs-spreadsheet [enableKeyboardNavigation]="true">
</ejs-spreadsheet>
Enables or disables the resizing feature Property: allowResizing

<ej-spreadsheet [allowResizing]="true">
</ej-spreadsheet> 		Property: allowResizing

<ejs-spreadsheet [allowResizing]="true">
</ejs-spreadsheet>
Add the CSS class to the root element to customize the appearance Property: cssClass

<ej-spreadsheet cssClass="custom-class">
</ej-spreadsheet> 		Property: cssClass

<ejs-spreadsheet cssClass="custom-class">
</ejs-spreadsheet>
Enables or disables the touch support Property: enableTouch

<ej-spreadsheet [enableTouch]="true">
</ej-spreadsheet> 		By default, it is enabled.
Overrides the global culture and localization Property: locale

<ej-spreadsheet locale="en-ES">
</ej-spreadsheet> 		Property: locale

<ejs-spreadsheet locale="en-US">
</ejs-spreadsheet>
Enables or disables the picture feature Property: pictureSettings.allowPictures

<ej-spreadsheet [pictureSettings]="pictureSettings">
</ej-spreadsheet>
Ts
this.pictureSettings = { allowPictures: true } 		Property: allowImage

<ejs-spreadsheet [allowImage]="true">
</ejs-spreadsheet>
Set the height of the Spreadsheet Property: scrollSettings.height

<ej-spreadsheet [scrollSettings]="scrollSettings">
</ej-spreadsheet>
Ts
this.scrollSettings = { height: 600 }; 		Property: height

<ejs-spreadsheet height=600>
</ejs-spreadsheet>
Set the width of the Spreadsheet Property: scrollSettings.width

<ej-spreadsheet [scrollSettings]="scrollSettings">
</ej-spreadsheet>
Ts
this.scrollSettings = { width: 1300 }; 		Property: width

<ejs-spreadsheet width=1300>
</ejs-spreadsheet>
Hide the specified columns Property: sheets.hideColumns

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
this.sheets = [{ hideColumns: [3] }] 		Property: sheets.columns.hidden

<ejs-spreadsheet>
<e-sheets><e-sheet><e-columns><e-column index=3 [hidden]="true"></e-column></e-columns></e-sheet></e-sheets><br></ejs-spreadsheet>`
Hide the specified rows Property: sheets.hideRows

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
this.sheets = [{ hideRows: [3] }] 		Property: sheets.rows.hidden

<ejs-spreadsheet>
<e-sheets><e-sheet><e-rows><e-row index=3 [hidden]="true"></e-row></e-rows></e-sheet></e-sheets><br></ejs-spreadsheet>`

Common Methods

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

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.getRangeData({range: [2, 6, 2, 6], property: ["value", "value2", "format"], sheetIdx: 1}); } 		Method: getData

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.getData(getRangeAddress('A1:D5')).then((cells)=>{ cells.forEach((cell, key)=>{ }) });
Get the range indices array based on the specified alpha range Method: getRangeIndices

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.getRangeIndices("A1:A9"); } 		Method: getRangeIndexes

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

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.gotoPage(1); } 		Method: goTo

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.goTo('Sheet2!A1');
Hide the specified columns Method: hideColumn

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.hideColumn(1, 4); } 		Method: hideColumn

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.hideColumn(1, 4);
Hide the specified rows Method: hideRow

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.hideRow(1, 4); } 		Method: hideRow

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.hideRow(1, 4);
Refresh the Spreadsheet Method: refreshSpreadsheet

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.refreshSpreadsheet(); } 		Method: refresh

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.refresh(0, {});
Set the height for the rows Method: setHeightToRows

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.setHeightToRows([{rowIndex: 2, height: 40}]); } 		Method: setRowHeight

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.setRowHeight(40, 2);
Set the width for the columns Method: setWidthToColumns

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.setWidthToColumns([{colIndex: 2, width: 40}]); } 		Method: setColWidth

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.setColWidth(40, 2);
Show the hidden columns within the specified range Method: showColumn

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.showColumn(3, 6); } 		Method: hideColumn

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.hideColumn(3, 6, false);
Show the hidden rows in the specified range Method: showRow

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.showRow(3, 6); } 		Method: hideRow

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.hideRow(3, 6, false);
Show waiting pop-up in the Spreadsheet Method: showWaitingPopUp

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.showWaitingPopUp(); } 		Method: showSpinner

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.showSpinner();
Hide displayed waiting pop-up in Spreadsheet Method: hideWaitingPopUp

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.hideWaitingPopUp(); } 		Method: hideSpinner

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.hideSpinner();
Fit the height of rows Method: XLResize.fitHeight

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLResize.fitHeight([2,3,4,5]); } 		Method: autoFit

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.autoFit('1:4');
Fit the width of columns Method: XLResize.fitWidth

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLResize.fitWidth([2,3,4,5]); } 		Method: autoFit

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.autoFit('A:D');
Set the column width of the specified column index Method: XLResize.setColWidth

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLResize.setColWidth(2, 100); } 		Method: setColWidth

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.setColWidth(100, 2);
Set the row height of the specified row index Method: XLResize.setRowHeight

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLResize.setRowHeight(2, 100); } 		Method: setRowHeight

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.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 

<ej-spreadsheet id="spreadsheet" (actionBegin)="onActionBegin($event)">
</ej-spreadsheet>
TS
onActionBegin(args){ } 		 Event: actionBegin 

<ejs-spreadsheet (actionBegin)="onActionBegin($event)">
</ejs-spreadsheet>
TS
onActionBegin(args){ }
 Triggers for every completed action  Event: actionComplete 

<ej-spreadsheet id="spreadsheet" (actionComplete)="onActionComplete($event)">
</ej-spreadsheet>
TS
onActionComplete(args){ } 		 Event: actionComplete 

<ejs-spreadsheet (actionComplete)="onActionComplete($event)">
</ejs-spreadsheet>
TS
onActionComplete(args){ }
 Triggers after the sheet is loaded  Event: loadComplete 

<ej-spreadsheet id="spreadsheet" (loadComplete)="onLoadComplete($event)">
</ej-spreadsheet>
TS
onLoadComplete(args){ } 		 Event: created 

<ejs-spreadsheet (created)="onCreated()">
</ejs-spreadsheet>
TS
onCreated(){ }