SpreadsheetModel

23 Sep 202524 minutes to read

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

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

beforeCellUpdate EmitType<BeforeCellUpdateArgs>

Triggers before changing any cell properties.

<div id='Spreadsheet'></div>

 new Spreadsheet({
     beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
     }
     ...
 }, '#Spreadsheet');

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

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

cellEdited EmitType<CellEditEventArgs>

Triggers when the cell has been edited.

<div id='Spreadsheet'></div>

new Spreadsheet({
      cellEdited: (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');

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

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 the active sheet index in the workbook.

<ejs-spreadsheet [activeSheetIndex]="1">
  <e-sheets>
    <e-sheet name="Car Sales Report"> </e-sheet>
    <e-sheet name="Car Stocks Report"> </e-sheet>
  </e-sheets>
</ejs-spreadsheet>

allowAutoFill boolean

It allows to enable/disable AutoFill functionalities.

allowCellFormatting boolean

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

allowChart boolean

It allows you to insert the chart in a spreadsheet.

allowConditionalFormat boolean

It allows you to apply conditional formatting to the sheet.

allowDataValidation boolean

It allows you to apply data validation to the spreadsheet cells.

allowDelete boolean

It allows you to delete rows, columns, and sheets from a 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 and replace with its functionalities.

allowFreezePane boolean

It allows to enable/disable freeze pane functionality in spreadsheet.

allowHyperlink boolean

It allows to enable/disable Hyperlink and its functionalities.

allowImage boolean

It allows you to insert the image in a spreadsheet.

allowInsert boolean

It allows you to insert rows, columns, and sheets into 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.

allowPrint boolean

Enables or disables the printing functionality in the 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 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.

autoFillSettings AutoFillSettingsModel

Configures the auto fill settings.
The autoFillSettings fillType property has FOUR types and it is described below:

• CopyCells: To update the copied cells for the selected range.
• FillSeries: To update the filled series for the selected range.
• FillFormattingOnly: To fill the formats only for the selected range.
• FillWithoutFormatting: To fill without the format for the selected range.

<ejs-spreadsheet [autoFillSettings]="autoFillSettings" [allowAutoFill]="true">
</ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { AutoFillSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Configures the autoFillSettings.
  public autoFillSettings: AutoFillSettingsModel = {
    fillType: 'CopyCells',
    showFillOptions: true,
  };
}

The allowAutoFill property should be true.

calculationMode CalculationMode

Specifies the mode of calculation within the spreadsheet.
Setting the calculation mode to Manual can enhance performance,
particularly when working with multiple sheets at the same time.

• Automatic: Calculations are performed automatically whenever a cell value changes.
• Manual: Calculations are performed only when explicitly triggered, improving performance
  when loading or working with large spreadsheets.

cellStyle CellStyleModel

Specifies the cell style options.

<ejs-spreadsheet [cellStyle]="cellStyle">
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { CellStyleModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Specifies the cell style options.
  public cellStyle: CellStyleModel = {
    fontWeight: 'bold',
    fontSize: '12pt',
    fontStyle: 'italic',
    textIndent: '2pt',
    backgroundColor: '#4b5366',
    color: '#ffffff',
  };
}

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.

<ejs-spreadsheet [cssClass]="cssClass"> </ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Specifies the custom CSS class.
  public cssClass: string = 'e-custom1 e-custom2';
}

definedNames DefineNameModel[]

Specifies the name of a range and uses it in a formula for calculation.

<ejs-spreadsheet [definedNames]="definedNames"> </ejs-spreadsheet>

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DefineNameModel } from '@syncfusion/ej2-spreadsheet';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Set the specified cell range's name to 'Group1'.
  public definedNames: DefineNameModel[] = [
    { name: 'Group1', refersTo: 'Sheet1!A1:B5' },
  ];
}

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, sheet tabs, 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.

enableNotes boolean

Enables or disables the ability to add or show notes in the Spreadsheet. If the property is set to false, the Spreadsheet will not add notes in the cells and the notes in the existing cells will not be visible.

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.

<ejs-spreadsheet height="600px"> </ejs-spreadsheet>

isProtected boolean

Specifies to protect the workbook.

listSeparator string

Specifies the list separator which is used as the formula argument separator.

locale string

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

openSettings OpenSettingsModel

Specifies the options for configuration when opening a document.

<ejs-spreadsheet [openUrl]="openUrl" [saveUrl]="saveUrl" [openSettings]="openSettings">
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { OpenSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Configure the open settings.
  public openSettings: OpenSettingsModel = {
    chunkSize: 100000,
    retryCount: 3
  };
  public openUrl: string =
    'https://services.syncfusion.com/angular/production/api/spreadsheet/open';
  public saveUrl: string =
    'https://services.syncfusion.com/angular/production/api/spreadsheet/save';
}

openUrl string

Specifies the service URL to open excel file in spreadsheet.

password string

Specifies the password.

saveUrl string

Specifies the service URL to save spreadsheet as Excel file.

scrollSettings ScrollSettingsModel

Configures the scroll settings.

<ejs-spreadsheet [allowScrolling]="true" [scrollSettings]="scrollSettings">
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { ScrollSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Configure the scroll settings.
  public scrollSettings: ScrollSettingsModel = {
    isFinite: true,
    enableVirtualization: false,
  };
}

The allowScrolling property should be true.

selectionSettings SelectionSettingsModel

Configures the selection settings.
The selectionSettings mode property has three values and 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.

<ejs-spreadsheet [selectionSettings]="selectionSettings">
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  // Configure the selection settings.
  public selectionSettings: SelectionSettingsModel = {
    mode: 'None'
  };
}

sheets SheetModel[]

Configures sheets and its options.

<ejs-spreadsheet #spreadsheet>
  <e-sheets>
    <e-sheet name="Car Sales Report">
      <e-ranges>
        <e-range [dataSource]="salesData"></e-range>
      </e-ranges>
      <e-rows>
        <e-row [index]="30">
          <e-cells>
            <e-cell [index]="4" value="Total Amount:"></e-cell>
            <e-cell formula="=SUM(F2:F30)"></e-cell>
          </e-cells>
        </e-row>
      </e-rows>
    </e-sheet>
    <e-sheet name="Car Stock Report"> </e-sheet>
  </e-sheets>
</ejs-spreadsheet>

import { Component, ViewEncapsulation } from '@angular/core';
import { getSalesData } from './data';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public salesData: Object[] = getSalesData();
}

showAggregate boolean

If showAggregate is set to true, spreadsheet will show the AVERAGE, SUM, COUNT, MIN and MAX values based on the selected cells.

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.

<ejs-spreadsheet width="600px"> </ejs-spreadsheet>