This article describes the API migration process of the Spreadsheet component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enables or disables the editing feature | Property: allowEditing <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){ } |
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){ } |
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"); |
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'); |
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"); |
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'); |
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'); |
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); |
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'}); |
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){ } |
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' } }); |
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> |
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 }))); |
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> ` |
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){ } |
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> |
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"); |
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'); |
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" }); |
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'); |
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"); |
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'); |
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> ` |
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); |
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(){ } |