Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in Angular Spreadsheet component

14 Apr 2021 / 23 minutes to read

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

Editing

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

<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!$A2.
:$A” }];| **Property:** *definedNames* <br><br><ejs-spreadsheet [definedNames]=“definedNames”><br><br>**Ts**<br>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:$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>`
Clear the applied conditional formatting rules Method: XLCFormat.clearCF

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLCFormat.clearCF([1, 0, 7, 0]); }		 Method: clearConditionalFormat

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.clearConditionalFormat("A1:B3");
Set the conditional formatting rule Method: XLCFormat.setCFRule

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLCFormat.setCFRule({ action: "lessthan", inputs: ["30"], color: "yellowft", range: "H3:H7" }); }		 Method: conditionalFormat

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.conditionalFormat({type:"GreaterThan" cFColor:"RedFT" value:"700", range:"B2:B9"});
Set format style for the range of cells Method: XLFormat.format

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.XLFormat.format({style:{ "background-color": "#C0C0C0"}}, "A1:C10"); }		 Method: cellFormat

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
this.spreadsheetObj.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
 Triggers before formatting the cells  Event: beforeCellFormat 

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

<ejs-spreadsheet (beforeCellFormat)="onBeforeCellFormat($event)">
</ejs-spreadsheet>
TS
onBeforeCellFormat(args){ }
Specifies the border for the cell Property: sheets.border

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
this.sheets = [{ border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }] }];		 Property: sheets.rows.cells.border

<ejs-spreadsheet>
<e-sheets><e-sheet><e-rows><e-row><e-cells><e-cell border='1px solid #456534'></e-cell></e-cells></e-row></e-rows></e-sheet></e-sheets>
</ejs-spreadsheet>
Set border for the specified range of cells Method: setBorder

<ej-spreadsheet id="spreadsheet">
</ej-spreadsheet>
TS
ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.setBorder({ style: "solid", type: "outside", color: "#000000"}, "B2:B6"); }		 Method: setBorder

<ejs-spreadsheet #default>
</ejs-spreadsheet>
TS
@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;
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>`
Specifies the cells of a row Property: sheets.rows.cells

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
Ts
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

<ejs-spreadsheet>
<e-sheets><e-sheet><e-rows><e-row><e-cells><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></e-cells></e-row></e-rows></e-sheet></e-sheets><br>`
Show or hide the grid lines Property: sheets.showGridlines

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
TS
this.sheets = [{ showGridlines: true }];		 Property: sheets.showGridLines

<ejs-spreadsheet ><e-sheets><e-sheet [showGridLines]="true"></e-sheet></e-sheets>
</ejs-spreadsheet>
Show or hide the headings Property: sheets.showHeadings

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
TS
this.sheets = [{ showHeadings: true }];		 Property: sheets.showHeaders

<ejs-spreadsheet ><e-sheets><e-sheet [showHeaders]="true"></e-sheet></e-sheets>
</ejs-spreadsheet>
Specifies the name for the sheet Property: sheets.sheetName

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
TS
this.sheets = [{ sheetName: "Sheet Name" }];		 Property: sheets.name

<ejs-spreadsheet ><e-sheets><e-sheet name="Sheet Name"></e-sheet></e-sheets>
</ejs-spreadsheet>
Show or hide the pager Property: showPager

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

<ejs-spreadsheet [showSheetTabs]="true">
</ejs-spreadsheet>
Defines the number of rows to be rendered in the sheet Property: sheets.rowCount

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
TS
this.sheets = [{ rowCount: 21 }];		 Property: sheets.rowCount

<ejs-spreadsheet ><e-sheets><e-sheet [rowCount]="21"></e-sheet></e-sheets>
</ejs-spreadsheet>
Defines the number of columns to be rendered in the sheet Property: sheets.colCount

<ej-spreadsheet [sheets]="sheets">
</ej-spreadsheet>
TS
this.sheets = [{ colCount: 25 }];		 Property: colCount

<ejs-spreadsheet>
<e-sheets><e-sheet [colCount]="21"></e-sheet></e-sheets>
</ejs-spreadsheet>

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://ej2services.syncfusion.com/production/web-services/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://ej2services.syncfusion.com/production/web-services/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://ej2services.syncfusion.com/production/web-services/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>`

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');

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>`
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>`

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(){ }
Previous
Next