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>
Tsthis.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');
|
Hyperlink
| 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>
Tsthis.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>
`
`|
| 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>
`|
| 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>
`|
| 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>
`|
| 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>
`
`
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 | - |
| 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(){ }
|