Search results

SpreadsheetModel API in JavaScript (ES5) Spreadsheet API control

Interface for a class Spreadsheet

Properties

actionBegin

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');

actionComplete

EmitType<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');

afterHyperlinkClick

EmitType<AfterHyperlinkArgs>

Triggers when the Hyperlink function gets completed.

<div id='Spreadsheet'></div>
new Spreadsheet({
      afterHyperlinkClick: (args: AfterHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

afterHyperlinkCreate

EmitType<AfterHyperlinkArgs>

Triggers after the hyperlink inserted.

<div id='Spreadsheet'></div>
new Spreadsheet({
      afterHyperlinkCreate: (args: afterHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeCellFormat

EmitType<BeforeCellFormatArgs>

Triggers before the cell format applied to the cell.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeCellFormat: (args: BeforeCellFormatArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeCellRender

EmitType<CellRenderEventArgs>

Triggers before the cell appended to the DOM.

<div id='Spreadsheet'></div>
new Spreadsheet({
     beforeCellRender: (args: CellRenderEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

beforeCellSave

EmitType<CellEditEventArgs>

Triggers when before the cell is saved.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeCellSave: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeDataBound

EmitType<Object>

Triggers before the data is populated to the worksheet.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeDataBound: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

beforeHyperlinkClick

EmitType<BeforeHyperlinkArgs>

Triggers when the Hyperlink is clicked.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeHyperlinkClick: (args: BeforeHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeHyperlinkCreate

EmitType<BeforeHyperlinkArgs>

Triggers before insert a hyperlink.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeHyperlinkCreate: (args: BeforeHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeOpen

EmitType<BeforeOpenEventArgs>

Triggers before opening an Excel file.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeOpen: (args: BeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeSave

EmitType<BeforeSaveEventArgs>

Triggers before saving the Spreadsheet as Excel file.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeSave: (args: BeforeSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeSelect

EmitType<BeforeSelectEventArgs>

Triggers before the cell or range of cells being selected.

<div id='Spreadsheet'></div>
new Spreadsheet({
     beforeSelect: (args: BeforeSelectEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

beforeSort

EmitType<BeforeSortEventArgs>

Triggers before sorting the specified range.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeSort: (args: BeforeSortEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellEdit

EmitType<CellEditEventArgs>

Triggers when the cell is being edited.

<div id='Spreadsheet'></div>
new Spreadsheet({
      cellEdit: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellEditing

EmitType<CellEditEventArgs>

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');

cellSave

EmitType<CellSaveEventArgs>

Triggers when the edited cell is saved.

<div id='Spreadsheet'></div>
new Spreadsheet({
      cellSave: (args: CellSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

contextMenuBeforeClose

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before closing the context menu.

<div id='Spreadsheet'></div>
new Spreadsheet({
      contextMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

contextMenuBeforeOpen

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');

contextMenuItemSelect

EmitType<MenuSelectEventArgs>

Triggers when the context menu item is selected.

<div id='Spreadsheet'></div>
new Spreadsheet({
      contextMenuItemSelect: (args: MenuSelectEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

created

EmitType<Event>

Triggers when the component is created.

<div id='Spreadsheet'></div>
new Spreadsheet({
      created: () => {
      }
     ...
 }, '#Spreadsheet');

dataBound

EmitType<Object>

Triggers when the data is populated in the worksheet.

<div id='Spreadsheet'></div>
new Spreadsheet({
      dataBound: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

dialogBeforeOpen

EmitType<DialogBeforeOpenEventArgs>

Triggers before opening the dialog box.

<div id='Spreadsheet'></div>
new Spreadsheet({
      dialogBeforeOpen: (args: DialogBeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuBeforeClose

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before closing the file menu.

<div id='Spreadsheet'></div>
new Spreadsheet({
      fileMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuBeforeOpen

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before opening the file menu.

<div id='Spreadsheet'></div>
new Spreadsheet({
      fileMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuItemSelect

EmitType<MenuSelectEventArgs>

Triggers when the file menu item is selected.

<div id='Spreadsheet'></div>
new Spreadsheet({
      fileMenuItemSelect: (args: MenuSelectEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

openComplete

EmitType<Object>

Triggers when the spreadsheet importing gets completed.

<div id='Spreadsheet'></div>
new Spreadsheet({
      openComplete: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

openFailure

EmitType<OpenFailureArgs>

Triggers when the opened Excel file fails to load.

<div id='Spreadsheet'></div>
new Spreadsheet({
      openFailure: (args: OpenFailureArgs) => {
      }
     ...
 }, '#Spreadsheet');

queryCellInfo

EmitType<CellInfoEventArgs>

Triggered every time a request is made to access cell information.

<div id='Spreadsheet'></div>
new Spreadsheet({
     queryCellInfo: (args: CellInfoEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

saveComplete

EmitType<SaveCompleteEventArgs>

Triggers after saving the Spreadsheet as Excel file.

<div id='Spreadsheet'></div>
new Spreadsheet({
      saveComplete: (args: SaveCompleteEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

select

EmitType<SelectEventArgs>

Triggers after the cell or range of cells is selected.

<div id='Spreadsheet'></div>
new Spreadsheet({
     select: (args: SelectEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

sortComplete

EmitType<SortEventArgs>

Triggers after sorting action is completed.

<div id='Spreadsheet'></div>
new Spreadsheet({
      sortComplete: (args: SortEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

activeSheetIndex

number

Specifies active sheet index in workbook.

<div id='Spreadsheet'></div>
new Spreadsheet({
     activeSheetIndex: 2
...
 }, '#Spreadsheet');

allowCellFormatting

boolean

It allows you to apply styles (font size, font weight, font family, fill color, and more) to the spreadsheet cells.

allowConditionalFormat

boolean

It allows you to apply conditional formatting to the sheet.

allowDataValidation

boolean

It allows you to apply validation to the spreadsheet cells.

allowDelete

boolean

It allows you to delete rows, columns and sheets from spreadsheet.

allowEditing

boolean

It allows you to add new data or update existing cell data. If it is false, it will act as read only mode.

allowFiltering

boolean

It allows to enable/disable filter and its functionalities.

allowFindAndReplace

boolean

It allows to enable/disable find & replace with its functionalities.

It allows to enable/disable Hyperlink and its functionalities.

allowInsert

boolean

It allows you to insert rows, columns and sheets in to the spreadsheet.

allowMerge

boolean

It allows you to merge the range of cells.

allowNumberFormatting

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.

allowOpen

boolean

It allows you to open an Excel file (.xlsx, .xls, and .csv) in Spreadsheet.

allowResizing

boolean

If allowResizing is set to true, spreadsheet columns and rows can be resized.

allowSave

boolean

It allows you to save Spreadsheet with all data as Excel file (.xlsx, .xls, and .csv).

allowScrolling

boolean

It specifies whether the Spreadsheet should be rendered with scrolling or not. To customize the Spreadsheet scrolling behavior, use the [scrollSettings] (https://ej2.syncfusion.com/documentation/api/spreadsheet/#scrollSettings) property.

allowSorting

boolean

It allows to enable/disable sort and its functionalities.

allowUndoRedo

boolean

It allows to enable/disable undo and redo functionalities.

allowWrap

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.

cellStyle

CellStyleModel

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');

cssClass

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');

definedNames

DefineNameModel[]

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');

enableClipboard

boolean

It enables or disables the clipboard operations (cut, copy, and paste) of the Spreadsheet.

enableContextMenu

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.

enableKeyboardNavigation

boolean

It allows you to interact with cell, pager, formula bar, and ribbon through the keyboard device.

enableKeyboardShortcut

boolean

It enables shortcut keys to perform Spreadsheet operations like open, save, copy, paste, and more.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

height

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');

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

openUrl

string

Specifies the service URL to open excel file in spreadsheet.

saveUrl

string

Specifies the service URL to save spreadsheet as Excel file.

scrollSettings

ScrollSettingsModel

Configures the scroll settings.

<div id='Spreadsheet'></div>
new Spreadsheet({
     scrollSettings: {
         isFinite: true,
         enableVirtualization: false
     }
...
 }, '#Spreadsheet');

The allowScrolling property should be true.

selectionSettings

SelectionSettingsModel

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.

sheets

SheetModel[]

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');

showFormulaBar

boolean

It shows or hides the formula bar and its features.

showRibbon

boolean

It shows or hides the ribbon in spreadsheet.

showSheetTabs

boolean

It shows or hides the sheets tabs, this is used to navigate among the sheets and create or delete sheets by UI interaction.

width

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');