Contents
- Editing
- Selection
- Clipboard
- Formulas
- Formatting
- Filtering
- Sorting
- Hyperlink
- Protection
- Find and Replace
- Ribbon
- Undo and Redo
- Worksheet
- Open and Save
- Data Binding
- Context Menu
- Cell Template
- Merge
- Insert and Delete
- Clear
- Data Validation
- Wrap
- Scrolling
- Comparision between EJ1 and EJ2 Spreadsheet features
- Common Properties
- Common Methods
- Common Events
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 TypeScript Spreadsheet control
2 May 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 new ej.Spreadsheet($("#sheet"), { allowEditing: true });
|
Property: allowEditing let spreadsheet: Spreadsheet = new Spreadsheet({ allowEditing: true });spreadsheet.appendTo('#sheet');
|
| Edit a particular cell |
Method: XLEdit.editCell let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLEdit.editCell(1, 1);
|
Method: startEdit let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.selectRange('A1'); ssObj.startEdit();
|
| Save the edited cell value |
Method: XLEdit.saveCell let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLEdit.saveCell();
|
Method: endEdit let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.endEdit();
|
| Update a particular cell value |
Method: XLEdit.updateCell let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLEdit.updateCell({rowIndex: 1, colIndex: 1}, "product");
|
Method: updateCell let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.updateCell({ value: 'product' }, 'A1');
|
| Triggers when the cell is edited |
Event: cellEdit new ej.Spreadsheet($("#sheet"), { cellEdit: (args) => { } });
|
Event: cellEdit new Spreadsheet({ cellEdit: (args) => { } });
|
| Triggers when the edited cell is saved |
Event: cellSave new ej.Spreadsheet($("#sheet"), { cellSave: (args) => { } });
|
Event: cellSave new Spreadsheet({ cellSave: (args) => { } });
|
Selection
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the selection feature |
Property: allowSelection new ej.Spreadsheet($("#sheet"), { allowSelection: true });
|
Property: selectionSettings.mode new Spreadsheet({ selectionSettings: { mode: 'Multiple' } });
|
| Defines active cell in the sheet |
Property: selectionSettings.activeCell new ej.Spreadsheet($("#sheet"), { selectionSettings: { activeCell: "A1" } });
|
Property: activeCell new Spreadsheet({ sheets: [{ activeCell: "A1 }] });
|
| Set selection unit |
Property: selectionSettings.selectionUnit new ej.Spreadsheet($("#sheet"), { selectionSettings: { selectionUnit: ej.Spreadsheet.SelectionUnit.Single } });
|
Property: selectionSettings.mode new Spreadsheet({ selectionSettings: { mode: 'Single' } });
|
| Select the specified range of cells |
Method: XLSelection.selectRange let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSelection.selectRange("A1:B2");
|
Method: selectRange let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.selectRange("A1:B2");
|
| Select a cell or range |
Method: performSelection let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.performSelection("B1:C3");
|
Method: selectRange let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.selectRange("B1:C3");
|
| Triggers before the cell selection |
Event: beforeCellSelect new ej.Spreadsheet($("#sheet"), { beforeCellSelect: (args) => { } });
|
Event: beforeSelect new Spreadsheet({ beforeSelect: (args) => { } });
|
| Triggers when the cell is selected |
Event: cellSelected new ej.Spreadsheet($("#sheet"), { cellSelected: (args) => { } });
|
Event: select new Spreadsheet({ select: (args) => { } });
|
Clipboard
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the clipboard feature |
Property: allowClipboard new ej.Spreadsheet($("#sheet"), { allowClipboard: true });
|
Property: enableClipboard new Spreadsheet({ enableClipboard: true });
|
| Copy the selected cells |
Method: XLClipboard.copy let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLClipboard.copy();
|
Method: copy let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.copy("A1");
|
| Cut the selected cells |
Method: XLClipboard.cut let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLClipboard.cut();
|
Method: cut let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.cut("A1");
|
| Paste the cut or copied cells data |
Method: XLClipboard.paste let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLClipboard.paste();
|
Method: paste let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.paste("B1");
|
Formulas
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the formula bar |
Property: allowFormulaBar new ej.Spreadsheet($("#sheet"), { allowFormulaBar: true });
|
Property: showFormulaBar new Spreadsheet({ showFormulaBar: true });
|
| Set name manager |
Property: nameManager new ej.Spreadsheet($("#sheet"), { nameManager: [{ name: "inputRange", refersto: "=Sheet1!$A$1:$A$2" }] });
|
Property: definedNames new Spreadsheet({ definedNames: [{ name: 'namedRange1', refersTo: 'Sheet1!A1:B5' }] });
|
| Add the custom formulas |
Property: customFormulas new ej.Spreadsheet($("#sheet"), { customFormulas: [{ formulaName:"CUSTOMTOTAL", functionName:"customTotal" }] });function customTotal(args) { }
|
Method: addCustomFunction let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.addCustomFunction("CustomFuntion", "SQRT");window.CustomFuntion = num => Math.sqrt(num);
|
| Method to Add custom formulas |
Method: addCustomFormula let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.addCustomFormula("CUSTOMTOTAL", "customTotal");function customTotal(args){ }
|
Method: addCustomFunction let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.addCustomFunction("CustomFuntion", "SQRT");window.CustomFuntion = num => Math.sqrt(num);
|
| Add a name for a range in the name manager |
Method: XLRibbon.addNamedRange let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.addNamedRange("PRICE_LIST", "=Sheet1!$A$2:$A$7");
|
Method: addDefinedName let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.addDefinedName({name: 'value', refersTo: '=Sheet1!B2' });
|
| Delete the defined name for a range in the name manager |
Method: XLRibbon.removeNamedRange let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.removeNamedRange("PRICE_LIST");
|
Method: removeDefinedName let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.removeDefinedName('value');
|
Formatting
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the cell format feature |
Property: allowCellFormatting new ej.Spreadsheet($("#sheet"), { allowCellFormatting: true });
|
Property: allowCellFormatting new Spreadsheet({ allowCellFormatting: true });
|
| Enables or disables the conditional format feature |
Property: allowConditionalFormats new ej.Spreadsheet($("#sheet"), { allowConditionalFormats: true });
|
Property: allowConditionalFormat new Spreadsheet({ allowConditionalFormat: true });
|
| Enables or disables the cell border feature |
Property: formatSettings.allowCellBorder new ej.Spreadsheet($("#sheet"), { formatSettings: { allowCellBorder: true } });
|
By default, it is enabled by enabling the allowCellFormatting property |
| Enables or disables the decimal places |
Property: formatSettings.allowDecimalPlaces new ej.Spreadsheet($("#sheet"), { formatSettings: { allowDecimalPlaces: true } });
|
By default, it is enabled by enabling the allowNumberFormatting property |
| Specifies the conditional formatting for the range of cells |
Property: sheets.cFormatRule new ej.Spreadsheet($("#sheet"), { sheets: [{ cFormatRule: [{ action: ej.Spreadsheet.CFormatRule.LessThan, inputs: ["30"], color: ej.Spreadsheet.CFormatHighlightColor.RedFillwithDarkRedText, range: "A1:E1" }] }] });
|
Property: sheets.conditionalFormats new Spreadsheet({ sheets: [{ conditionalFormats: [{ type: "GreaterThan", cFColor: "RedFT", value: 700, range: "B2:B9" }] }] });
|
| Clear the applied conditional formatting rules |
Method: XLCFormat.clearCF let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCFormat.clearCF([1, 0, 7, 0]);
|
Method: clearConditionalFormat let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.clearConditionalFormat("A1:B3");
|
| Set the conditional formatting rule |
Method: XLCFormat.setCFRule let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCFormat.setCFRule({ action: "lessthan", inputs: ["30"], color: "yellowft", range: "H3:H7" });
|
Method: conditionalFormat let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.conditionalFormat({type:"GreaterThan" cFColor:"RedFT" value:"700", range:"B2:B9"});
|
| Set format style for the range of cells |
Method: XLFormat.format let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLFormat.format({style:{ "background-color": "#C0C0C0"}}, "A1:C10");
|
Method: cellFormat let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
|
| Triggers before formatting the cells |
Event: beforeCellFormat new ej.Spreadsheet($("#sheet"), { beforeCellFormat: (args) => { } });
|
Event: beforeCellFormat new Spreadsheet({ beforeCellFormat: (args) => { } });
|
| Specifies the border for the cell |
Property: sheets.border new ej.Spreadsheet($("#sheet"), { sheets: [{ border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }] }] });
|
Property: sheets.rows.cells.border new Spreadsheet({ sheets: [{ rows: [{ cells: [{ border: '1px solid #456534' }] }] }] });
|
| Set border for the specified range of cells |
Method: setBorder let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.setBorder({ style: "solid", type: "outside", color: "#000000"}, "B2:B6");
|
Method: setBorder let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.setBorder({ border: "1px solid #000000" }, "B2:B6", "Outer");
|
Filtering
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the filtering feature |
Property: allowFiltering new ej.Spreadsheet($("#sheet"), { allowFiltering: true });
|
Property: allowFiltering new Spreadsheet({ allowFiltering: true });
|
| Clear the filter in the filtered columns |
Method: XLFilter.clearFilter let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLFilter.clearFilter();
|
Method: clearFilter let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.clearFilter();
|
| Apply filter for the specified range of cells |
Method: XLFilter.filter let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLFilter.filter("A3:C8");
|
Method: applyFilter let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.applyFilter([{ field: 'E', operator: 'equal', value: '20' }], 'A1:H1');
|
Sorting
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the sorting feature |
Property: allowSorting new ej.Spreadsheet($("#sheet"), { allowSorting: true });
|
Property: allowSorting new Spreadsheet({ allowSorting: true });
|
| Sort a particular range of cells based on its values |
Method: XLSort.sortByRange let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSort.sortByRange("A1:D3", "B", "ascending");
|
Method: sort let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.sort({ sortDescriptors: { order: 'Ascending' }, containsHeader: true}, 'A1:H11');
|
Hyperlink
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the hyperlink feature |
Property: allowHyperlink new ej.Spreadsheet($("#sheet"), { allowHyperlink: true });
|
Property: allowHyperlink new Spreadsheet({ allowHyperlink: true });
|
| Remove the hyperlink in the specified cells |
Method: removeHyperlink let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.removeHyperlink("A2:A3");
|
Method: removeHyperlink let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.removeHyperlink("A2:A3");
|
| Set the hyperlink in the specified cells |
Method: setHyperlink let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.setHyperlink("A2:A3",{"cellAddr":"A2:A8"}, 3);
|
Method: addHyperlink let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.addHyperlink({ address: 'B2' }, 'A1');
|
Protection
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the lock cell feature |
Property: allowLockCell new ej.Spreadsheet($("#sheet"), { allowLockCell: true });
|
By default, it is enabled. |
| Protect or Unprotect the active sheet |
Method: protectSheet let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.protectSheet();
|
Method: protectSheet let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.protectSheet(0, {});
|
| Lock or Unlock the range of cells |
Method: lockCells let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.lockCells("A3:B5", true);
|
Method: lockCells let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.lockCells("A3:B5", true);
|
Find and Replace
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the find & replace feature |
Property: allowSearching new ej.Spreadsheet($("#sheet"), { allowSearching: true });
|
Property: allowFindAndReplace new Spreadsheet({ allowFindAndReplace: true });
|
| Find the next occurrence of the given value |
Method: XLSearch.findNext let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSearch.findNext("g", {isCSen: false, isEMatch: false, type: "value", mode: "sheet", searchBy: "rows"}, 1);
|
Method: find let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.find({ value: "Jenna Schoolfield", sheetIndex: 1, findOpt: "next", mode: "Sheet", isCSen: false, isEMatch: false, searchBy: "By Row" });
|
| Find the previous occurrence of the given value |
Method: XLSearch.findPrevious let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSearch.findPrevious("g", {isCSen: true, isEMatch: false, type: "value", mode: "sheet", searchBy: "columns"}, 1);
|
Method: find let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.find({ value: "Jenna Schoolfield", sheetIndex: 1, findOpt: "previous", mode: "Sheet", isCSen: false, isEMatch: false, searchBy: "By Row" });
|
| Find and replace all the data by sheet |
Method: XLSearch.replaceAllBySheet let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSearch.replaceAllBySheet("Sheet", "Spreadsheet", true, false);
|
Method: replace let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.replace({replaceValue: 'new value', mode: 'Sheet', replaceBy: 'replaceAll', value: '10'});
|
| Find and replace all the data by workbook |
Method: XLSearch.replaceAllByBook let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLSearch.replaceAllByBook("Sheet", "Spreadsheet", true, false);
|
Method: replace let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.replace({replaceValue: 'new value', mode: 'Workbook', replaceBy: 'replaceAll', value: '10'});
|
Ribbon
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Show or hide the ribbon |
Property: showRibbon new ej.Spreadsheet($("#sheet"), { showRibbon: true });
|
Property: showRibbon new Spreadsheet({ showRibbon: true });
|
| Add the menu items in the file menu |
Method: XLRibbon.addMenuItem let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.addMenuItem([{ id: "newitem", text: "New Item", parentId: "FILE" }], 2);
|
Method: addFileMenuItems let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.addFileMenuItems([{ text: 'New Item' }], "Save As");
|
| Add the tab in the ribbon |
Method: XLRibbon.addTab let xlObj = $("#sheet").data("ejSpreadsheet"); let tabGroup = [{ alignType: ej.Ribbon.AlignType.Rows, content: [{ groups: [{ id: "new", text: "New", toolTip: "New", buttonSettings: { contentType: ej.ContentType.ImageOnly, imagePosition: ej.ImagePosition.ImageTop, prefixIcon: "e-icon e-ssr-cut",click: "executeAction" }}], defaults: { type: ej.Ribbon.Type.Button, width: 60, height: 70} }] }];xlObj.XLRibbon.addTab("Tab2", tabGroup, 2);
|
Method: addRibbonTabs let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.addRibbonTabs([{ header: { text: 'Custom' }, content: [{ text: 'Custom', tooltipText: 'Custom Btn' }] }], 'Data');
|
| Disable ribbon items |
Method: XLRibbon.disableRibbonItems let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.disableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]);
|
Method: enableToolbarItems let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.enableToolbarItems('Home', ['spreadsheet_line-through'], false);
|
| Enable ribbon items |
Method: XLRibbon.enableRibbonItems let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.enableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]);
|
Method: enableToolbarItems let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.enableToolbarItems('Home', ['spreadsheet_line-through']);
|
| Hide the file menu in the ribbon tab |
Method: XLRibbon.hideMenu let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLRibbon.hideMenu();
|
Method: hideFileMenuItems let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.hideFileMenuItems(['File']);
|
| Triggers when the file menu item is selected |
Event: menuClick new ej.Spreadsheet($("#sheet"), { menuClick: (args) => { } });
|
Event: fileMenuItemSelect new Spreadsheet({ fileMenuItemSelect: (args) => { } });
|
Undo and Redo
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the undo and redo feature |
Property: allowUndoRedo new ej.Spreadsheet($("#sheet"), { allowUndoRedo: true });
|
Property: allowUndoRedo new Spreadsheet({ allowUndoRedo: true });
|
| Update the details for custom undo and redo operations. |
Method: updateUndoRedoCollection let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.updateUndoRedoCollection({ action: "custom", cell: xlObj.getActiveCell(), sheetIndex: 1 });
|
Method: updateUndoRedoCollection let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: 0, colIdx: 0, action: 'customCSS' } });
|
Worksheet
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Set active sheet index in the workbook |
Property: activeSheetIndex new ej.Spreadsheet($("#sheet"), { activeSheetIndex: true });
|
Property: activeSheetIndex new Spreadsheet({ activeSheetIndex: true });
|
| Specifies the rows for a sheet |
Property: sheets.rows new ej.Spreadsheet($("#sheet"), { sheets: [{ rows:[{ height:30, index: 1, cells:[{ value: "Item Name" }] }] }] });
|
Property: sheets.rows new Spreadsheet({ sheets: [{ rows: [{ height:30, index:1, cells: [{ value: "Item Name" }] }] }] });
|
| Specifies the cells of a row |
Property: sheets.rows.cells new ej.Spreadsheet($("#sheet"), { sheets: [{ rows:[{ cells:[{ index: 1, value: "Item Name", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }, format: { type: "general" }, hyperlink: { webAddr: "www.google.com" }, isLocked: true }] }] }] });
|
Property: sheets.rows.cells new Spreadsheet({ sheets: [{ rows: [{ cells: [{ index:1, value: "Item Name", style:{ fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', backgroundColor: '#428bca', border: '1px solid #e0e0e0' }, format : "General", hyperlink: 'https://www.google.com/', isLocked: true }] }] }] });
|
| Show or hide the grid lines |
Property: sheets.showGridlines new ej.Spreadsheet($("#sheet"), { sheets: [{ showGridlines: true }] });
|
Property: sheets.showGridLines new Spreadsheet({ sheets: [{ showGridLines: true }] });
|
| Show or hide the headings |
Property: sheets.showHeadings new ej.Spreadsheet($("#sheet"), { sheets: [{ showHeadings: true }] });
|
Property: sheets.showHeaders new Spreadsheet({ sheets: [{ showHeaders: true }] });
|
| Specifies the name for the sheet |
Property: sheets.sheetName new ej.Spreadsheet($("#sheet"), { sheets: [{ sheetName: "Sheet Name" }] });
|
Property: sheets.name new Spreadsheet({ sheets: [{ name: "Sheet Name }] });
|
| Show or hide the pager |
Property: showPager new ej.Spreadsheet($("#sheet"), { showPager: true });
|
Property: showSheetTabs new Spreadsheet({ showSheetTabs: true });
|
| Defines the number of rows to be rendered in the sheet |
Property: sheets.rowCount new ej.Spreadsheet($("#sheet"), { sheets: [{ rowCount: 21 }] });
|
Property: sheets.rowCount new Spreadsheet({ sheets: [{ rowCount: 21 }] });
|
| Defines the number of columns to be rendered in the sheet |
Property: sheets.colCount new ej.Spreadsheet($("#sheet"), { sheets: [{ colCount: 25 }] });
|
Property: colCount new Spreadsheet({ sheets: [{ colCount: 21 }] });
|
Open and Save
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the import feature |
Property: allowImport new ej.Spreadsheet($("#sheet"), { allowImport: true });
|
Property: allowOpen new Spreadsheet({ allowOpen: true });
|
| Enables or disables the exporting feature |
Property: exportSettings.allowExporting new ej.Spreadsheet($("#sheet"), { exportSettings: { allowExporting: true } });
|
Property: allowSave new Spreadsheet({ allowSave: true });
|
| Defines the excelUrl to export to the excel format |
Property: exportSettings.excelUrl new ej.Spreadsheet($("#sheet"), { exportSettings: { excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport" } });
|
Property: saveUrl new Spreadsheet({ saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save' });
|
| Defines the csvUrl to export to the csv format |
Property: exportSettings.csvUrl new ej.Spreadsheet($("#sheet"), { exportSettings: { csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport" } });
|
Property: saveUrl You can use the same service url and specify saveType as Csv in the beforeSave event new Spreadsheet({ saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', beforeSave: (args) => { args.saveType = 'Csv' } });
|
| Import mapper to perform the import feature |
Property: importSettings.importMapper new ej.Spreadsheet($("#sheet"), { importSettings: { importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import" } });
|
Property: openUrl new Spreadsheet({ openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open' });
|
| Import excel file |
Method: import let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.import({ file: file });
|
Method: open let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.open({ file: file });
|
| Load JSON data of the Spreadsheet |
Method: loadFromJSON let xlObj = $("#sheet").data("ejSpreadsheet"); let response = xlObj.saveAsJSON(); xlObj.loadFromJSON(response);
|
Method: openFromJson let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.saveAsJson().then(response => (ssObj.openFromJson({ file: response.jsonObject })));
|
| Triggers when a file is imported |
Event: onImport new ej.Spreadsheet($("#sheet"), { onImport: (args) => { } });
|
Event: openComplete new Spreadsheet({ openComplete: (args) => { } });
|
| Triggers when the opened Excel file fails to load |
Event: openFailure new ej.Spreadsheet($("#sheet"), { openFailure: (args) => { } });
|
Event: openFailure new Spreadsheet({ openFailure: (args) => { } });
|
| Save the sheet data as Excel or CSV document |
Method: XLExport.export let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLExport.export("Excel");
|
Method: save let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.save({ saveType: 'Xlsx' });
|
| Save the sheet data as Excel or CSV document |
Method: XLExport.export let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLExport.export("Excel");
|
Method: save let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.save({ saveType: 'Xlsx' });
|
| Save JSON data of the Spreadsheet |
Method: saveAsJSON let xlObj = $("#sheet").data("ejSpreadsheet"); let response = xlObj.saveAsJSON(); xlObj.loadFromJSON(response);
|
Method: saveAsJson let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.saveAsJson().then(response => (ssObj.openFromJson({ file: response.jsonObject })));
|
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 new ej.Spreadsheet($("#sheet"), { sheets: [{ rangeSettings: [{ dataSource: defaultData, showHeader: true, startCell: "A1", query: ej.Query().take(50) }] }] });
|
Property: sheets.ranges new Spreadsheet({ sheets: [{ ranges: [{ dataSource:defaultData, startCell: "A1", showFieldAsHeader: true, query:query }] }] });
|
Context Menu
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the context menu |
Property: enableContextMenu new ej.Spreadsheet($("#sheet"), { enableContextMenu: true });
|
Property: enableContextMenu new Spreadsheet({ enableContextMenu: true });
|
| Dynamically add items in the context menu |
Method: XLCMenu.addItem let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.Cell, [{"text":"Added item 1!!!", "url":"#", "id": "Added item1", "spriteCssClass": "e-icon e-ss-cut" }], 'insertbefore');
|
Method: addContextMenuItems let ssObj: Spreadsheet = new Spreadsheet({ contextMenuBeforeOpen: (args) => { ssObj.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false); } });
|
| Disable the items in the context menu |
Method: XLCMenu.disableItem let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCMenu.disableItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]);
|
Method: enableContextMenuItems let ssObj: Spreadsheet = new Spreadsheet({contextMenuBeforeOpen: (args) => { ssObj.enableContextMenuItems(['Copy'], false) } });
|
| Enable the items in the context menu |
Method: XLCMenu.enableItem let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCMenu.enableItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]);
|
Method: enableContextMenuItems let ssObj: Spreadsheet = new Spreadsheet({contextMenuBeforeOpen: (args) => { ssObj.enableContextMenuItems(['Copy'], true) } });
|
| Remove the items in the context menu |
Method: XLCMenu.removeItem let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLCMenu.removeItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]);
|
Method: removeContextMenuItems let ssObj: Spreadsheet = new Spreadsheet({contextMenuBeforeOpen: (args) => { ssObj.removeContextMenuItems(['Copy']); } });
|
| Triggers before the context menu is opened |
Event: beforeOpen new ej.Spreadsheet($("#sheet"), { beforeOpen: (args) => { } });
|
Event: contextMenuBeforeOpen new Spreadsheet({ contextMenuBeforeOpen: (args) => { } });
|
| Triggers when the context menu item is selected |
Event: contextMenuClick new ej.Spreadsheet($("#sheet"), { contextMenuClick: (args) => { } });
|
Event: contextMenuItemSelect new Spreadsheet({ contextMenuItemSelect: (args) => { } });
|
Cell Template
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the cell type feature |
Property: allowCellType new ej.Spreadsheet($("#sheet"), { allowCellType: true });
|
By default, it is enabled. |
| Specifies the cell types for a cell or range |
Property: sheets.cellTypes new ej.Spreadsheet($("#sheet"), { sheets: [{ cellTypes: [{ range: 'F5', settings: { type: ej.Spreadsheet.CustomCellType.Button, background-color': 'yellow', color: 'black', text: 'BUTTON' } }] }] });
|
Property: sheets.ranges.template new Spreadsheet({ sheets: [{ ranges: [{ template : "<button class='e-button-template'>BUTTON</button>", address : "F5" }] }] });
|
Merge
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the merge feature |
Property: allowMerging new ej.Spreadsheet($("#sheet"), { allowMerging: true });
|
Property: allowMerge new Spreadsheet({ allowMerge: true });
|
| Merge cells across |
Method: mergeAcrossCells let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.mergeAcrossCells("A3:B5");
|
Method: merge let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.merge("A3:B5", "Horizontally");
|
| Merge the specified ranges |
Property: sheets.mergeCells new ej.Spreadsheet($("#sheet"), { sheets: [{ mergeCells:["A1:A2"] }] });
|
Property: sheets.rows.cells.rowSpan & sheets.rows.cells.colSpan new Spreadsheet({ sheets: [{ rows: [{ cells: [{ rowSpan:2, colSpan:2 }] }] }] });
|
| Method to merge the specified ranges |
Method: mergeCells let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.mergeCells("A3:B5");
|
Method: merge let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.merge("A3:B5", "All");
|
Insert and Delete
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the delete feature |
Property: allowDelete new ej.Spreadsheet($("#sheet"), { allowDelete: true });
|
Property: allowDelete new Spreadsheet({ allowDelete: true });
|
| Enables or disables the insert feature |
Property: allowInsert new ej.Spreadsheet($("#sheet"), { allowInsert: true });
|
Property: allowInsert new Spreadsheet({ allowInsert: true });
|
| Add a new sheet |
Method: addNewSheet let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.addNewSheet();
|
Method: insertSheet let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.insertSheet();
|
| Insert a column |
Method: insertEntireColumn let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.insertEntireColumn(1, 2);
|
Method: insertColumn let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.insertColumn(1, 2);
|
| Insert a row |
Method: insertEntireRow let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.insertEntireRow(1, 2);
|
Method: insertRow let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.insertRow(1, 2);
|
| Insert a sheet |
Method: insertSheet let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.insertSheet();
|
Method: insertSheet let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.insertSheet();
|
| Delete the entire column |
Method: deleteEntireColumn let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.deleteEntireColumn(2, 3);
|
Method: delete let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.delete(2, 3, 'Column');
|
| Delete the entire row |
Method: deleteEntireRow let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.deleteEntireRow(2, 3);
|
Method: delete let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.delete(2, 3, 'Row');
|
| Delete a sheet |
Method: deleteSheet let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.deleteSheet(2);
|
Method: delete let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.delete(2, null, 'Sheet');
|
Clear
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the clear feature |
Property: allowClear new ej.Spreadsheet($("#sheet"), { allowClear: true });
|
By default, it is enabled. |
| Clear all the data and format in the specified range of cells |
Method: clearAll let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.clearAll("A2:A6");
|
Method: clear let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.clear({ type: "Clear All", range: "A2:A6" });
|
| Clear all the format in the specified range of cells |
Method: clearAllFormat let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.clearAllFormat("A2:A6");
|
Method: clear let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.clear({ type: "Clear Formats", range: "A2:A6" });
|
| Clear the contents in the specified range of cells |
Method: clearContents let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.clearContents("A2:A6");
|
Method: clear let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.clear({ type: "Clear Contents", range: "A2:A6" });
|
Data Validation
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the data validation feature |
Property: allowDataValidation new ej.Spreadsheet($("#sheet"), { allowDataValidation: true });
|
Property: allowDataValidation new Spreadsheet({ allowDataValidation: true });
|
| Apply data validation rules in a selected range of cells based on the defined condition |
Method: XLValidate.applyDVRules let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLValidate.applyDVRules("A1:D3", ["Between", "15", "20"], "number" ,true, true);
|
Method: addDataValidation let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5');
|
| Clear the applied validation rules in a specified range of cells |
Method: XLValidate.clearDV let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLValidate.clearDV("A2:A7");
|
Method: removeDataValidation let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.removeDataValidation("A2:A5");
|
| Clear invalid data highlights in the given range |
Method: XLValidate.clearHighlightedValData let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLValidate.clearHighlightedValData("A2:A7");
|
Method: removeInvalidHighlight let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.removeInvalidHighlight("A1:H5");
|
| Highlight invalid data in a specified range of cells |
Method: XLValidate.highlightInvalidData let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLValidate.highlightInvalidData("A2:A7");
|
Method: addInvalidHighlight let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.addInvalidHighlight('A1:H5');
|
Wrap
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the wrap text feature |
Property: allowWrap new ej.Spreadsheet($("#sheet"), { allowWrap: true });
|
Property: allowWrap new Spreadsheet({ allowWrap: true });
|
| Unwrap the specified range of cells |
Method: unWrapText let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.unWrapText("A1:B3");
|
Method: wrap let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.wrap("A1:B3", false);
|
| Wrap the specified range of cells |
Method: wrapText let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.wrapText("A1:B3");
|
Method: wrap let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.wrap("A1:B3");
|
Scrolling
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Enables or disables the scrolling feature |
Property: scrollSettings.allowScrolling new ej.Spreadsheet($("#sheet"), { scrollSettings: { allowScrolling: true } });
|
Property: allowScrolling new Spreadsheet({ allowScrolling: true });
|
| Enables or disables the sheet on demand |
Property: scrollSettings.allowSheetOnDemand new ej.Spreadsheet($("#sheet"), { scrollSettings: { allowSheetOnDemand: true } });
|
By default, each sheet will be rendered on demand |
| Enables or disables the virtual scrolling feature |
Property: scrollSettings.allowVirtualScrolling new ej.Spreadsheet($("#sheet"), { scrollSettings: { allowVirtualScrolling: true } });
|
Property: scrollSettings.enableVirtualization new Spreadsheet({ scrollSettings: { enableVirtualization: true } });
|
| Set the scroll mode to finite |
Property: scrollSettings.scrollMode new ej.Spreadsheet($("#sheet"), { scrollSettings: { scrollMode: ej.Spreadsheet.scrollMode.Normal } });
|
Property: scrollSettings.isFinite new Spreadsheet({ scrollSettings: { isFinite: true } });
|
| Perform goto operation |
Method: XLScroll.goTo let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLScroll.goTo("A30");
|
Method: goTo let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.goTo('A30');
|
| Scroll the sheet content to the specified cell address |
Method: XLScroll.scrollToCell let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLScroll.scrollToCell("A30");
|
Method: goTo let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.goTo('A30');
|
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 new ej.Spreadsheet($("#sheet"), { allowKeyboardNavigation: true });
|
Property: enableKeyboardNavigation new Spreadsheet({ enableKeyboardNavigation: true });
|
| Enables or disables the resizing feature |
Property: allowResizing new ej.Spreadsheet($("#sheet"), { allowResizing: true });
|
Property: allowResizing new Spreadsheet({ allowResizing: true });
|
| Add the CSS class to the root element to customize the appearance |
Property: cssClass new ej.Spreadsheet($("#sheet"), { cssClass: "custom-class" });
|
Property: cssClass new Spreadsheet({ cssClass: "custom-class" });
|
| Enables or disables the touch support |
Property: enableTouch new ej.Spreadsheet($("#sheet"), { enableTouch: true });
|
By default, it is enabled. |
| Overrides the global culture and localization |
Property: locale new ej.Spreadsheet($("#sheet"), { locale: "en-ES" });
|
Property: locale new Spreadsheet({ locale: "en-US" });
|
| Enables or disables the picture feature |
Property: pictureSettings.allowPictures new ej.Spreadsheet($("#sheet"), { pictureSettings: { allowPictures: true } });
|
Property: allowImage new Spreadsheet({ allowImage: true });
|
| Set the height of the Spreadsheet |
Property: scrollSettings.height new ej.Spreadsheet($("#sheet"), { scrollSettings: { height: 600 } });
|
Property: height new Spreadsheet({ height:600 });
|
| Set the width of the Spreadsheet |
Property: scrollSettings.width new ej.Spreadsheet($("#sheet"), { scrollSettings: { width: 1300 } });
|
Property: width new Spreadsheet({ width:1300 });
|
| Hide the specified columns |
Property: sheets.hideColumns new ej.Spreadsheet($("#sheet"), { sheets: [{ hideColumns: [3] }] });
|
Property: sheets.columns.hidden new Spreadsheet({ sheets: [{ columns: [{ index:3, hidden: true }] }] });
|
| Hide the specified rows |
Property: sheets.hideRows new ej.Spreadsheet($("#sheet"), { sheets: [{ hideRows: [3] }] });
|
Property: sheets.rows.hidden new Spreadsheet({ sheets: [{ rows: [{ index:3, hidden:true }] }] });
|
Common Methods
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Get the data in the specified range |
Method: getRangeData let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.getRangeData({range: [2, 6, 2, 6], property: ["value", "value2", "format"], sheetIdx: 1});
|
Method: getData let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.getData(getRangeAddress('A1:D5')).then((cells)=>{ cells.forEach((cell, key)=>{ }) });
|
| Get the range indices array based on the specified alpha range |
Method: getRangeIndices let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.getRangeIndices("A1:A9");
|
Method: getRangeIndexes import { getRangeIndexes } from '@syncfusion/ej2-spreadsheet';getRangeIndexes("A1:A9")
|
| Send a paging request to the specified sheet Index |
Method: gotoPage let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.gotoPage(1);
|
Method: goTo let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.goTo('Sheet2!A1');
|
| Hide the specified columns |
Method: hideColumn let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.hideColumn(1, 4);
|
Method: hideColumn let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.hideColumn(1, 4);
|
| Hide the specified rows |
Method: hideRow let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.hideRow(1, 4);
|
Method: hideRow let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.hideRow(1, 4);
|
| Refresh the Spreadsheet |
Method: refreshSpreadsheet let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.refreshSpreadsheet();
|
Method: refresh let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.refresh(0, {});
|
| Set the height for the rows |
Method: setHeightToRows let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.setHeightToRows([{rowIndex: 2, height: 40}]);
|
Method: setRowHeight let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.setRowHeight(40, 2);
|
| Set the width for the columns |
Method: setWidthToColumns let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.setWidthToColumns([{colIndex: 2, width: 40}]);
|
Method: setColWidth let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.setColWidth(40, 2);
|
| Show the hidden columns within the specified range |
Method: showColumn let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.showColumn(3, 6);
|
Method: hideColumn let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.hideColumn(3, 6, false);
|
| Show the hidden rows in the specified range |
Method: showRow let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.showRow(3, 6);
|
Method: hideRow let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.hideRow(3, 6, false);
|
| Show waiting pop-up in the Spreadsheet |
Method: showWaitingPopUp let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.showWaitingPopUp();
|
Method: showSpinner let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.showSpinner();
|
| Hide displayed waiting pop-up in Spreadsheet |
Method: hideWaitingPopUp let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.hideWaitingPopUp();
|
Method: hideSpinner let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.hideSpinner();
|
| Fit the height of rows |
Method: XLResize.fitHeight let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLResize.fitHeight([2,3,4,5]);
|
Method: autoFit let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.autoFit('1:4');
|
| Fit the width of columns |
Method: XLResize.fitWidth let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLResize.fitWidth([2,3,4,5]);
|
Method: autoFit let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.autoFit('A:D');
|
| Set the column width of the specified column index |
Method: XLResize.setColWidth let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLResize.setColWidth(2, 100);
|
Method: setColWidth let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.setColWidth(100, 2);
|
| Set the row height of the specified row index |
Method: XLResize.setRowHeight let xlObj = $("#sheet").data("ejSpreadsheet"); xlObj.XLResize.setRowHeight(2, 100);
|
Method: setRowHeight let ssObj: Spreadsheet = document.getElementById("sheet").ej2_instances[0];ssObj.setRowHeight(100, 2);
|
Common Events
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Triggers for every action before it starts |
Event: actionBegin new ej.Spreadsheet($("#sheet"), { actionBegin: (args) => { } });
|
Event: actionBegin new Spreadsheet({ actionBegin: (args) => { } });
|
| Triggers for every completed action |
Event: actionComplete new ej.Spreadsheet($("#sheet"), { actionComplete: (args) => { } });
|
Event: actionComplete new Spreadsheet({ actionComplete: (args) => { } });
|
| Triggers after the sheet is loaded |
Event: loadComplete new ej.Spreadsheet($("#sheet"), { loadComplete: (args) => { } });
|
Event: created new Spreadsheet({ created: () => { } });
|