Represents the Workbook.
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
It allows you to save Spreadsheet with all data as Excel file (.xlsx, .xls, and .csv).
Defaults to true
boolean
It allows to enable/disable sort and its functionalities.
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 {}
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
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 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
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 custom library function.
Returns void
Adds the defined name to the Spreadsheet.
Parameter | Type | Description |
---|---|---|
definedName | DefineNameModel |
Specifies the name. |
Returns boolean
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
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
Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Cell Format</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, CellStyleModel } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
// Setting common styles to whole table cells
spreadsheet.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
// Column wise styles setting
spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A12');
// Setting text-indent to 2 and 4 column
let style: CellStyleModel = { textAlign: 'left', textIndent: '8pt' };
spreadsheet.cellFormat(style, 'B2:B12');
spreadsheet.cellFormat(style, 'D2:D12');
spreadsheet.cellFormat({ fontStyle: 'italic', textAlign: 'right' }, 'C3:C12');
spreadsheet.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.
Parameter | Type | Description |
---|---|---|
options | ClearOptions |
Options for clearing the content, formats and hyperlinks in spreadsheet. |
Returns void
Used to compute the specified expression/formula.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Compute Expression</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Used to compute the specified expression/formula.
spreadsheet.computeExpression('522+1'); // pass the expression
spreadsheet.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
When invoked, applies the pending property changes immediately to the component.
Returns void
Used to delete rows, columns and sheets from the spreadsheet.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Delete</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Used to delete rows, columns and sheets from the spreadsheet.
spreadsheet.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)
spreadsheet.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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Delete Image</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
created: (): void => {
spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]);
}
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
//Used to delete the chart from spreadsheet.
spreadsheet.deleteChart("Chart1"); // id - Specifies the chart element id.
};
Parameter | Type | Description |
---|---|---|
id (optional) | string |
Specifies the chart element id. |
Returns void
Destroys the Workbook library.
Returns void
Used to make a duplicate/copy of the sheet in the spreadsheet.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Duplicate Sheet</button>
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Make a duplicate/copy of the active sheet in the spreadsheet.
spreadsheet.duplicateSheet();
// Make a duplicate/copy of the specified sheet in the spreadsheet.
spreadsheet.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
Filters the range of cells in the sheet.
Parameter | Type | Description |
---|---|---|
filterOptions (optional) | FilterOptions |
Specifies the filterOptions |
range (optional) | string |
Specifies the range |
Returns Promise
This method is used to freeze rows and columns after the specified cell in the Spreadsheet.
Parameter | Type | Description |
---|---|---|
row | number |
Specifies the freezed row count. |
column | 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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Get Data</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Gets the range of data as JSON from the specified address.
spreadsheet.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
spreadsheet.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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Get display text</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, CellModel, getCell } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// To Gets the formatted text of the cell.
let cell: CellModel = getCell(0,0, spreadsheet.getActiveSheet()); // rowIndex, colIndex, sheetIndex
console.log(spreadsheet.getDisplayText(cell)); // to provide the cell model
};
Parameter | Type | Description |
---|---|---|
cell | CellModel |
Specifies the cell. |
Returns string
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
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[]
Used to hide/show the columns in spreadsheet.
Parameter | Type | Description |
---|---|---|
startIndex | number |
Specifies the start column index. |
endIndex | number |
Specifies the end column index. |
hide | boolean |
Set true / false to hide / show the columns. |
Returns void
Used to hide/show the rows in spreadsheet.
Parameter | Type | Description |
---|---|---|
startIndex | number |
Specifies the start row index. |
endIndex | number |
Specifies the end row index. |
hide | boolean |
To hide/show the rows in specified range. |
Returns void
Used to set the chart in spreadsheet.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Insert Chart</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Used to set the chart in spreadsheet.
spreadsheet.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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Insert Column</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
//To insert the column
spreadsheet.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.
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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Insert Row</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
//To insert the row
spreadsheet.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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Insert Sheet</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
//To insert sheets in to the spreadsheet.
spreadsheet.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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Lock Cells</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
//To Applies cell lock to the specified range of cells.
let protectSetting:ProtectSettingsModel = {
selectCells: true,
formatCells: false,
formatRows: false,
formatColumns: false,
insertLink: false
}
spreadsheet.protectSheet("Issues", protectSetting);
spreadsheet.lockCells('A2:AZ100', false); // to unlock the A2:Az100 cells
spreadsheet.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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Merge</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
//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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Move Sheet</button>
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
sheets: [{},{},{}]
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Moves the active sheet to the position in the list of sheets.
spreadsheet.moveSheet(1); // position to move
// Moves the list of specified sheets to the position in the list of sheets.
spreadsheet.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.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Number Format</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, getFormatFromType } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
//To Applies the number format (number, currency, percentage, short date, etc…) to the specified range of cells.
spreadsheet.numberFormat('$#,##0.00', 'E1:E3');
// Applied Accounting format to the cells from C3 to E10 range.
spreadsheet.numberFormat(getFormatFromType('Accounting'), 'C3:E10');
// Applied Percentage format to the cells from F3 to F10 range in Sheet1.
spreadsheet.numberFormat('0%', 'Sheet1!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 specified excel file or stream.
Parameter | Type | Description |
---|---|---|
options | OpenOptions |
Options for opening the excel file. |
Returns void
Opens the specified JSON object.
<div id="spreadsheet"></div>
<button class="e-btn" id="save">Save Json</button>
<button class="e-btn" id="load">load Json</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
let response;
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("save").onclick = () => {
spreadsheet.saveAsJson().then(Json => (response = Json));
};
document.getElementById("load").onclick = () => {
spreadsheet.openFromJson({ file: 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
Protect the active sheet based on the protect sheetings.
Parameter | Type | Description |
---|---|---|
sheet (optional) | number | string |
Specifies the sheet to protect. |
protectSettings (optional) | ProtectSettingsModel |
Specifies the protect settings of the sheet. |
password (optional) | string |
Specifies the password to protect |
Returns void
Applies all the pending property changes and render the component again.
Returns void
Removes the defined name from the Spreadsheet.
Parameter | Type | Description |
---|---|---|
definedName | string |
Specifies the name. |
scope | string |
Specifies the scope of the defined name. |
Returns boolean
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
Saves the Spreadsheet data to Excel file.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Save</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Saves the Spreadsheet data to Excel file.
spreadsheet.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 | SaveOptions |
Options for saving the excel file. |
Returns void
Saves the Spreadsheet data as JSON object.
<div id="spreadsheet"></div>
<button class="e-btn" id="save">Save Json</button>
<button class="e-btn" id="load">load Json</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
let response;
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("save").onclick = () => {
spreadsheet.saveAsJson().then(Json => (response = Json)); // to save JSON data in Spreadsheet.
};
document.getElementById("load").onclick = () => {
spreadsheet.openFromJson({ file: response.jsonObject }); // To load JSON data in the Spreadsheet.
};
Returns Promise
Sets the border to specified range of cells.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">Set Border</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// Sets the border to specified range of cells.
spreadsheet.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
spreadsheet.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
Sorts the range of cells in the active Spreadsheet.
Parameter | Type | Description |
---|---|---|
sortOptions (optional) | SortOptions |
options for sorting. |
range (optional) | string |
address of the data range. |
Returns Promise
Used to split the merged cell into multiple cells.
<div id="spreadsheet"></div>
<button class="e-btn" id="btn">UnMerge</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
//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
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
Unprotect the active sheet.
Parameter | Type | Description |
---|---|---|
sheet | number | string |
Specifies the sheet to Unprotect. |
Returns void
To update a cell properties.
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
This method is used to wrap/unwrap the text content of the cell.
<div id="spreadsheet"></div>
<button id="btn">Wrap</button>
import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById("btn").onclick = () => {
// To wrap/unwrap the text content of the cell.
spreadsheet.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 | boolean |
Set false if the text content of the cell to be unwrapped. |
Returns void
Dynamically injects the required modules to the component.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
Returns void
EmitType<BeforeCellFormatArgs>
Triggers before the cell format applied to the cell.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellFormat: (args: BeforeCellFormatArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeCellUpdateArgs>
Triggers before changing any cell properties.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
}
...
}, '#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');
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');