Search results

WorkbookModel API in Angular Spreadsheet API component

Interface for a class Workbook

Properties

beforeCellFormat

EmitType<BeforeCellFormatArgs>

Triggers before the cell format applied to the cell.

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

beforeCellUpdate

EmitType<BeforeCellUpdateArgs>

Triggers before changing any cell properties.

<div id='Spreadsheet'></div>
 new Spreadsheet({
     beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
     }
     ...
 }, '#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');

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

activeSheetIndex

number

Specifies active sheet index in workbook.

<div id='Spreadsheet'></div>
new Spreadsheet({
     activeSheetIndex: 2
...
 }, '#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 spreadsheet.

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 and replace with its functionalities.

allowFreezePane

boolean

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

It allows to enable/disable Hyperlink and its functionalities.

allowImage

boolean

It allows you to insert the image in spreadsheet.

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.

allowSave

boolean

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

allowSorting

boolean

It allows to enable/disable sort and its functionalities.

autoFillSettings

AutoFillSettingsModel

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.

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

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

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

isProtected

boolean

Specifies to protect the workbook.

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.

password

string

Specifies the password.

saveUrl

string

Specifies the service URL to save spreadsheet as Excel file.

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