ejs-spreadsheet
represents the Angular Spreadsheet Component.
<ejs-spreadsheet></ejs-spreadsheet>
number
Specifies active sheet index in workbook.
<div id='Spreadsheet'></div>
new Spreadsheet({
activeSheetIndex: 2
...
}, '#Spreadsheet');
Defaults to 0
boolean
It allows to enable/disable AutoFill functionalities.
Defaults to true
boolean
It allows you to apply styles (font size, font weight, font family, fill color, and more) to the spreadsheet cells.
Defaults to true
boolean
It allows you to insert the chart in spreadsheet.
Defaults to true
boolean
It allows you to apply conditional formatting to the sheet.
Defaults to true
boolean
It allows you to apply validation to the spreadsheet cells.
Defaults to true
boolean
It allows you to delete rows, columns and sheets from spreadsheet.
Defaults to true
boolean
It allows you to add new data or update existing cell data. If it is false, it will act as read only mode.
Defaults to true
boolean
It allows to enable/disable filter and its functionalities.
Defaults to true
boolean
It allows to enable/disable find and replace with its functionalities.
Defaults to true
boolean
It allows to enable/disable freeze pane functionality in spreadsheet.
Defaults to true
boolean
It allows to enable/disable Hyperlink and its functionalities.
Defaults to true
boolean
It allows you to insert the image in spreadsheet.
Defaults to true
boolean
It allows you to insert rows, columns and sheets in to the spreadsheet.
Defaults to true
boolean
It allows you to merge the range of cells.
Defaults to true
boolean
It allows formatting a raw number into different types of formats (number, currency, accounting, percentage, short date, long date, time, fraction, scientific, and text) with built-in format codes.
Defaults to true
boolean
It allows you to open an Excel file (.xlsx, .xls, and .csv) in Spreadsheet.
Defaults to true
boolean
If allowResizing
is set to true, spreadsheet columns and rows can be resized.
Defaults to true
boolean
It allows you to save Spreadsheet with all data as Excel file (.xlsx, .xls, and .csv).
Defaults to true
boolean
It specifies whether the Spreadsheet should be rendered with scrolling or not.
To customize the Spreadsheet scrolling behavior, use the scrollSettings
property.
Defaults to true
boolean
It allows to enable/disable sort and its functionalities.
Defaults to true
boolean
It allows to enable/disable undo and redo functionalities.
Defaults to true
boolean
It allows to enable/disable wrap text feature. By using this feature the wrapping applied cell text can wrap to the next line, if the text width exceeds the column width.
Defaults to true
Configures the auto fill settings.
<div id='Spreadsheet'></div>
new Spreadsheet({
autoFillSettings: {
fillType: 'FillSeries',
showFillOptions: true
}
...
}, '#Spreadsheet');
The autoFillSettings `fillType` property has FOUR values and it is described below:
* CopyCells: To update the copied cells of the selected range.
* FillSeries: To update the filled series of the selected range.
* FillFormattingOnly: To fill the formats only for the selected range.
* FillWithoutFormatting: To fill without the format of the selected range.
Defaults to { fillType: ‘FillSeries’, showFillOptions: true }
Specifies the cell style options.
<div id='Spreadsheet'></div>
new Spreadsheet({
...
cellStyle: { fontWeight: 'bold', fontSize: 12,
fontStyle: 'italic', textIndent: '2pt'
backgroundColor: '#4b5366', color: '#ffffff'
},
...
}, '#Spreadsheet');
Defaults to {}
string
To specify a CSS class or multiple CSS class separated by a space, add it in the Spreadsheet root element. This allows you to customize the appearance of component.
<div id='spreadsheet'></div>
new Spreadsheet({
cssClass: 'e-custom1 e-custom2',
...
}, '#spreadsheet');
Defaults to ”
Specifies the name for a range and uses it in formula for calculation.
<div id='Spreadsheet'></div>
new Spreadsheet({
...
definedNames: [{ name: 'namedRange1', refersTo: 'Sheet1!A1:B5' }],
...
}, '#Spreadsheet');
Defaults to []
boolean
It enables or disables the clipboard operations (cut, copy, and paste) of the Spreadsheet.
Defaults to true
boolean
It enables or disables the context menu option of spreadsheet. By default, context menu will opens for row header, column header, sheet tabs, and cell.
Defaults to true
boolean
It allows you to interact with cell, sheet tabs, formula bar, and ribbon through the keyboard device.
Defaults to true
boolean
It enables shortcut keys to perform Spreadsheet operations like open, save, copy, paste, and more.
Defaults to true
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
string
| number
Defines the height of the Spreadsheet. It accepts height as pixels, number, and percentage.
<div id='Spreadsheet'></div>
new Spreadsheet({
height: '550px'
...
}, '#Spreadsheet');
Defaults to ‘100%’
boolean
Specifies to protect the workbook.
Defaults to false
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
string
Specifies the service URL to open excel file in spreadsheet.
Defaults to ”
string
Specifies the password.
Defaults to ”
string
Specifies the service URL to save spreadsheet as Excel file.
Defaults to ”
Configures the scroll settings.
<div id='Spreadsheet'></div>
new Spreadsheet({
scrollSettings: {
isFinite: true,
enableVirtualization: false
}
...
}, '#Spreadsheet');
The
allowScrolling
property should betrue
.
Defaults to { isFinite: false, enableVirtualization: true }
Configures the selection settings.
<div id='Spreadsheet'></div>
new Spreadsheet({
selectionSettings: {
mode: 'None'
}
...
}, '#Spreadsheet');
The selectionSettings `mode` property has three values and it is described below:
* None: Disables UI selection.
* Single: Allows single selection of cell, row, or column and disables multiple selection.
* Multiple: Allows multiple selection of cell, row, or column and disables single selection.
Defaults to { mode: ‘Multiple’ }
Configures sheets and its options.
<div id='Spreadsheet'></div>
new Spreadsheet({
sheets: [{
name: 'First Sheet',
range: [{ dataSource: data }],
rows: [{
index: 5,
cells: [{ index: 4, value: 'Total Amount:' },
{ formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } }]
}]
}, {
name: 'Second Sheet',
columns: [{ width: 180 }, { index: 4, width: 130 }]
}]
...
}, '#Spreadsheet');
Defaults to []
boolean
If showAggregate
is set to true, spreadsheet will show the AVERAGE, SUM, COUNT, MIN and MAX values based on the selected cells.
Defaults to true
boolean
It shows or hides the formula bar and its features.
Defaults to true
boolean
It shows or hides the ribbon in spreadsheet.
Defaults to true
boolean
It shows or hides the sheets tabs, this is used to navigate among the sheets and create or delete sheets by UI interaction.
Defaults to true
string
| number
Defines the width of the Spreadsheet. It accepts width as pixels, number, and percentage.
<div id='Spreadsheet'></div>
new Spreadsheet({
width: '550px'
...
}, '#Spreadsheet');
Defaults to ‘100%’
This method is used to unfreeze the frozen rows and columns from the active sheet.
Parameter | Type | Description |
---|---|---|
sheet (optional) | number | string |
Specifies the sheet name or index in which the unfreeze operation will perform. By default, active sheet will be considered. |
Returns void
To add context menu items.
<ejs-spreadsheet #default (contextMenuBeforeOpen)="contextMenuBeforeOpen()"></ejs-spreadsheet>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
contextMenuBeforeOpen() {
// To add context menu items in sheet content context menu.
if(closest(args.event.target, '.e-sheet-content')){
this.spreadsheetObj.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false); //To pass the items, Item before / after that the element to be inserted, Set false if the items need to be inserted before the text.
}
// To add context menu items in column header context menu.
else if(closest(args.event.target, '.e-colhdr-table')){
this.spreadsheetObj.addContextMenuItems([{ text: 'Custom Column' }], 'Insert Column', false);
}
// To add context menu items in row header context menu.
else if(closest(args.event.target, '.e-rowhdr-table')){
this.spreadsheetObj.addContextMenuItems([{ text: 'Custom Row' }], 'Insert Row', false);
}
// To add context menu items in sheet tab context menu.
else if(closest(args.event.target, '.e-toolbar-item')){
this.spreadsheetObj.addContextMenuItems([{ text: 'Custom tab' }], 'Insert', false);
}
}
}
Parameter | Type | Description |
---|---|---|
items | MenuItemModel[] |
Items that needs to be added. |
text | string |
Item before / after that the element to be inserted. |
insertAfter (optional) | boolean |
Set false if the items need to be inserted before the text .By default, items are added after the text . |
isUniqueId (optional) | boolean |
Set true if the given text is a unique id. |
Returns void
To add custom library function.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Add CustomFunction</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To add custom library function.
this.spreadsheetObj.addCustomFunction("CustomFuntion", "SQRT"); // Custom function handler name, Custom function name
}
}
window.CustomFuntion = num => Math.sqrt(num);
Returns void
This method is used to add data validation.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Add DataValidation</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To add the data validation
this.spreadsheetObj.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5'); // specifies the validation rules, range that needs to be add validation.
this.spreadsheetObj.addDataValidation({ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }, 'B2:B5');
this.spreadsheetObj.addDataValidation({ type: 'Date', operator: 'NotEqualTo', value1: '04/11/2019' }, 'F2:F5');
this.spreadsheetObj.addDataValidation({ type: 'Time', operator: 'Between', value1: '10:00:00 AM', value2: '11:00:00 AM' }, 'G2:G5');
this.spreadsheetObj.addDataValidation({ type: 'Decimal', operator: 'LessThan', value1: '100000.00' }, 'H2:H5');
this.spreadsheetObj.addDataValidation({ type: 'List', inCellDropDown: true, value1: '10, 20, 30' }, 'I2:I5'); // Specifies InCellDropDown option in Data Validation.
this.spreadsheetObj.addDataValidation({ type: 'List', inCellDropDown: true, value1: '=Sheet1!A2:A3'}, 'J2:J5'); // Specifies the cell range as data source to the list validation dropdown.
}
}
Parameter | Type | Description |
---|---|---|
rules | ValidationModel |
specifies the validation rules like type, operator, value1, value2, ignoreBlank, inCellDropDown, isHighlighted arguments. |
range (optional) | string |
range that needs to be add validation. |
Returns void
Adds the defined name to the Spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Add DefinedName</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To provide name and range arguments in this method
this.spreadsheetObj.addDefinedName({name: 'value', refersTo: '=Sheet1!B2' });
}
}
Parameter | Type | Description |
---|---|---|
definedName | DefineNameModel |
Specifies the name, scope, comment, refersTo. |
Returns boolean
To add custom file menu items.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Add File Menu Items</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To add custom file menu items
this.spreadsheetObj.addFileMenuItems([{ text: 'Print' }], 'Save As', false); //Specifies the ribbon file menu items to be inserted, text, Set `false` if the `items` need to be inserted before the `text`, isUniqueId? - Set `true` if the given file menu items `text` is a unique id
}
}
Parameter | Type | Description |
---|---|---|
items | MenuItemModel[] |
Specifies the ribbon file menu items to be inserted. |
text | string |
Specifies the existing file menu item text before / after which the new file menu items to be inserted. |
insertAfter (optional) | boolean |
Set false if the items need to be inserted before the text .By default, items are added after the text . |
isUniqueId (optional) | boolean |
Set true if the given file menu items text is a unique id. |
Returns void
To add the hyperlink in the cell
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Add Hyperlink</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To add the hyperlink in the cell
this.spreadsheetObj.addHyperlink("https://www.google.com/", "A5"); //hyperlink, address
}
}
Parameter | Type | Description |
---|---|---|
hyperlink | string | HyperlinkModel |
to specify the hyperlink |
address | string |
to specify the address |
displayText (optional) | string |
to specify the text to be displayed, by default value of the cell will be displayed. |
Returns void
This method is used to highlight the invalid data.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Higlight Invalid Data</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Highlight Invalid Data
this.spreadsheetObj.addInvalidHighlight('A1:H5'); //range
}
}
Parameter | Type | Description |
---|---|---|
range (optional) | string |
range that needs to be highlight the invalid data. |
Returns void
To add custom ribbon tabs.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Add Ribbon Tabs</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To add custom ribbon tabs
this.spreadsheetObj.addRibbonTabs([{ header: { text: 'Custom' }, content: [{ text: 'Custom', tooltipText: 'Custom Btn' }] }], 'Data'); // items , Specifies the existing ribbon header text before which the new tabs will be inserted.
}
}
Parameter | Type | Description |
---|---|---|
items | RibbonItemModel[] |
Specifies the ribbon tab items to be inserted. |
insertBefore (optional) | string |
Specifies the existing ribbon header text before which the new tabs will be inserted. If not specified, the new tabs will be inserted at the end. |
Returns void
To add the custom items in Spreadsheet ribbon toolbar.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Add Toolbar Items</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To add the custom items in Spreadsheet ribbon toolbar.
this.spreadsheetObj.addToolbarItems('Home', [{ type: 'Separator' }, { text: 'Custom', tooltipText: 'Custom Btn' }], 15); // Specifies the ribbon tab header text under which the specified items will be inserted, Specifies the ribbon toolbar items that needs to be inserted, Specifies the index text before which the new items will be inserted.
}
}
Parameter | Type | Description |
---|---|---|
tab | string |
Specifies the ribbon tab header text under which the specified items will be inserted. |
items | ItemModel[] |
Specifies the ribbon toolbar items that needs to be inserted. |
index (optional) | number |
Specifies the index text before which the new items will be inserted. If not specified, the new items will be inserted at the end of the toolbar. |
Returns void
Appends the control within the given HTML Div element.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">AppendTo</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//Appends the control within the given HTML Div element.
this.spreadsheetObj.appendTo('#spreadsheet'); // pass argument as selector of the element, here we passing selector(id) of the spreadsheet element
}
}
Parameter | Type | Description |
---|---|---|
selector | string | HTMLElement |
Target element where control needs to be appended. |
Returns void
Applies the filter UI in the range of cells in the sheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Apply Filter</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, getCellIndexes, getColumnHeaderText,getCell } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Applies the filter UI in the range of cells in the sheet.
let sheet = this.spreadsheetObj.getActiveSheet();
let cell = getCellIndexes(sheet.activeCell);
let predicates = [{
field: getColumnHeaderText(cell[1] + 1),
operator: 'equal',
value: getCell(cell[0], cell[1], sheet).value, matchCase: false,
}];
this.spreadsheetObj.applyFilter(predicates, 'A1:F1');// predicates, range
}
}
Parameter | Type | Description |
---|---|---|
predicates (optional) | PredicateModel[] |
Specifies the predicates. |
range (optional) | string |
Specify the range. |
Returns Promise
Used to perform autofill action based on the specified range in spreadsheet.
Parameter | Type | Description |
---|---|---|
fillRange | string |
Specifies the fill range. |
dataRange (optional) | string |
Specifies the data range. |
direction (optional) | AutoFillDirection |
Specifies the direction(“Down”,“Right”,“Up”,“Left”) to be filled. |
fillType (optional) | AutoFillType |
Specifies the fill type(“FillSeries”,“CopyCells”,“FillFormattingOnly”,“FillWithoutFormatting”) for autofill action. |
Returns void
This method is used to autofit the range of rows or columns
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">AutoFit</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//This method is used to autofit the range of rows or columns
this.spreadsheetObj.autoFit("D:F") //To autofit the column
this.spreadsheetObj.autoFit("5:10"); // To autofit to rows
}
}
Parameter | Type | Description |
---|---|---|
range | string |
range of rows or columns that needs to be autofit. |
Returns void
Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Cell Format</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
this.spreadsheetObj.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
// Setting common styles to whole table cells
this.spreadsheetObj.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
// Column wise styles setting
this.spreadsheetObj.cellFormat({ textAlign: 'center' }, 'A2:A12');
// Setting text-indent to 2 and 4 column
let style: CellStyleModel = { textAlign: 'left', textIndent: '8pt' };
this.spreadsheetObj.cellFormat(style, 'B2:B12');
this.spreadsheetObj.cellFormat(style, 'D2:D12');
this.spreadsheetObj.cellFormat({ fontStyle: 'italic', textAlign: 'right' }, 'C3:C12');
this.spreadsheetObj.cellFormat({ textAlign: 'center' }, 'E2:E12');
}
}
Parameter | Type | Description |
---|---|---|
style | CellStyleModel |
Specifies the cell style. |
range (optional) | string |
Specifies the address for the range of cells. |
Returns void
This method is used to Clear contents, formats and hyperlinks in spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Clear</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
this.spreadsheetObj.clear({type: 'Clear Contents', range: 'A1:A10'}); // Clear the content in the provided range
this.spreadsheetObj.clear({type: 'Clear Formats', range: 'A1:A10'}); // Clear the formats applied in the provided range
this.spreadsheetObj.clear({type: 'Clear Hyperlinks', range: 'A1:A10'}); // Clear the hyperlinks applied in the provided range
this.spreadsheetObj.clear({type: 'Clear All', range: 'B1:B10'}); // Clear the content, formats and hyperlinks applied in the provided range.
}
}
Parameter | Type | Description |
---|---|---|
options | ClearOptions |
Options for clearing the content, formats and hyperlinks in spreadsheet. |
Returns void
This method is used for remove conditional formatting.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Clear Conditional Format</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// This method is used to remove conditional formatting.
this.spreadsheetObj.clearConditionalFormat("A1:B5"); // range that needs to be remove conditional formatting.
this.spreadsheetObj.clearConditionalFormat("Sheet1!A1:B5"); // you can also specify the range with sheetname.
}
}
Parameter | Type | Description |
---|---|---|
range (optional) | string |
range that needs to be remove conditional formatting. |
Returns void
Clears the filter changes of the sheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Clear Filter</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Clears the filter changes of the sheet.
this.spreadsheetObj.clearFilter();
}
}
Parameter | Type | Description |
---|---|---|
field (optional) | string |
Specify the field. |
Returns void
Cancels the edited state, this will not update any value in the cell.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Close Edit</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Cancels the edited state, this will not update any value in the cell.
this.spreadsheetObj.closeEdit();
}
}
Returns void
Used to compute the specified expression/formula.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Compute Expression</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Used to compute the specified expression/formula.
this.spreadsheetObj.computeExpression('522+1'); // pass the expression
this.spreadsheetObj.computeExpression('=SUM(F2:F3)'); //pass the formula as string.
}
}
Parameter | Type | Description |
---|---|---|
formula | string |
Specifies the formula(=SUM(A1:A3)) or expression(2+3). |
Returns string | number
This method is used to add conditional formatting.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Conditional Format</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{ // This method is used to add conditional formatting.
// Apply blue data bar to the specified range.
this.spreadsheetObj.conditionalFormat({ type: 'BlueDataBar', range: 'D3:D18' });
// Apply three stars to the specified range.
this.spreadsheetObj.conditionalFormat({ type: 'ThreeStars', range: 'F3:F18' });
// Highlight the cells that contain a value greater than specified value.
this.spreadsheetObj.conditionalFormat({ type: 'GreaterThan', cFColor: 'RedFT', value: '10/15/2023', range: 'E2:E30' });
// Highlight the cells that contain a value between specified range.
this.spreadsheetObj.conditionalFormat({ type: 'Between', cFColor: 'GreenFT', value: '03/04/2023,06/26/2023', range: 'E2:E30' });
// Highlight the cells that contain a value greater than average of specified range.
this.spreadsheetObj.conditionalFormat({ type: 'AboveAverage', cFColor: 'RedFT', range: 'F2:F30' });
// Apply the RGY(Red-Green-Yellow) color scale to the specified range.
this.spreadsheetObj.conditionalFormat({ type: 'RYGColorScale', range: 'F2:F30' });
}
}
Parameter | Type | Description |
---|---|---|
conditionalFormat | ConditionalFormatModel |
Specify the conditionalFormat. |
Returns void
To copy the specified cell or cells properties such as value, format, style etc…
<ejs-spreadsheet #default >
<e-sheets>
<e-sheet name="Car Sales Report">
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Copy</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
this.spreadsheetObj.copy(); //Copy the selected cell
this.spreadsheetObj.copy('A2'); // specify the address
this.spreadsheetObj.copy('Car Sales Report!B2') // address with sheet name.
}
}
Parameter | Type | Description |
---|---|---|
address (optional) | string |
Specifies the range address. |
Returns Promise
To cut the specified cell or cells properties such as value, format, style etc…
<ejs-spreadsheet #default >
<e-sheets>
<e-sheet name="Car Sales Report">
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Cut</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
this.spreadsheetObj.cut(); //cut the selected cell
this.spreadsheetObj.cut('A2'); // specify the address
this.spreadsheetObj.cut('Car Sales Report!B2') // address with sheet name.
}
}
Parameter | Type | Description |
---|---|---|
address (optional) | string |
Specifies the range address to cut. |
Returns Promise
Used to delete rows, columns and sheets from the spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Delete</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//Used to delete rows, columns and sheets from the spreadsheet.
this.spreadsheetObj.delete(1, 1, "Row", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
this.spreadsheetObj.delete(2, 2, "Column", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
}
}
Parameter | Type | Description |
---|---|---|
startIndex (optional) | number |
Specifies the start sheet / row / column index. |
endIndex (optional) | number |
Specifies the end sheet / row / column index. |
model (optional) | ModelType |
Specifies the delete model type. By default, the model is considered as Sheet . The possible values are,- Row: To delete rows. - Column: To delete columns. - Sheet: To delete sheets. |
sheet (optional) | number | string |
Specifies the sheet name or index in which the delete operation will perform. By default, active sheet will be considered. It is applicable only for model type Row and Column. |
Returns void
Used to delete the chart from spreadsheet.
<ejs-spreadsheet #default (created)="created()"></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Delete Chart</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//Used to delete the chart from spreadsheet.
this.spreadsheetObj.deleteChart("Chart1"); // id - Specifies the chart element id.
}
created() {
// Used to set the chart in spreadsheet.
this.spreadsheetObj.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); // Specifies the options to insert chart in spreadsheet.
}
}
Parameter | Type | Description |
---|---|---|
id (optional) | string |
Specifies the chart element id. |
Returns void
Used to delete the image in spreadsheet.
<ejs-spreadsheet #default (created)="created()"></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Delete Image</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Used to delete the image in spreadsheet.
this.spreadsheetObj.deleteImage("spreadsheet_overlay_picture_1", "A3"); //id - Specifies the id of the image element to be deleted, range - Specifies the range in spreadsheet.
}
created() {
// Used to set the image in spreadsheet.
this.spreadsheetObj.insertImage([{ src: "https://www.w3schools.com/images/w3schools_green.jpg", height: 400, width: 400 }], "A1"); // images - Specifies the options to insert image in spreadsheet, Specifies the range in spreadsheet.
}
}
Parameter | Type | Description |
---|---|---|
id | string |
Specifies the id of the image element to be deleted. |
range (optional) | string |
Specifies the range in spreadsheet. |
Returns void
Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
Returns void
Used to make a duplicate/copy of the sheet in the spreadsheet.
<ejs-spreadsheet #default></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Duplicate Sheet</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Make a duplicate/copy of the active sheet in the spreadsheet.
this.spreadsheetObj.duplicateSheet();
// Make a duplicate/copy of the specified sheet in the spreadsheet.
this.spreadsheetObj.duplicateSheet(1); // index of the sheet to be duplicated
}
}
Parameter | Type | Description |
---|---|---|
sheetIndex (optional) | number |
Specifies the index of the sheet to be duplicated. By default, the active sheet will be duplicated. |
Returns void
To enable / disable context menu items.
<ejs-spreadsheet #default (contextMenuBeforeOpen)="contextMenuBeforeOpen()"></ejs-spreadsheet>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
contextMenuBeforeOpen() {
//To enable / disable context menu items.
this.spreadsheetObj.enableContextMenuItems(['Copy'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
this.spreadsheetObj.enableContextMenuItems(['spreadsheet_cmenu_copy'], false, true); // Contextmenu id that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
}
}
Parameter | Type | Description |
---|---|---|
items | string[] |
Items that needs to be enabled / disabled. |
enable (optional) | boolean |
Set true / false to enable / disable the menu items. |
isUniqueId (optional) | boolean |
Set true if the given text is a unique id. |
Returns void
To enable / disable file menu items.
<ejs-spreadsheet #default (fileMenuBeforeOpen)="fileMenuBeforeOpen()"></ejs-spreadsheet>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
fileMenuBeforeOpen() {
// To enable / disable file menu items.
this.spreadsheetObj.enableFileMenuItems(['New'], false, true); //File menu Items that needs to be enabled / disabled, set `true` / `false` to enable / disable the menu items, set `true` if the given file menu items `text` is a unique id.
}
}
Parameter | Type | Description |
---|---|---|
items | string[] |
Items that needs to be enabled / disabled. |
enable (optional) | boolean |
Set true / false to enable / disable the menu items. |
isUniqueId (optional) | boolean |
Set true if the given file menu items text is a unique id. |
Returns void
To enable / disable the existing ribbon tabs.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Enable Ribbon Tabs</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To enable / disable the existing ribbon tabs.
this.spreadsheetObj.enableRibbonTabs(['Home'], false); // tabs - Specifies the ribbon tab header text which needs to be enabled / disabled, Set `true` / `false` to enable / disable the ribbon tabs.
}
}
Parameter | Type | Description |
---|---|---|
tabs | string[] |
Specifies the tab header text which needs to be enabled / disabled. |
enable (optional) | boolean |
Set true / false to enable / disable the ribbon tabs. |
Returns void
Enables or disables the specified ribbon toolbar items or all ribbon items.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Enable Toolbar Items</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To Enables or disables the specified ribbon toolbar items or all ribbon items
this.spreadsheetObj.enableToolbarItems('Home', ['spreadsheet_line-through'], false); // Specifies the ribbon tab header text under which the toolbar items need to be enabled / disabled, Specifies the toolbar item indexes / unique id's which needs to be enabled / disabled, Boolean value that determines whether the toolbar items should be enabled or disabled.
this.spreadsheetObj.enableToolbarItems('Home', [3, 4], false); // 3,4 - index
}
}
Parameter | Type | Description |
---|---|---|
tab | string |
Specifies the ribbon tab header text under which the toolbar items need to be enabled / disabled. |
items (optional) | number[] | string[] |
Specifies the toolbar item indexes / unique id’s which needs to be enabled / disabled. If it is not specified the entire toolbar items will be enabled / disabled. |
enable (optional) | boolean |
Boolean value that determines whether the toolbar items should be enabled or disabled. |
Returns void
If Spreadsheet is in editable state, you can save the cell by invoking endEdit.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">End Edit</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// If Spreadsheet is in editable state, you can save the cell by invoking endEdit.
this.spreadsheetObj.endEdit();
}
}
Returns void
To find the specified cell value.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Find</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, FindOptions } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To find the specified cell value.
let findOption: FindOptions = {
value: "Jenna Schoolfield", sheetIndex: 0, findOpt: "next", mode: "Sheet", isCSen: false,
isEMatch: false, searchBy: "By Row"
};
this.spreadsheetObj.find(findOption);
}
}
Parameter | Type | Description |
---|---|---|
args | FindOptions |
Specifies the replace value with find args to replace specified cell value. |
Returns void | string
To Find All the Match values Address within Sheet or Workbook.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">FindAll</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, FindOptions } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To Find All the Match values Address within Sheet or Workbook.
this.spreadsheetObj.findAll('shoes', 'Sheet', false, false, spreadsheet.getActiveSheet().id); // Specifies the value to find, Specifies the value to be find within Sheet/Workbook, Specifies the find match with case sensitive or not, Specifies the find match with entire match or not,Specifies the sheetIndex
}
}
Parameter | Type | Description |
---|---|---|
value | string |
Specifies the value to find. |
mode (optional) | string |
Specifies the value to be find within Sheet/Workbook. |
isCSen (optional) | boolean |
Specifies the find match with case sensitive or not. |
isEMatch (optional) | boolean |
Specifies the find match with entire match or not. |
sheetIndex (optional) | number |
Specifies the sheetIndex. If not specified, it will consider the active sheet. |
Returns string[]
This method is used to freeze rows and columns after the specified cell in the Spreadsheet.
Parameter | Type | Description |
---|---|---|
row (optional) | number |
Specifies the freezed row count. |
column (optional) | number |
Specifies the freezed column count. |
sheet (optional) | number | string |
Specifies the sheet name or index in which the freeze operation will perform. By default, active sheet will be considered. |
Returns void
Gets the range of data as JSON from the specified address.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Get Data</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Gets the range of data as JSON from the specified address.
this.spreadsheetObj.getData("Sheet1!A1:B2").then(data => console.log(data)); // Specifies the address with sheet name for range of cells, Gets the range of data as JSON from the specified address
this.spreadsheetObj.getData("A1:B2").then(data => console.log(data)); // Specifies the address for range of cells, Gets the range of data as JSON from the specified address
}
}
Parameter | Type | Description |
---|---|---|
address | string |
Specifies the address for range of cells. |
Returns Promise
Gets the formatted text of the cell.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Get Display Text</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, CellModel, getCell } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To Gets the formatted text of the cell.
let cell: CellModel = getCell(0, 0, this.spreadsheetObj.getActiveSheet()); // rowIndex, colIndex, sheetIndex
console.log(this.spreadsheetObj.getDisplayText(cell)); // to provide the cell model
}
}
Parameter | Type | Description |
---|---|---|
cell | CellModel |
Specifies the cell. |
Returns string
Used to get a row data from the data source with updated cell value.
Parameter | Type | Description |
---|---|---|
index (optional) | number |
Specifies the row index. |
sheetIndex (optional) | number |
Specifies the sheet index. By default, it consider the active sheet index. |
Returns Object[]
Get the select all div of spreadsheet
Returns HTMLElement
Used to navigate to cell address within workbook.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">GoTo</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Used to navigate to cell address within workbook.
this.spreadsheetObj.goTo("B1"); // pass the range
this.spreadsheetObj.goTo("Sheet2!B1"); // You can specify the sheet name with cell address to navigate the specified cell address
}
}
Parameter | Type | Description |
---|---|---|
address | string |
Specifies the cell address you need to navigate. You can specify the address in two formats, {sheet name}!{cell address} - Switch to specified sheet and navigate to specified cell address.{cell address} - Navigate to specified cell address with in the active sheet. |
Returns void
Used to hide/show the columns in spreadsheet.
Parameter | Type | Description |
---|---|---|
startIndex | number |
Specifies the start column index. |
endIndex (optional) | number |
Specifies the end column index. |
hide (optional) | boolean |
Set true / false to hide / show the columns. |
Returns void
To show/hide the file menu items in Spreadsheet ribbon.
<ejs-spreadsheet #default (fileMenuBeforeOpen)="fileMenuBeforeOpen($event)"></ejs-spreadsheet>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
fileMenuBeforeOpen(args) {
//To show/hide the file menu items in Spreadsheet.
this.spreadsheetObj.hideFileMenuItems(['PDF document'], true); // Specifies the file menu items text which is to be show/hide, Set `true` / `false` to hide / show the file menu items.
}
}
Parameter | Type | Description |
---|---|---|
items | string[] |
Specifies the file menu items text which is to be show/hide. |
hide (optional) | boolean |
Set true / false to hide / show the file menu items. |
isUniqueId (optional) | boolean |
Set true if the given file menu items text is a unique id. |
Returns void
To show/hide the existing ribbon tabs.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Hide Ribbon Tabs</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To show/hide the existing ribbon tabs.
spreadsheet.hideRibbonTabs(['Formulas', 'Insert'], true); // specifies the ribbon tab header text which needs to be shown/hidden, Set `true` / `false` to hide / show the ribbon tabs.
}
}
Parameter | Type | Description |
---|---|---|
tabs | string[] |
Specifies the tab header text which needs to be shown/hidden. |
hide (optional) | boolean |
Set true / false to hide / show the ribbon tabs. |
Returns void
Used to hide/show the rows in spreadsheet.
Parameter | Type | Description |
---|---|---|
startIndex | number |
Specifies the start row index. |
endIndex (optional) | number |
Specifies the end row index. |
hide (optional) | boolean |
To hide/show the rows in specified range. |
Returns void
To hide showed spinner manually.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Hide Spinner</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To hide showed spinner manually.
this.spreadsheetObj.hideSpinner();
}
}
Returns void
To show/hide the existing Spreadsheet ribbon toolbar items.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Hide Toolbar Items</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To show/hide the existing Spreadsheet ribbon toolbar items.
this.spreadsheetObj.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 22, 23, 24]); // tab name, index
this.spreadsheetObj.hideToolbarItems('View', [1, 2]);
}
}
Parameter | Type | Description |
---|---|---|
tab | string |
Specifies the ribbon tab header text under which the specified items needs to be hidden / shown. |
indexes | number[] |
Specifies the toolbar indexes which needs to be shown/hidden from UI. |
hide (optional) | boolean |
Set true / false to hide / show the toolbar items. |
Returns void
Used to set the chart in spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Insert Chart</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Used to set the chart in spreadsheet.
this.spreadsheetObj.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); // Specifies the options to insert chart in spreadsheet.
}
}
Parameter | Type | Description |
---|---|---|
chart (optional) | ChartModel[] |
Specifies the options to insert chart in spreadsheet |
Returns void
Used to insert columns in to the spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Insert Column</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To insert the column
this.spreadsheetObj.insertColumn([{index: 1, width: 95}], 1); // startColumn (index, column width), endColumn
}
}
Parameter | Type | Description |
---|---|---|
startColumn (optional) | number | ColumnModel[] |
Specifies the start column index / column model which needs to be inserted. |
endColumn (optional) | number |
Specifies the end column index. |
sheet (optional) | number | string |
Specifies the sheet name or index in which the insert operation will perform. By default, active sheet will be considered. |
Returns void
Used to set the image in spreadsheet.
<ejs-spreadsheet #default (created)="created()"></ejs-spreadsheet>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
created() {
// Used to set the image in spreadsheet.
this.spreadsheetObj.insertImage([{ src: "https://www.w3schools.com/images/w3schools_green.jpg", height: 400, width: 400 }], "A1"); // images - Specifies the options to insert image in spreadsheet, Specifies the range in spreadsheet.
}
}
Parameter | Type | Description |
---|---|---|
images | ImageModel[] |
Specifies the options to insert image in spreadsheet. |
range (optional) | string |
Specifies the range in spreadsheet. |
Returns void
Used to insert rows in to the spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Insert Row</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To insert the row
this.spreadsheetObj.insertRow(4, 4); // startRow, endRow
}
}
Parameter | Type | Description |
---|---|---|
startRow (optional) | number | RowModel[] |
Specifies the start row index / row model which needs to be inserted. |
endRow (optional) | number |
Specifies the end row index. |
sheet (optional) | number | string |
Specifies the sheet name or index in which the insert operation will perform. By default, active sheet will be considered. |
Returns void
Used to insert sheets in to the spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Insert Sheet</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To insert sheets in to the spreadsheet.
this.spreadsheetObj.insertSheet(0, 2); // startSheet, endSheet
}
}
Parameter | Type | Description |
---|---|---|
startSheet (optional) | number | SheetModel[] |
Specifies the start sheet index / sheet model which needs to be inserted. |
endSheet (optional) | number |
Specifies the end sheet index. |
Returns void
To determine whether the cell value in a data validation applied cell is valid or not.
Parameter | Type | Description |
---|---|---|
cellAddress (optional) | string |
Address of the cell. |
Returns boolean
Applies cell lock to the specified range of cells.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Lock Cells</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To Applies cell lock to the specified range of cells.
let protectSetting:ProtectSettingsModel = {
selectCells: true,
formatCells: false,
formatRows: false,
formatColumns: false,
insertLink: false
}
this.spreadsheetObj.protectSheet("Issues", protectSetting);
this.spreadsheetObj.lockCells('A2:AZ100', false); // to unlock the A2:Az100 cells
this.spreadsheetObj.lockCells('A1:Z1', true); // to lock the A1:Z1 cells
}
}
Parameter | Type | Description |
---|---|---|
range (optional) | string |
Specifies the address for the range of cells. |
isLocked (optional) | boolean |
-Specifies the cell is locked or not. |
Returns void
Used to merge the range of cells.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Merge</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To merge the range of cells.
spreadsheet.merge('B1:E2'); // to pass the range
}
}
Parameter | Type | Description |
---|---|---|
range (optional) | string |
Specifies the range of cells as address. |
type (optional) | MergeType |
Specifies the merge type. The possible values are, - All: Merge all the cells between provided range. - Horizontally: Merge the cells row-wise. - Vertically: Merge the cells column-wise. |
Returns void
Used to move the sheets to the specified position in the list of sheets.
<ejs-spreadsheet #default>
<e-sheets>
<e-sheet></e-sheet>
<e-sheet></e-sheet>
<e-sheet></e-sheet>
</e-sheets>
</ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Move Sheet</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Moves the active sheet to the position in the list of sheets.
this.spreadsheetObj.moveSheet(1); // position to move
// Moves the list of specified sheets to the position in the list of sheets.
this.spreadsheetObj.moveSheet(0, [1,2]); // position to move, indexes of the sheets to be moved
}
}
Parameter | Type | Description |
---|---|---|
position | number |
Specifies the position to move a sheet in the list of sheets. |
sheetIndexes (optional) | number[] |
Specifies the indexes of the sheet to be moved. By default, the active sheet will be moved. |
Returns void
Applies the number format (number, currency, percentage, short date, etc…) to the specified range of cells.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Number Format</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, getFormatFromType } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To Applies the number format (number, currency, percentage, short date, etc…) to the specified range of cells.
this.spreadsheetObj.numberFormat('$#,##0.00', 'E1:E3');
// Applied Accounting format to the cells from C3 to E10 range.
this.spreadsheetObj.numberFormat(getFormatFromType('Accounting'), 'C3:E10');
// Applied Percentage format to the cells from F3 to F11 range.
this.spreadsheetObj.numberFormat('0%', 'F3:F10');
}
}
Parameter | Type | Description |
---|---|---|
format | string |
Specifies the number format code. |
range (optional) | string |
Specifies the address for the range of cells. |
Returns void
Opens the Excel file.
<ejs-spreadsheet #default [openUrl]="openUrl" [saveUrl]="saveUrl"></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Open</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
public openUrl = 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open';
public saveUrl = 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save';
onClick(event)
{
// To opens the Excel file.
fetch("https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx")
.then((response) => {
response.blob().then((fileBlob) => {
var file = new File([fileBlob], "Sample.xlsx");
this.spreadsheetObj.open({ file: file });
})
})
}
}
Parameter | Type | Description |
---|---|---|
options | OpenOptions |
Options for opening the excel file. |
Returns void
Opens the specified JSON object.
<ejs-spreadsheet #default [openUrl]="openUrl" [saveUrl]="saveUrl"></ejs-spreadsheet>
<button id="button" (click)="save($event)">Save Json</button>
<button id="button" (click)="open($event)">Load Json</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
public openUrl = 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open';
public saveUrl = 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save';
public response;
save(event)
{
this.spreadsheetObj.saveAsJson().then(Json => (this.response = Json));
}
open(event)
{
this.spreadsheetObj.openFromJson({ file: this.response.jsonObject }); // To load JSON data in the Spreadsheet.
}
}
The available arguments in options are:
Parameter | Type | Description |
---|---|---|
options | Object |
Options for opening the JSON object. |
Returns void
This method is used to paste the cut or copied cells in to specified address.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Paste</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To paste the cut or copied cells in to specified address.
this.spreadsheetObj.paste(); //paste the selected cell
this.spreadsheetObj.paste("B2", "All"); // to pass the range, Specifies the type of paste.
this.spreadsheetObj.paste("B3", "Values"); // to pass the range, Specifies the type of paste.
this.spreadsheetObj.paste("B4", "Formats"); // to pass the range, Specifies the type of paste.
this.spreadsheetObj.paste("B5", "Formulas");// to pass the range, Specifies the type of paste.
}
}
Parameter | Type | Description |
---|---|---|
address (optional) | string |
Specifies the cell or range address. |
type (optional) | PasteSpecialType |
Specifies the type of paste. |
Returns void
To protect the particular sheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Protect Sheet</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent, ProtectSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To protect the particular sheet.
let protectSetting: ProtectSettingsModel = {
selectCells: true,
formatCells: false,
formatRows: false,
formatColumns: false,
insertLink: false
}
this.spreadsheetObj.protectSheet('Car Sales Report', protectSetting); // To provide sheet name, protectSetting
}
}
Parameter | Type | Description |
---|---|---|
sheet (optional) | number | string |
Specifies the sheet to protect. |
protectSettings (optional) | ProtectSettingsModel |
Specifies the protect sheet options. |
password (optional) | string |
Specifies the password to protect. |
Returns void
To perform the redo operation in spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Redo</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To perform the redo operation in spreadsheet.
this.spreadsheetObj.redo();
}
}
Returns void
Used to refresh the spreadsheet in UI level.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Refresh</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Used to refresh the spreadsheet
this.spreadsheetObj.refresh(false); // specifies `true` / `false` to create new workbook in spreadsheet.
}
}
Parameter | Type | Description |
---|---|---|
isNew (optional) | boolean |
Specifies true / false to create new workbook in spreadsheet. |
Returns void
To remove existing context menu items.
<ejs-spreadsheet #default (contextMenuBeforeOpen)="contextMenuBeforeOpen()"></ejs-spreadsheet>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
contextMenuBeforeOpen() {
// To add context menu items.
this.spreadsheetObj.removeContextMenuItems(["Cut"]); //Items that needs to be removed, Set `true` if the given `text` is a unique id.
}
}
Parameter | Type | Description |
---|---|---|
items | string[] |
Items that needs to be removed. |
isUniqueId (optional) | boolean |
Set true if the given text is a unique id. |
Returns void
This method is used for remove validation.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Remove Data Validation</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// This method is used for remove validation.
this.spreadsheetObj.removeDataValidation("A2:A5"); // to pass the range
}
}
Parameter | Type | Description |
---|---|---|
range (optional) | string |
range that needs to be remove validation. |
Returns void
Removes the defined name from the Spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Remove DefinedName</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To Removes the defined name from the Spreadsheet.
this.spreadsheetObj.removeDefinedName({ name: 'value' , scope: 'Workbook'}); //Specifies the name, Specifies the scope of the defined name.
}
}
Parameter | Type | Description |
---|---|---|
definedName | string |
Specifies the name. |
scope | string |
Specifies the scope of the defined name. |
Returns boolean
To remove the hyperlink in the cell
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Remove Hyperlink</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To remove the hyperlink in the cell
this.spreadsheetObj.removeHyperlink("A10"); // to pass the range
this.spreadsheetObj.removeHyperlink("Sheet1!A1"); // you can also pass the range with sheet name
}
}
Parameter | Type | Description |
---|---|---|
range | string |
To specify the range |
Returns void
This method is used for remove highlight from invalid data.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Remove InvalidHighlight</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To remove highlight from invalid data.
this.spreadsheetObj.removeInvalidHighlight("A1:H5"); // to pass the range
}
}
Parameter | Type | Description |
---|---|---|
range (optional) | string |
range that needs to be remove invalid highlight. |
Returns void
To replace the specified cell value.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Replace</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To replace the specified cell value.
this.spreadsheetObj.replace({replaceValue: '10', replaceBy: 'replace', value: '10'}); // Specifies the replace value with find args to replace specified cell value.
}
}
Parameter | Type | Description |
---|---|---|
args | FindOptions |
Specifies the replace value with find args to replace specified cell value. |
Returns void
Used to resize the Spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Resize</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
host: {
'(window:resize)': 'onResize($event)'
},
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onResize(event) {
document.body.style.height = `${document.documentElement.clientHeight}px`;
this.spreadsheetObj.resize();
}
}
Returns void
Saves the Spreadsheet data to Excel file.
<ejs-spreadsheet #default [openUrl]="openUrl" [saveUrl]="saveUrl"></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Save</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
public openUrl = 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open';
public saveUrl = 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save';
onClick(event)
{
// Saves the Spreadsheet data to Excel file.
this.spreadsheetObj.save({ url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: 'Worksheet', saveType: 'Xlsx' }); // Specifies the save URL, filename, file type need to be saved.
}
}
The available arguments in saveOptions are:
Parameter | Type | Description |
---|---|---|
saveOptions (optional) | SaveOptions |
Options for saving the excel file. |
Returns void
Saves the Spreadsheet data as JSON object.
<ejs-spreadsheet #default [openUrl]="openUrl" [saveUrl]="saveUrl"></ejs-spreadsheet>
<button id="button" (click)="save($event)">Save Json</button>
<button id="button" (click)="open($event)">Load Json</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
public openUrl = 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open';
public saveUrl = 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save';
public response;
save(event)
{
this.spreadsheetObj.saveAsJson().then(Json => (this.response = Json));
}
open(event)
{
this.spreadsheetObj.openFromJson({ file: this.response.jsonObject }); // To load JSON data in the Spreadsheet.
}
}
Returns Promise
Selects the cell / range of cells with specified address.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Select Range</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Selects the cell / range of cells with specified address.
this.spreadsheetObj.selectRange("B7:B8");
}
}
Parameter | Type | Description |
---|---|---|
address | string |
Specifies the range address. |
Returns void
Sets the border to specified range of cells.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Set Border</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Sets the border to specified range of cells.
this.spreadsheetObj.setBorder({ border: '1px solid #000000' }, 'C6:G8', 'Outer'); // Specifies the style property which contains border value,Specifies the range of cell reference. If not specified, it will considered the active cell reference, Specifies the Border type
this.spreadsheetObj.setBorder({ border: '1px solid #000000' });
}
}
Parameter | Type | Description |
---|---|---|
style | CellStyleModel |
Specifies the style property which contains border value. |
range (optional) | string |
Specifies the range of cell reference. If not specified, it will considered the active cell reference. |
type (optional) | BorderType |
Specifies the range of cell reference. If not specified, it will considered the active cell reference. |
Returns void
Set the width of column.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Set Columnn Width</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// set the width, column index and sheet index in arguments.
this.spreadsheetObj.setColWidth(120, 2, 1);
}
}
Parameter | Type | Description |
---|---|---|
width (optional) | number | string |
To specify the width |
colIndex (optional) | number |
To specify the colIndex |
sheetIndex (optional) | number |
To specify the sheetIndex |
Returns void
Allows you to set the width to the single or multiple columns.
Parameter | Type | Description |
---|---|---|
width (optional) | number |
Specifies the width for column. |
ranges (optional) | string[] |
Specifies the column range to set the width. If the sheet name is not specified then width will apply to the column in the active sheet. Possible values are * Single column range: [‘F’] or [‘F:F’] * Multiple columns range: [‘A:F’] * Multiple columns with discontinuous range - [‘A:C’, ‘G:I’, ‘K:M’] * Multiple columns with different sheets - [‘Sheet1!A:H’, ‘Sheet2!A:H’, ‘Sheet3!A:H’]. |
Returns void
Set the height of row.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Set Row Height</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// set the height, row index and sheet index in arguments.
this.spreadsheetObj.setRowHeight(40, 2, 1);
}
}
Parameter | Type | Description |
---|---|---|
height (optional) | number | string |
Specifies height needs to be updated. If not specified, it will set the default height 20. |
rowIndex (optional) | number |
Specifies the row index. If not specified, it will consider the first row. |
sheetIndex (optional) | number |
Specifies the sheetIndex. If not specified, it will consider the active sheet. |
edited (optional) | boolean |
Specifies the boolean value. |
Returns void
Allows you to set the height to the single or multiple rows.
Parameter | Type | Description |
---|---|---|
height (optional) | number |
Specifies the height for row. |
ranges (optional) | string[] |
Specifies the row range to set the height. If the sheet name is not specified then height will apply to the rows in the active sheet. Possible values are * Single row range: [‘2’] or [‘2:2’] * Multiple rows range: [‘1:100’] * Multiple rows with discontinuous range - [‘1:10’, ‘15:25’, ‘30:40’] * Multiple rows with different sheets - [‘Sheet1!1:50’, ‘Sheet2!1:50’, ‘Sheet3!1:50’]. |
Returns void
By default, Spreadsheet shows the spinner for all its actions. To manually show spinner you this method at your needed time.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Show Spinner</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// By default, Spreadsheet shows the spinner for all its actions. To manually show spinner you this method at your needed time.
this.spreadsheetObj.showSpinner();
}
}
Returns void
Sorts the range of cells in the active sheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Sort</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To perform sorting on multiple columns
this.spreadsheetObj.sort({ containsHeader: true}, 'A1:H11'); // SortOptions(containsHeader, caseSensitive, sortDescriptors) , Range
}
}
Parameter | Type | Description |
---|---|---|
sortOptions (optional) | SortOptions |
options for sorting. |
range (optional) | string |
address of the data range. |
Returns Promise
Start edit the active cell.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Start Edit</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// Start edit the active cell.
this.spreadsheetObj.startEdit();
}
}
Returns void
Used to split the merged cell into multiple cells.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">UnMerge</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
//To split the merged cell into multiple cells.
spreadsheet.unMerge('B1:E2'); // to pass the range
}
}
Parameter | Type | Description |
---|---|---|
range (optional) | string |
Specifies the range of cells as address. |
Returns void
To perform the undo operation in spreadsheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Undo</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To perform the undo operation in spreadsheet.
this.spreadsheetObj.undo();
}
}
Returns void
This method is used to unfreeze the frozen rows and columns from spreadsheet.
Parameter | Type | Description |
---|---|---|
sheet (optional) | number | string |
Specifies the sheet name or index in which the unfreeze operation will perform. By default, active sheet will be considered. |
Returns void
To unprotect the particular sheet.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">UnprotectSheet</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To unprotect the particular sheet.
this.spreadsheetObj.unprotectSheet("1"); // specify the sheet index to Unprotect.
this.spreadsheetObj.unprotectSheet("Sheet1"); // specify the sheet name to Unprotect.
}
}
Parameter | Type | Description |
---|---|---|
sheet (optional) | number | string |
Specifies the sheet name or index to Unprotect. |
Returns void
To update the action which need to perform.
<ejs-spreadsheet #default >
<e-sheets>
<e-sheet name="Car Sales Report">
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Update Action</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To update the action which need to perform.
this.spreadsheetObj.updateAction({action: 'cellSave', eventArgs:{ value: 'Custom value', address: 'Car Sales Report!M2'}}); // acion name, event options.
this.spreadsheetObj.updateAction({action: 'wrap', eventArgs:{ address: 'Car Sales Report!M2', wrap: true}});
}
}
Parameter | Type | Description |
---|---|---|
options | CollaborativeEditArgs |
It describes an action and event args to perform. |
Returns void
To update a cell properties.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Update Cell</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To update a cell properties.
this.spreadsheetObj.updateCell({ value: 'Custom Value' }, "A3"); // to specify the cell value, range
this.spreadsheetObj.updateCell({ value: 'Custom Value' }, "Sheet1!A3"); //to specify the cell value, range with sheet name.
}
}
Parameter | Type | Description |
---|---|---|
cell | CellModel |
Cell properties. |
address (optional) | string |
Address to update. |
Returns void
This method is used to update the Range property in specified sheetIndex.
Parameter | Type | Description |
---|---|---|
range | RangeModel |
Specifies the range properties to update. |
sheetIdx (optional) | number |
Specifies the sheetIdx to update. |
Returns void
To update the undo redo collection in spreadsheet.
<ejs-spreadsheet #default (actionComplete)='actionComplete($event)'></ejs-spreadsheet>
<button id='customBtn' class='e-btn' (click)='updateCollection()'> Add/remove Class</button>
<style>
.customClass.e-cell {
background-color: red;
}
</style>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { addClass, removeClass } from '@syncfusion/ej2-base';
import { SpreadsheetComponent, getRangeIndexes } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
actionComplete (args) {
let actionEvents: any = args;
if (actionEvents.eventArgs.action == "customCSS") {
let Element:HTMLElement = this.spreadsheetObj.getCell(actionEvents.eventArgs.rowIdx,actionEvents.eventArgs.colIdx);
if (actionEvents.eventArgs.requestType == "undo") {
removeClass([Element],'customClass'); // To remove the custom class in undo action
}
else {
addClass([Element],'customClass');// To add the custom class in redo action
}
}
}
updateCollection() {
var cell = this.spreadsheetObj.getActiveSheet().activeCell;
var cellIdx = getRangeIndexes(cell);
var Element= this.spreadsheetObj.getCell(cellIdx[0], cellIdx[1]);
if (!Element.classList.contains("customClass")) {
Element.classList.add('customClass'); // To add the custom class in active cell element
this.spreadsheetObj.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
}
}
}
Parameter | Type | Description |
---|---|---|
args | { [key: string]: Object } |
options for undo redo. |
Returns void
This method is used to wrap/unwrap the text content of the cell.
<ejs-spreadsheet #default ></ejs-spreadsheet>
<button id="button" (click)="onClick($event)">Wrap</button>
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';
/**
* Default Spreadsheet Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
onClick(event)
{
// To wrap/unwrap the text content of the cell.
this.spreadsheetObj.wrap("B5", true); // address, set true if the text content of the cell to be wrapped.
}
}
Parameter | Type | Description |
---|---|---|
address | string |
Address of the cell to be wrapped. |
wrap (optional) | boolean |
Set false if the text content of the cell to be unwrapped. |
Returns void
EmitType<
BeforeCellFormatArgs
|BeforeOpenEventArgs
|BeforeSaveEventArgs
|BeforeSelectEventArgs
|BeforeSortEventArgs
|CellEditEventArgs
|MenuSelectEventArgs
>
Triggers when the Spreadsheet actions (such as editing, formatting, sorting etc..) are starts.
<div id='Spreadsheet'></div>
new Spreadsheet({
actionBegin: (args: BeforeCellFormatArgs|BeforeOpenEventArgs|BeforeSaveEventArgs|BeforeSelectEventArgs
|BeforeSortEventArgs|CellEditEventArgs|MenuSelectEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<
SortEventArgs
|CellSaveEventArgs
|SaveCompleteEventArgs
|Object``>
Triggers when the spreadsheet actions (such as editing, formatting, sorting etc..) gets completed.
<div id='Spreadsheet'></div>
new Spreadsheet({
actionComplete: (args: SortEventArgs|CellSaveEventArgs|SaveCompleteEventArgs|Object) => {
}
...
}, '#Spreadsheet');
Triggers when the Hyperlink function gets completed.
<div id='Spreadsheet'></div>
new Spreadsheet({
afterHyperlinkClick: (args: AfterHyperlinkArgs ) => {
}
...
}, '#Spreadsheet');
Triggers after the hyperlink inserted.
<div id='Spreadsheet'></div>
new Spreadsheet({
afterHyperlinkCreate: (args: afterHyperlinkArgs ) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeCellFormatArgs>
Triggers before the cell format applied to the cell.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellFormat: (args: BeforeCellFormatArgs) => {
}
...
}, '#Spreadsheet');
Triggers before the cell appended to the DOM.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellRender: (args: CellRenderEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when before the cell is saved.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellSave: (args: CellEditEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeCellUpdateArgs>
Triggers before changing any cell properties.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
}
...
}, '#Spreadsheet');
EmitType<ConditionalFormatEventArgs>
Triggers before apply or remove the conditional format from a cell in a range.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeConditionalFormat: (args: ConditionalFormatEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<Object>
Triggers before the data is populated to the worksheet.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeDataBound: (args: Object) => {
}
...
}, '#Spreadsheet');
Triggers when the Hyperlink is clicked.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeHyperlinkClick: (args: BeforeHyperlinkArgs ) => {
}
...
}, '#Spreadsheet');
Triggers before insert a hyperlink.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeHyperlinkCreate: (args: BeforeHyperlinkArgs ) => {
}
...
}, '#Spreadsheet');
Triggers before opening an Excel file.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeOpen: (args: BeforeOpenEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers before saving the Spreadsheet as Excel file.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeSave: (args: BeforeSaveEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeSelectEventArgs>
Triggers before the cell or range of cells being selected.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeSelect: (args: BeforeSelectEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers before sorting the specified range.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeSort: (args: BeforeSortEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when the cell is being edited.
<div id='Spreadsheet'></div>
new Spreadsheet({
cellEdit: (args: CellEditEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers every time a request is made to access cell information. This will be triggered when editing a cell.
<div id='Spreadsheet'></div>
new Spreadsheet({
cellEditing: (args: CellEditEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when the edited cell is saved.
<div id='Spreadsheet'></div>
new Spreadsheet({
cellSave: (args: CellSaveEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before closing the context menu.
<div id='Spreadsheet'></div>
new Spreadsheet({
contextMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before opening the context menu and it allows customizing the menu items.
<div id='Spreadsheet'></div>
new Spreadsheet({
contextMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when the context menu item is selected.
<div id='Spreadsheet'></div>
new Spreadsheet({
contextMenuItemSelect: (args: MenuSelectEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<Event>
Triggers when the component is created.
<div id='Spreadsheet'></div>
new Spreadsheet({
created: () => {
}
...
}, '#Spreadsheet');
EmitType<Object>
Triggers when the data is populated in the worksheet.
<div id='Spreadsheet'></div>
new Spreadsheet({
dataBound: (args: Object) => {
}
...
}, '#Spreadsheet');
EmitType<DataSourceChangedEventArgs>
Triggers during data changes when the data is provided as dataSource
in the Spreadsheet.
<div id='Spreadsheet'></div>
new Spreadsheet({
dataSourceChanged: (args: DataSourceChangedEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<DialogBeforeOpenEventArgs>
Triggers before opening the dialog box.
<div id='Spreadsheet'></div>
new Spreadsheet({
dialogBeforeOpen: (args: DialogBeforeOpenEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before closing the file menu.
<div id='Spreadsheet'></div>
new Spreadsheet({
fileMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before opening the file menu.
<div id='Spreadsheet'></div>
new Spreadsheet({
fileMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when the file menu item is selected.
<div id='Spreadsheet'></div>
new Spreadsheet({
fileMenuItemSelect: (args: MenuSelectEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<Object>
Triggers when the spreadsheet importing gets completed.
<div id='Spreadsheet'></div>
new Spreadsheet({
openComplete: (args: Object) => {
}
...
}, '#Spreadsheet');
Triggers when the opened Excel file fails to load.
<div id='Spreadsheet'></div>
new Spreadsheet({
openFailure: (args: OpenFailureArgs) => {
}
...
}, '#Spreadsheet');
Triggered every time a request is made to access cell information.
<div id='Spreadsheet'></div>
new Spreadsheet({
queryCellInfo: (args: CellInfoEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<SaveCompleteEventArgs>
Triggers after saving the Spreadsheet as Excel file.
<div id='Spreadsheet'></div>
new Spreadsheet({
saveComplete: (args: SaveCompleteEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers after the cell or range of cells is selected.
<div id='Spreadsheet'></div>
new Spreadsheet({
select: (args: SelectEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers after sorting action is completed.
<div id='Spreadsheet'></div>
new Spreadsheet({
sortComplete: (args: SortEventArgs) => {
}
...
}, '#Spreadsheet');