ejSpreadsheet

16 Nov 201724 minutes to read

The Spreadsheet can be easily configured to the DOM element, such as div. you can create a Spreadsheet with a highly customizable look and feel.

Name	Type	Description
	Object	Settings for Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
    }

Requires

jQuery.js
jsrender.js
jQuery.validate.js
ej.globalize.js
ej.core.js
ej.data.js
ej.scroller.js
ej.ribbon.js
ej.chart.js
ej.listbox.js
ej.menu.js
ej.colorpicker.js
ej.slider.js
ej.excelfilter.js
ej.treeview.js
ej.button.js
ej.checkbox.js
ej.draggable.js
ej.waitingpopup.js
ej.radiobutton.js
ej.autocomplete.js
ej.dropdownlist.js
ej.datepicker.js
ej.dialog.js
ej.editor.js
ej.pager.js
ej.ribbon.js
ej.uploadbox.js
ej.togglebutton.js
ej.calculate.js
ej.tab.js
ej.toolbar.js

Members

activeSheetIndex `number`

Gets or sets an active sheet index in the Spreadsheet. By defining this value, you can specify which sheet should be active in workbook.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheetCount]=5 [activeSheetIndex]=3>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowAutoCellType `boolean`

Gets or sets a value that indicates whether to enable or disable auto rendering of cell type in the Spreadsheet.

Default Value

false

NOTE

allowCellType must be true while using this property.

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCellType]=true [allowAutoCellType]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowAutoFill `boolean`

Gets or sets a value that indicates whether to enable or disable auto fill feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowAutoFill]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowAutoSum `boolean`

Gets or sets a value that indicates whether to enable or disable auto sum feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowAutoSum]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowCellFormatting `boolean`

Gets or sets a value that indicates whether to enable or disable cell format feature in the Spreadsheet. By enabling this, you can customize styles and number formats.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCellFormatting]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowCellType `boolean`

Gets or sets a value that indicates whether to enable or disable cell type feature in the Spreadsheet.

Default Value

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCellType]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowCharts `boolean`

Gets or sets a value that indicates whether to enable or disable chart feature in the Spreadsheet. By enabling this feature, you can create and customize charts in Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCharts]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowClear `boolean`

Gets or sets a value that indicates whether to enable or disable clear feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowClear]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowClipboard `boolean`

Gets or sets a value that indicates whether to enable or disable clipboard feature in the Spreadsheet. By enabling this feature, you can perform cut/copy and paste operations in Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowClipboard]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowComments `boolean`

Gets or sets a value that indicates whether to enable or disable comment feature in the Spreadsheet. By enabling this, you can add/delete/modify comments in Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowComments]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowConditionalFormats `boolean`

Gets or sets a value that indicates whether to enable or disable Conditional Format feature in the Spreadsheet. By enabling this, you can apply formatting to the selected range of cells based on the provided conditions (Greater than, Less than, Equal, Between, Contains, etc.).

NOTE

allowConditionalFormats must be true while using conditional formatting.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowConditionalFormats]=true [allowCellFormatting ]=true >
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowDataValidation `boolean`

Gets or sets a value that indicates whether to enable or disable data validation feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowDataValidation]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowDelete `boolean`

Gets or sets a value that indicates whether to enable or disable the delete action in the Spreadsheet. By enabling this feature, you can delete existing rows, columns, cells and sheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowDelete]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowDragAndDrop `boolean`

Gets or sets a value that indicates whether to enable or disable drag and drop feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowDragAndDrop]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowEditing `boolean`

Gets or sets a value that indicates whether to enable or disable the edit action in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowEditing]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowFiltering `boolean`

Gets or sets a value that indicates whether to enable or disable filtering feature in the Spreadsheet. Filtering can be used to limit the data displayed using required criteria.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowFiltering]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowFormatAsTable `boolean`

Gets or sets a value that indicates whether to enable or disable table feature in the Spreadsheet. By enabling this, you can render table in selected range.

NOTE

allowCellFormatting and allowFiltering must be true while using format as table.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCellFormatting]=true [allowFiltering]=true [allowFormatAsTable]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowFormatPainter `boolean`

Get or sets a value that indicates whether to enable or disable format painter feature in the Spreadsheet. By enabling this feature, you can copy the format from the selected range and apply it to another range.

NOTE

allowCellFormatting must be true while enable this feature.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCellFormatting]=true [allowFormatPainter]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowFormulaBar `boolean`

Gets or sets a value that indicates whether to enable or disable formula bar in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowFormulaBar]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowFreezing `boolean`

Gets or sets a value that indicates whether to enable or disable freeze pane support in Spreadsheet. By enabling this feature, you can use freeze top row, freeze first column and freeze panes options.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowFreezing]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowHyperlink `boolean`

Gets or sets a value that indicates whether to enable or disable hyperlink feature in the Spreadsheet. By enabling this feature, you can add hyperlink which is used to easily navigate to the cell reference from one sheet to another or a web page.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowHyperlink]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowImport `boolean`

Gets or sets a value that indicates whether to enable or disable import feature in the Spreadsheet. By enabling this feature, you can open existing Spreadsheet documents.

NOTE

Need to specify importMapper while enabling this feature.Import feature supports XLS, XLSX file formats.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowImport]="true" importSettings.importMapper="http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowInsert `boolean`

Gets or sets a value that indicates whether to enable or disable the insert action in the Spreadsheet. By enabling this feature, you can insert new rows, columns, cells and sheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowInsert]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowKeyboardNavigation `boolean`

Gets or sets a value that indicates whether to enable or disable keyboard navigation feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowKeyboardNavigation]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowLockCell `boolean`

Gets or sets a value that indicates whether to enable or disable lock cell feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowLockCell]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowMerging `boolean`

Gets or sets a value that indicates whether to enable or disable merge feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowMerging]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowOverflow `boolean`

Gets or sets a value that indicates whether to enable or disable overflow feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowOverflow]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowResizing `boolean`

Gets or sets a value that indicates whether to enable or disable resizing feature in the Spreadsheet. By enabling this feature, you can change the column width and row height by dragging its header boundaries.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowResizing]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowSearching `boolean`

Gets or sets a value that indicates whether to enable or disable find and replace feature in the Spreadsheet. By enabling this, you can easily find and replace a specific value in the sheet or workbook. By using goto behavior, you can select and highlight all cells that contains specific data or data types.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowSearching]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowSelection `boolean`

Gets or sets a value that indicates whether to enable or disable selection in the Spreadsheet. By enabling this feature, selected items will be highlighted.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowSelection]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowSorting `boolean`

Gets or sets a value that indicates whether to enable the sorting feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowSorting]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowUndoRedo `boolean`

Gets or sets a value that indicates whether to enable or disable undo and redo feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowUndoRedo]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

allowWrap `boolean`

Gets or sets a value that indicates whether to enable or disable wrap text feature in the Spreadsheet. By enabling this, cell content can wrap to the next line, if the cell content exceeds the boundary of the cell.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowWrap]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

apWidth `number`

Gets or sets a value that indicates to define the width of the activation panel in Spreadsheet.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [apWidth]=100>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

autoFillSettings `Object`

Gets or sets an object that indicates to customize the auto fill behavior in the Spreadsheet.

autoFillSettings.fillType `enum`

This property is used to set fillType unit in Spreadsheet. It has five types which are CopyCells, FillSeries, FillFormattingOnly, FillWithoutFormatting and FlashFill.

NOTE

allowAutoFill must be true while using this property.

Name	Description
CopyCells	Specifies the CopyCells property in AutoFillOptions.
FillSeries	Specifies the FillSeries property in AutoFillOptions.
FillFormattingOnly	Specifies the FillFormattingOnly property in AutoFillOptions.
FillWithoutFormatting	Specifies the FillWithoutFormatting property in AutoFillOptions.
FlashFill	Specifies the FlashFill property in AutoFillOptions.

Default Value

ej.Spreadsheet.AutoFillOptions.FillSeries

Example

HTML

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

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public autoFillSettings;
        constructor(){
        this.autoFillSettings={
        fillType: ej.Spreadsheet.AutoFillOptions.CopyCells
       };
    }
 }

autoFillSettings.showFillOptions `boolean`

Gets or sets a value that indicates to enable or disable auto fill options in the Spreadsheet.

NOTE

allowAutoFill must be true while enabling this property.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowAutoFill]=true [autoFillSettings.showFillOptions]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

chartSettings `Object`

Gets or sets an object that indicates to customize the chart behavior in the Spreadsheet.

chartSettings.height `number`

Gets or sets a value that defines the chart height in Spreadsheet.

NOTE

allowCharts must be true while using this property.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCharts]=true [chartSettings.height]=300>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

chartSettings.width `number`

Gets or sets a value that defines the chart width in the Spreadsheet.

NOTE

allowCharts must be true while using this property.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCharts]=true [chartSettings.width]=500>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

columnCount `number`

Gets or sets a value that defines the number of columns displayed in the sheet.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [columnCount]=30>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

columnWidth `number`

Gets or sets a value that indicates to define the common width for each column in the Spreadsheet.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [columnWidth]=30>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

cssClass `string`

Gets or sets a value to add root CSS class for customizing Spreadsheet skins.

Default Value

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [cssClass]="gradient-lime">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

customFormulas `Array`

Gets or sets a value that indicates custom formulas in Spreadsheet.

Default Value

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [customFormulas]="formulas">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public formulas;
        constructor(){
        this.formulas=[{
	    formulaName:"CUSTOMTOTAL",
	    functionName:"customTotal"
     }];
    }
      customTotal(args){
         //...
     } 
 }

enableContextMenu `boolean`

Gets or sets a value that indicates whether to enable or disable context menu in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [enableContextMenu]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

enablePivotTable `boolean`

Gets or sets a value that indicates whether to enable or disable pivot table in the Spreadsheet.

Default Value

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [enablePivotTable]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

enableTouch `boolean`

Gets or sets a value that indicates whether to enable or disable touch support in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [enableTouch]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

exportSettings `Object`

Gets or sets an object that indicates to customize the exporting behavior in Spreadsheet.

exportSettings.allowExporting `boolean`

Gets or sets a value that indicates whether to enable or disable save feature in Spreadsheet. By enabling this feature, you can save existing Spreadsheet.

NOTE

User must specify excelUrl or pdfUrl or csvUrl while enabling this feature

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [exportSettings]="exportSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public exportSettings;
        constructor(){
        this.exportSettings={
	    allowExporting: true,
        csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport", // It is used to set the url of the csv export.
        excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport", //It is used to set the url of the excel export.
        pdfUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/PdfExport", //It is used to set the url of the pdf export.
    };
    }
 }

exportSettings.csvUrl `string`

Gets or sets a value that indicates to define csvUrl for export to CSV format.

NOTE

User must specify allowExporting true while using this property.

Default Value

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [exportSettings]="exportSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public exportSettings;
        constructor(){
        this.exportSettings={
	    allowExporting: true,
        csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport", // It is used to set the url of the csv export.
    };
    }
 }

exportSettings.excelUrl `string`

Gets or sets a value that indicates to define excelUrl for export to excel format.

NOTE

User must specify allowExporting true while using this property.

Default Value

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [exportSettings]="exportSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public exportSettings;
        constructor(){
        this.exportSettings={
	    allowExporting: true,
        excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport", //It is used to set the url of the excel export.
     };
    }
 }

exportSettings.password `string`

Gets or sets a value that indicates to define password while export to excel format.

NOTE

User must specify allowExporting true while using this property.

Default Value

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [exportSettings]="exportSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public exportSettings;
        constructor(){
        this.exportSettings={
	    allowExporting: true,
        excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport", //It is used to set the url of the excel export.
        password :"Spreadsheet",
     };
    }
 }

exportSettings.pdfUrl `string`

Gets or sets a value that indicates to define pdfUrl for export to PDF format.

NOTE

User must specify allowExporting true while using this property.

Default Value

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [exportSettings]="exportSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public exportSettings;
        constructor(){
        this.exportSettings={
	    allowExporting: true,
        pdfUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/PdfExport", //It is used to set the url of the pdf export.
    };
    }
 }

formatSettings `Object`

Gets or sets an object that indicates to customize the format behavior in the Spreadsheet.

formatSettings.allowCellBorder `boolean`

Gets or sets a value that indicates whether to enable or disable cell border feature in the Spreadsheet.

NOTE

allowCellFormatting must be true while using this property.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCellFormatting]=true [formatSettings.allowCellBorder]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

formatSettings.allowDecimalPlaces `boolean`

Gets or sets a value that indicates whether to enable or disable decimal places in the Spreadsheet.

NOTE

allowCellFormatting must be true while using this property.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCellFormatting]=true [formatSettings.allowDecimalPlaces]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

formatSettings.allowFontFamily `boolean`

Gets or sets a value that indicates whether to enable or disable font family feature in Spreadsheet.

NOTE

allowCellFormatting must be true while using this property.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowCellFormatting]=true [formatSettings.allowFontFamily]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

importSettings `Object`

Gets or sets an object that indicates to customize the import behavior in the Spreadsheet.

importSettings.importMapper `string`

Sets import mapper to perform import feature in Spreadsheet.

NOTE

allowImport must be true while using this property.

Default Value

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowImport]=true [importSettings]=importSettings>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public importSettings;
        constructor(){
        this.importSettings={
        importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import"
    };
    }
 }

importSettings.importOnLoad `boolean`

Gets or sets a value that indicates whether to enable or disable import while initial loading.

Default Value

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowImport]=true [importSettings]=importSettings>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public importSettings;
        constructor(){
        this.importSettings={
        importOnLoad: true
    };
    }
 }

importSettings.importUrl `string`

Sets import URL to access the online files in the Spreadsheet.

NOTE

allowImport must be true while using this property.

Default Value

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowImport]=true [importSettings]=importSettings>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public importSettings;
        constructor(){
        this.importSettings={
            importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import",
            importUrl: "http://mvc.syncfusion.com/Spreadsheet/Spreadsheet.xlsx", //It is used to access the online files in Spreadsheet.
    };
    }
 }

importSettings.password `string`

Gets or sets a value that indicates to define password while importing in the Spreadsheet.

NOTE

allowImport must be true while using this property.

Default Value

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [allowImport]=true [importSettings]=importSettings>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public importSettings;
        constructor(){
        this.importSettings={
            importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import",
            password: "Spreadsheet" //It opens the excel file using this password.
    };
    }
 }

isReadOnly `boolean`

Gets or sets a value that indicates whether to enable or disable readonly support in the Spreadsheet.

Default Value

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [isReadOnly]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

locale `string`

Gets or sets a value that indicates whether to customizing the user interface (UI) as locale-specific in order to display regional data (i.e.) in a language and culture specific to a particular country or region.

Default Value

“en-US”

Example

HTML

<ej-spreadsheet id="spreadsheet" locale="en-ES">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        constructor(){
        ej.Spreadsheet.locale["es-ES"] = {
        Sheet: "Hoja"
        }; 
    }
 }

nameManager `Array`

Gets or sets a value that indicates name manager in Spreadsheet.

nameManager.name `string`

Specifies the name for the cell or a range.

Default Value

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [nameManager]="nameManager">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public nameManager;
        constructor(){
        nameManager:[{
        name: "inputRange",
		refersto: "=Sheet1!$A$1:$A$2"
       }];
    }
 }

nameManager.refersto `string`

Specifies the address for the cell or a range.

Default Value

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [nameManager]="nameManager">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public nameManager;
        constructor(){
        nameManager:[{
        name: "inputRange",
		refersto: "=Sheet1!$A$1:$A$2"
       }];
    }
 }

pictureSettings `Object`

Gets or sets an object that indicates to customize the picture behavior in the Spreadsheet.

pictureSettings.allowPictures `boolean`

Gets or sets a value that indicates whether to enable or disable picture feature in Spreadsheet. By enabling this, you can add pictures in Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [pictureSettings]="pictureSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public pictureSettings;
        constructor(){
        this.pictureSettings={
        allowPictures:true,
       };
    }
 }

pictureSettings.height `number`

Gets or sets a value that indicates to define height to picture in the Spreadsheet.

NOTE

allowPictures must be true while using this property.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [pictureSettings]="pictureSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public pictureSettings;
        constructor(){
        this.pictureSettings={
        allowPictures:true,
        height: 300
       };
    }
 }

pictureSettings.width `number`

Gets or sets a value that indicates to define width to picture in the Spreadsheet.

NOTE

allowPictures must be true while using this property.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [pictureSettings]="pictureSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public pictureSettings;
        constructor(){
        this.pictureSettings={
        allowPictures:true,
        width: 300
       };
    }
 }

printSettings `Object`

Gets or sets an object that indicates to customize the print option in Spreadsheet.

printSettings.allowPageSetup `boolean`

Gets or sets a value that indicates whether to enable or disable page setup support for printing in Spreadsheet.

NOTE

allowPrinting must be true while enabling this property.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [printSettings]="printSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public printSettings;
        constructor(){
        this.printSettings={
        allowPageSetup: true,
       };
    }
 }

printSettings.allowPageSize `boolean`

Gets or sets a value that indicates whether to enable or disable page size support for printing in Spreadsheet.

NOTE

allowPrinting must be true while enabling this property.

Default Value

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [printSettings]="printSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public printSettings;
        constructor(){
        this.printSettings={
        allowPageSize: true,
       };
    }
 }

printSettings.allowPrinting `boolean`

Gets or sets a value that indicates whether to enable or disable print feature in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [printSettings]="printSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public printSettings;
        constructor(){
        this.printSettings={
        allowPrinting: true
       };
    }
 }

ribbonSettings `Object`

Gets or sets an object that indicates to customize the ribbon settings in Spreadsheet.

ribbonSettings.applicationTab `Object`

Gets or sets an object that indicates application tab settings in Spreadsheet.

NOTE

showRibbon must be true while using this property.

ribbonSettings.applicationTab.type `enum`

Gets or sets a value that indicates to set application tab type in Spreadsheet. It has two types, Menu and Backstage.

Name	Description
Menu	To enable menu type in ribbon.
Backstage	To enable back stage type in ribbon.

Default Value

ej.Ribbon.ApplicationTabType.Backstage

Example

HTML

<ej-spreadsheet id="spreadsheet" [ribbonSettings]="ribbonSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public ribbonSettings;
        constructor(){
        this.ribbonSettings={
        applicationTab: {
            type: ej.Ribbon.ApplicationTabType.Menu,
        }
       };
    }
 }

ribbonSettings.applicationTab.menuSettings `Object`

Gets or sets an object that indicates menu settings for application tab in Spreadsheet.

NOTE

ApplicationTabType should be Menu while using this property.

ribbonSettings.applicationTab.menuSettings.isAppend `boolean`

Gets or sets a value that indicates whether to enable or disable isAppend property in ribbon settings.

Default Value

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [ribbonSettings]="ribbonSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public ribbonSettings;
        constructor(){
        this.ribbonSettings={
        applicationTab: {
            type: ej.Ribbon.ApplicationTabType.Menu,
            menuSettings:{                
                isAppend:true,
            }
        }
       };
    }
 }

ribbonSettings.applicationTab.menuSettings.dataSource `Array`

Specifies the data source to append in application tab.

Default Value

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [ribbonSettings]="ribbonSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public ribbonSettings;
        constructor(){
        this.ribbonSettings={
        applicationTab: {
            type: ej.Ribbon.ApplicationTabType.Menu,
            menuSettings:{                
                isAppend:true,
                dataSource:[{ id: "File", text: "File" }]
            }
        }
       };
    }
 }

rowCount `number`

Gets or sets a value that indicates whether to define the number of rows to be displayed in the sheet.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [rowCount]=30>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

rowHeight `number`

Gets or sets a value that indicates to define the common height for each row in the sheet.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [rowHeight]=30>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

scrollSettings `Object`

Gets or sets an object that indicates to customize the scroll options in the Spreadsheet.

scrollSettings.allowScrolling `boolean`

Gets or sets a value that indicates whether to enable or disable scrolling in Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [scrollSettings]="scrollSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public scrollSettings;
        constructor(){
        this.scrollSettings={
        allowScrolling: true,
       };
    }
 }

scrollSettings.allowSheetOnDemand `boolean`

Gets or sets a value that indicates whether to enable or disable sheet on demand. By enabling this, it render only the active sheet element while paging remaining sheets are created one by one.

Default Value

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [scrollSettings]="scrollSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public scrollSettings;
        constructor(){
        this.scrollSettings={
        allowScrolling: true,
        allowSheetOnDemand: true
       };
    }
 }

scrollSettings.allowVirtualScrolling `boolean`

Gets or sets a value that indicates whether to enable or disable virtual scrolling feature in the Spreadsheet.

NOTE

allowScrolling must be true while enabling this property.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [scrollSettings]="scrollSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public scrollSettings;
        constructor(){
        this.scrollSettings={
        allowScrolling: true,
        allowVirtualScrolling: true
       };
    }
 }

scrollSettings.height `number|string`

Gets or sets the value that indicates to define the height of spreadsheet.

Default Value

100%

Example

HTML

<ej-spreadsheet id="spreadsheet" [scrollSettings]="scrollSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public scrollSettings;
        constructor(){
        this.scrollSettings={
        allowScrolling: true,
        height: 600
       };
    }
 }

scrollSettings.isResponsive `boolean`

Gets or sets the value that indicates whether to enable or disable responsive mode in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [scrollSettings]="scrollSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public scrollSettings;
        constructor(){
        this.scrollSettings={
        allowScrolling: true,
        width: "100%",
        height: "100%",
        isResponsive: true
       };
    }
 }

scrollSettings.scrollMode `enum`

Gets or sets a value that indicates to set scroll mode in Spreadsheet. It has two scroll modes, Normal and Infinite.

NOTE

allowScrolling must be true while enabling this property.

Name	Description
Infinite	To enable Infinite scroll mode for Spreadsheet.
Normal	To enable Normal scroll mode for Spreadsheet.

Default Value

ej.Spreadsheet.scrollMode.Infinite

Example

HTML

<ej-spreadsheet id="spreadsheet" [scrollSettings]="scrollSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public scrollSettings;
        constructor(){
        this.scrollSettings={
        allowScrolling: true,
        width: "100%",
        height: "100%",
        scrollmode: ej.Spreadsheet.scrollMode.Infinite,
       };
    }
 }

scrollSettings.width `number|string`

Gets or sets the value that indicates to define the height of the spreadsheet.

Default Value

100%

Example

HTML

<ej-spreadsheet id="spreadsheet" [scrollSettings]="scrollSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public scrollSettings;
        constructor(){
        this.scrollSettings={
        allowScrolling: true,
        width: 1300,
        scrollmode: ej.Spreadsheet.scrollMode.Infinite,
       };
    }
 }

selectionSettings `Object`

Gets or sets an object that indicates to customize the selection options in the Spreadsheet.

selectionSettings.activeCell `string`

Gets or sets a value that indicates to define active cell in spreadsheet.

NOTE

allowSelection must be true while using this property.

Default Value

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [selectionSettings]="selectionSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public selectionSettings;
        constructor(){
        this.selectionSettings={
        activeCell: "A1",
       };
    }
 }

selectionSettings.animationTime `number`

Gets or sets a value that indicates to define animation time while selection in the Spreadsheet.

NOTE

allowSelection must be true while using this property.

Default Value

0.001

Example

HTML

<ej-spreadsheet id="spreadsheet" [selectionSettings]="selectionSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public selectionSettings;
        constructor(){
        this.selectionSettings={
        enableAnimation: true,
        animationTime: 0.002
       };
    }
 }

selectionSettings.enableAnimation `boolean`

Gets or sets a value that indicates to enable or disable animation while selection.

NOTE

allowSelection must be true while using this property

Default Value

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [selectionSettings]="selectionSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public selectionSettings;
        constructor(){
        this.selectionSettings={
        enableAnimation: true,
       };
    }
 }

selectionSettings.selectionType `enum`

Gets or sets a value that indicates to set selection type in Spreadsheet. It has three types which are Column, Row and Default.

NOTE

allowSelection must be true while using this property

Name	Description
Column	To select only Column in Spreadsheet.
Row	To select only Row in Spreadsheet.
Default	To select both Column/Row in Spreadsheet.

Default Value

ej.Spreadsheet.SelectionType.Default

Example

HTML

<ej-spreadsheet id="spreadsheet" [selectionSettings]="selectionSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public selectionSettings;
        constructor(){
        this.selectionSettings={
        selectionType: ej.Spreadsheet.SelectionType.Row,
        animationTime: 0.001,
        enableAnimation: true
       };
    }
 }

selectionSettings.selectionUnit `enum`

Gets or sets a value that indicates to set selection unit in Spreadsheet. It has three types which are Single, Range and MultiRange.

NOTE

allowSelection must be true while using this property

Name	Description
Single	To enable Single selection in Spreadsheet
Range	To enable Range selection in Spreadsheet
MultiRange	To enable MultiRange selection in Spreadsheet

Default Value

ej.Spreadsheet.SelectionUnit.MultiRange

Example

HTML

<ej-spreadsheet id="spreadsheet" [selectionSettings]="selectionSettings">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public selectionSettings;
        constructor(){
        this.selectionSettings={
        selectionUnit: ej.Spreadsheet.SelectionUnit.Single
       };
    }
 }

sheetCount `number`

Gets or sets a value that indicates to define the number of sheets to be created at the initial load.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheetCount]=5>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

sheets `Array`

Gets or sets an object that indicates to customize the sheet behavior in Spreadsheet.

sheets.border `Array`

Specifies the border for the cell in the Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }]
    }];
    }
 }

sheets.border.type `enum`

Specifies border type in the Spreadsheet.

Name	Description
Top	To apply top border for the given range of cell.
Left	To apply left border for the given range of cell.
Right	To apply right border for the given range of cell.
Bottom	To apply bottom border for the given range of cell.
OutSide	To apply outside border for the given range of cell.
AllBorder	To apply all border for the given range of cell.
ThickBox	To apply thick box border for the given range of cell.
ThickBottom	To apply thick bottom border for the given range of cell.
TopandBottom	To apply top and bottom border for the given range of cell.
TopandThickBottom	To apply top and thick bottom border for the given range of cell.

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }]
    }];
    }
 }

sheets.border.color `string`

Specifies border color for range of cells in Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }]
    }];
    }
 }

sheets.border.range `string`

To apply border for the specified range of cell.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }]
    }];
    }
 }

sheets.cellTypes `Array`

Specifies the cell types for a cell or range in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        cellTypes: [{ range: 'F5', settings: { type: ej.Spreadsheet.CustomCellType.Button, 'background-color': 'yellow', color: 'black', text: 'BUTTON' } }]
    }];
    }
 }

sheets.cFormatRule `Array`

Specifies the conditional formatting for the range of cell in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        cFormatRule: [{ action: ej.Spreadsheet.CFormatRule.LessThan, inputs: ["30"], color: ej.Spreadsheet.CFormatHighlightColor.RedFillwithDarkRedText, range: "A1:E1" }],
        rows:[
            {
                cells: [
                    { value: "20"},
				    { value: "30"},
				    { value: "15"},
				    { value: "40"},
				    { value: "50"}
                ]
            }
        ]
      }];
    }
 }

sheets.cFormatRule.action `enum`

Specifies the conditions to apply for the range of cells in Spreadsheet.

Name	Description
GreaterThan	To identify greater than values in the given range of cells.
LessThan	To identify less than values in the given range of cells.
Between	To identify in between values in the given range of cells.
EqualTo	To identify the equal values in the given range of cells.
TextContains	To identify the specified text in the range of cells.
DateOccurs	To identify the specified date in the range of cells.

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        cFormatRule: [{ action: ej.Spreadsheet.CFormatRule.LessThan, inputs: ["30"], color: ej.Spreadsheet.CFormatHighlightColor.RedFillwithDarkRedText, range: "A1:E1" }],
        rows:[
            {
                cells: [
                    { value: "20"},
				    { value: "30"},
				    { value: "15"},
				    { value: "40"},
				    { value: "50"}
                ]
            }
        ]
      }];
    }
 }

sheets.cFormatRule.color `enum`

Specifies the color to apply for the range of cell while conditional formatting.

Name	Description
RedFillwithDarkRedText	Highlights red with dark red text color.
YellowFillwithDarkYellowText	Highlights yellow with dark yellow text color.
GreenFillwithDarkGreenText	Highlights green with dark green text color.
RedFill	Highlights with red fill.
RedText	Highlights with red text.

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        cFormatRule: [{ action: ej.Spreadsheet.CFormatRule.LessThan, inputs: ["30"], color: ej.Spreadsheet.CFormatHighlightColor.RedFillwithDarkRedText, range: "A1:E1" }],
        rows:[
            {
                cells: [
                    { value: "20"},
				    { value: "30"},
				    { value: "15"},
				    { value: "40"},
				    { value: "50"}
                ]
            }
        ]
      }];
    }
 }

sheets.cFormatRule.inputs `Array`

Specifies the inputs for conditional formatting in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        cFormatRule: [{ action: ej.Spreadsheet.CFormatRule.LessThan, inputs: ["30"], color: ej.Spreadsheet.CFormatHighlightColor.RedFillwithDarkRedText, range: "A1:E1" }],
        rows:[
            {
                cells: [
                    { value: "20"},
				    { value: "30"},
				    { value: "15"},
				    { value: "40"},
				    { value: "50"}
                ]
            }
        ]
      }];
    }
 }

sheets.cFormatRule.range `string`

Specifies the range for conditional formatting in Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
        this.spreadData = [{
        cFormatRule: [{ action: ej.Spreadsheet.CFormatRule.LessThan, inputs: ["30"], color: ej.Spreadsheet.CFormatHighlightColor.RedFillwithDarkRedText, range: "A1:E1" }],
        rows:[
            {
                cells: [
                    { value: "20"},
				    { value: "30"},
				    { value: "15"},
				    { value: "40"},
				    { value: "50"}
                ]
            }
        ]
      }];
    }
 }

sheets.colCount `number`

Gets or sets a value that indicates to define column count in the Spreadsheet.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
         rangeSettings: [{dataSource: SpreadsheetService.getDefaultData()}],
         colCount: 25
      }];
    }
 }

sheets.columnWidth `number`

Gets or sets a value that indicates to define column width in the Spreadsheet.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         columnWidth: 100;
      }];
    }
 }

sheets.dataSource `Object`

Gets or sets the data to render the Spreadsheet.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
         rangeSettings: [{dataSource: SpreadsheetService.getDefaultData()}],
      }];
    }
 }

sheets.fieldAsColumnHeader `boolean`

Gets or sets a value that indicates whether to enable or disable field as column header in the Spreadsheet.

Default Value:

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
         dataSource: ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"),
         query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
         fieldAsColumnHeader: true,
         primaryKey: "OrderID"
      }];
    }
 }

sheets.frozenRows `number`

Gets or sets a value to freeze rows in the Spreadsheet.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
         frozenRows: 3,
      }];
    }
 }

sheets.frozenColumns `number`

Gets or sets a value to freeze columns in the Spreadsheet.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
         frozenColumns: 3,
      }];
    }
 }

sheets.headerStyles `Object`

Specifies the header styles for the headers in datasource range.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
         dataSource: SpreadsheetService.getDefaultData(), showHeader: true, headerStyles: { "font-weight": "bold", "vertical-align": "middle", "text-align": "center", "background-color": "#559ad9", "color": "#FFFFFF" },
      }];
    }
 }

sheets.hideColumns `Array`

To hide the specified columns in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
         hideColumns: [3, 4],
      }];
    }
 }

sheets.hideRows `Array`

To hide the specified rows in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         hideRows: [3, 4],
      }];
    }
 }

sheets.mergeCells `Array`

To merge specified ranges in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         mergeCells:["A1:A2","B2:C2"]
      }];
    }
 }

sheets.primaryKey `string`

Specifies the primary key for the datasource in Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         dataSource: ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"),
         query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
         primaryKey: "OrderID"
      }];
    }
 }

sheets.query `Object`

Specifies the query for the dataSource in Spreadsheet.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         dataSource: ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"),
         query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
         primaryKey: "OrderID"
      }];
    }
 }

sheets.rangeSettings `Array`

Specifies single range or multiple range settings for a sheet in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
         rangeSettings: [{ dataSource: SpreadsheetService.getDefaultData(), showHeader: true, startCell: "A1" }, { dataSource: SpreadsheetService.getconditionalFormat(), showHeader: true, startCell: "J1" }] ,
      }];
    }
 }

sheets.rangeSettings.dataSource `Object`

Gets or sets the data to render the Spreadsheet.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
          rangeSettings: [{dataSource: SpreadsheetService.getDefaultData(), showHeader: true}]
      }];
    }
 }

sheets.rangeSettings.headerStyles `Object`

Specifies the header styles for the headers in datasource range.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
          rangeSettings: [{dataSource: SpreadsheetService.getDefaultData(), showHeader: true, headerStyles: { "font-weight": "bold", "vertical-align": "middle", "text-align": "center", "background-color": "#559ad9", "color": "#FFFFFF" }}]
      }];
    }
 }

sheets.rangeSettings.primaryKey `string`

Specifies the primary key for the datasource in Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
           rangeSettings:[{
            dataSource: ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"),
            query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
            primaryKey: "OrderID"
        }]
      }];
    }
 }

sheets.rangeSettings.query `Object`

Specifies the query for the datasource in Spreadsheet.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
           rangeSettings:[{
            dataSource: ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"),
            query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
            primaryKey: "OrderID"
        }]
      }];
    }
 }

sheets.rangeSettings.showHeader `boolean`

Gets or sets a value that indicates whether to enable or disable the datasource header in Spreadsheet.

Default Value:

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
          rangeSettings: [{dataSource: SpreadsheetService.getDefaultData(), showHeader: true}]
      }];
    }
 }

sheets.rangeSettings.startCell `string`

Specifies the start cell for the datasource range in Spreadsheet.

Default Value:

“A1”

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
          rangeSettings: [{dataSource: SpreadsheetService.getDefaultData(), startCell: "B1"}]
      }];
    }
 }

sheets.rowCount `number`

Gets or sets a value that indicates to define row count in the Spreadsheet.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
          rangeSettings: [{dataSource: SpreadsheetService.getDefaultData()}],
          rowCount: 30
      }];
    }
 }

sheets.rows `Array`

Specifies the rows for a sheet in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows:[
            {
                height:30,
                cells:[
                     { value: "Item Name", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }},
                     { value: "Quantity", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }},
                ]
            }
        ]
      }];
    }
 }

sheets.rows.height `number`

Gets or sets the height of a row in Spreadsheet.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows:[
            {
                height:30,
                cells:[
                     { value: "Item Name", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }},
                     { value: "Quantity", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }},
                ]
            }
        ]
      }];
    }
 }

sheets.rows.cells `Array`

Specifies the cells of a row in Spreadsheet.

Default Value:

[]

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows: [
            {
            cells: [
                { value: "Item Name", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } },
                { value: "Quantity", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" } }
             ]
         }
       ]
    }];
  }
 }

sheets.rows.cells.comment `Object`

Specifies the comment for a cell in Spreadsheet.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows: [
           {
            cells: [
                { value: "Item Name", comment: { value: "Name of the item" } }
            ]
        }
      ]
    }];
   }
 }

sheets.rows.cells.comment.isVisible `boolean`

Get or sets the value that indicates whether to show or hide comments in Spreadsheet.

Default Value:

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows: [
           {
            cells: [
                { value: "Item Name", comment: { value: "Name of the item", isVisible:true } }
            ]
        }
      ]
    }];
   }
 }

sheets.rows.cells.comment.value `string`

Specifies the value for the comment in Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows: [
           {
            cells: [
                { value: "Item Name", comment: { value: "Name of the item", isVisible:true } }
            ]
        }
      ]
    }];
   }
 }

sheets.rows.cells.format `Object`

Specifies the format of a cell in Spreadsheet.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows:[
            {
                cells: [
                    { value: "20", format: { type: "currency" } }
                ]
            }
        ]
    }];
   }
 }

sheets.rows.cells.format.decimalPlaces `number`

Specifies the number of decimal places for the given input.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows: [
            { cells: [{ value: "200", format: { type: "currency", decimalPlaces: 3 } }] }
        ]
    }];
   }
 }

sheets.rows.cells.format.formatStr `string`

Specifies the string format for the given input.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows: [
            { cells: [{ value: "20000", format: { type: "percentage", formatStr: "{0:P3}" } }] }
        ]
    }];
   }
 }

sheets.rows.cells.format.thousandSeparator `boolean`

Specifies the thousand separator for the given input.

Default Value:

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows: [
            { cells: [{ value: "200000", format: { type: "number", thousandSeparator: true } }] }
        ]
    }];
   }
 }

sheets.rows.cells.format.type `string`

Specifies the type of the format in Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows:[
            {
                cells: [
                    { value: "20", format: { type: "currency" } }
                ]
            }
         ]
      }];
   }
 }

sheets.rows.cells.hyperlink `Object`

Specifies the hyperlink for a cell in Spreadsheet.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows:[
            {
                cells: [
                    { value: "Google", hyperlink: { webAddr: "www.google.com" } }
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.hyperlink.webAddr `string`

Specifies the web address for the hyperlink of a cell.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows:[
            {
                cells: [
                    { value: "Google", hyperlink: { webAddr: "www.google.com" } }
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.hyperlink.cellAddr `string`

Specifies the cell address for the hyperlink of a cell.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows:[
            {
                cells: [
                    { value: "Address", hyperlink: { cellAddr: "B2" } }
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.hyperlink.sheetIndex `number`

Specifies the sheet index to which the cell is referred.

NOTE

User must give cellAddr to use this property.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
         rows:[
            {
                cells: [
                    { value: "Address", hyperlink: { cellAddr: "B2" , sheetIndex: 2} }
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.index `number`

Specifies the index of a cell in Spreadsheet.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows:[
            {
                cells: [
                    { index: 1, value: "Item Name", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }},
                    { value: "Quantity", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }}
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.isLocked `boolean`

Specifies whether to lock or unlock a particular cell.

Default Value:

false

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows: [{
            cells: [{ value: "Item Name", isLocked: true }]
        }]
      }];
   }
 }

sheets.rows.cells.style `Object`

Specifies the styles of a cell in Spreadsheet.

Default Value:

null

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows:[
            {
                cells: [
                    { value: "Item Name",style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }},
                    { value: "Quantity",style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }}
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.style.backgroundColor `string`

Specifies the background color of a cell in the Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows: [
            {
                cells: [
                    { value: "Item Name", style: { "background-color": "#428bca" } }
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.style.color `string`

Specifies the font color of a cell in the Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows: [
            {
                cells: [
                    { value: "Item Name", style: { "color": "#428bca" } }
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.style.fontWeight `string`

Specifies the font weight of a cell in the Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows: [
            {
                cells: [
                    { value: "Item Name", style: { "font-weight": "bold" } }
                ]
            }
        ]
      }];
   }
 }

sheets.rows.cells.value `string`

Specifies the value for a cell in Spreadsheet.

Default Value:

””

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows:[
            {
                cells: [
                    { value: "Item Name"},
                    { value: "Quantity"}
                ]
            }
        ]
      }];
   }
 }

sheets.rows.index `number`

Gets or sets the index of a row in Spreadsheet.

Default Value:

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          rows:[
            {   
                index:1,
                height:30,
			    cells: [
                            { value: "Item Name", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }},
                            { value: "Quantity", style: { "font-weight": "bold", "color": "#FFFFFF", "background-color": "#428bca" }},
			    ]
            }
        ]
      }];
   }
 }

sheets.showGridlines `boolean`

Gets or sets a value that indicates whether to show or hide grid lines in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          showGridlines: true
      }];
   }
 }

sheets.showHeader `boolean`

Gets or sets a value that indicates whether to enable or disable the datasource header in Spreadsheet.

Default Value:

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
          rangeSettings: [{dataSource: SpreadsheetService.getDefaultData(), showHeader: true}]
      }];
    }
 }

sheets.showHeadings `boolean`

Gets or sets a value that indicates whether to show or hide headings in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          showHeadings: true
      }];
   }
 }

sheets.sheetName `string`

Specifies the name for sheet in the Spreadsheet.

Default Value

string

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public spreadData;
        constructor(){
         this.spreadData = [{
          sheetName: "Sheet Name"
      }];
   }
 }

sheets.startCell `string`

Specifies the start cell for the datasource range in Spreadsheet.

Default Value:

“A1”

Example

HTML

<ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
import { SpreadsheetService } from './services/spreadsheet.service';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
        providers:[SpreadsheetService ]
    })
    export class AppComponent {
        public spreadData;
        constructor(public SpreadsheetService: SpreadsheetService){
         this.spreadData = [{
          rangeSettings: [{dataSource: SpreadsheetService.getDefaultData(), startCell: "B1"}]
      }];
    }
 }

showPager `boolean`

Gets or sets a value that indicates whether to show or hide pager in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [showPager]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

showRibbon `boolean`

Gets or sets a value that indicates whether to show or hide ribbon in the Spreadsheet.

Default Value

true

Example

HTML

<ej-spreadsheet id="spreadsheet" [showRibbon]=true>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

undoRedoStep `number`

This is used to set the number of undo-redo steps in the Spreadsheet.

Default Value

Example

HTML

<ej-spreadsheet id="spreadsheet" [undoRedoStep]=15>
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        //..
    }

userName `string`

Define the username for the Spreadsheet which is displayed in comment.

Default Value

User Name

Example

HTML

<ej-spreadsheet id="spreadsheet" [userName]="Name">
    </ej-spreadsheet>

import {Component, ViewEncapsulation} from '@angular/core';
    @Component({
        selector: 'ej-app',
        templateUrl: 'app/app.component.html',  //give the path file for spreadsheet component html file.
    })
    export class AppComponent {
        public Name;
        constructor(){
        this.Name = "User Name";
   }
 }

Methods

addCustomFormula(formulaName, functionName)

This method is used to add custom formulas in Spreadsheet.

Name	Type	Description
formulaName	string	Pass the name of the formula.
functionName	string	Pass the name of the function.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.addCustomFormula("CUSTOMTOTAL","customTotal"); // Sends a add custom formula request to the Spreadsheet.
       } 
 customTotal(args){}//args-It uses the value given by the user while using custom formula in Spreadsheet.
     }

addNewSheet()

This method is used to add a new sheet in the last position of the sheet container.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.addNewSheet(); // Sends a add new sheet request to the Spreadsheet.
       } 
     }

clearAll([range])

It is used to clear all the data and format in the specified range of cells in Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. If range is specified, then it will clear all content in the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.clearAll("A2:A6"); // Sends a clear all request to the Spreadsheet.
       } 
     }

clearAllFormat([range])

This property is used to clear all the formats applied in the specified range in Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. If range is specified, then it will clear all format in the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.clearAllFormat("A2:A6"); // Sends a clear all format request to the Spreadsheet.
       } 
     }

clearBorder([range])

Used to clear the applied border in the specified range in Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. If range is specified, then it will clear border in the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.clearBorder("A2:A6"); // Sends a clear border request to the Spreadsheet.
       } 
     }

clearContents([range])

This property is used to clear the contents in the specified range in Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. If the range is specified, then it will clear the content in the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.clearContents("A2:A6"); // Sends a clear content request to the Spreadsheet.
       } 
     }

clearRange(rangeName)

This method is used to remove only the data in the range denoted by the specified range name.

Name	Type	Description
rangeName	string	Pass the defined rangeSettings property name.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.clearRange("updateTable"); // Sends a clear range request to the Spreadsheet.
       } 
     }

clearRangeData([range], [property],[cells],[skipHiddenRow],[status],[skipCell])

It is used to remove data in the specified range of cells based on the defined property.

Name	Type	Description
range	Array\|string	Optional. If range is specified, it will clear data for the specified range else it will use the current selected range.
property	string	Optional. If property is specified, it will remove the specified property in the range else it will remove default properties
cells	Object	Optional.
skipHiddenRow	boolean	Optional. pass `true` , if you want to skip the hidden rows
status	Object	Optional. Pass the status to perform undo and redo operation.
skipCell	Object	Optional. It specifies whether to skip element processing or not.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.clearRangeData("A1:A5", ["value", "value2"], excelObj.getRange("A1:A5"), true);// Sends a clear range data request to the Spreadsheet.
       } 
     }

clearUndoRedo()

This method is used to clear undo and redo collections in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.clearUndoRedo(); // Sends a clear undo redo request to the Spreadsheet.
       } 
     }

copySheet(fromIdx, toIdx, isCopySheet)

This method is used to copy or move the sheets in Spreadsheet.

Name	Type	Description
fromIdx	number	Pass the sheet index that you want to copy or move.
toIdx	number	Pass the position index where you want to copy or move.
isCopySheet	boolean	Pass `true` ,If you want to copy sheet or else it will move sheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.copySheet(2, 1, true); // Sends a copy sheet request to the Spreadsheet.
     //xlObj.copySheet(2, 1, false); // Sends a move sheet request to the Spreadsheet.
       } 
     }

deleteEntireColumn(startCol, endCol)

This method is used to delete the entire column which is selected.

Name	Type	Description
startCol	number	Pass the start column index.
endCol	number	Pass the end column index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       // Delete a column in the sheet.
       xlObj.deleteEntireColumn(2, 3);
       } 
     }

deleteEntireRow(startRow, endRow)

This method is used to delete the entire row which is selected.

Name	Type	Description
startRow	number	Pass the start row index.
endRow	number	Pass the end row index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       // Delete a row in the sheet.
       xlObj.deleteEntireRow(2,3);
       } 
     }

deleteSheet(idx)

This method is used to delete a particular sheet in the Spreadsheet.

Name	Type	Description
idx	number	Pass the sheet index to perform delete action.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
       let xlObj = $("#spreadsheet").data("ejSpreadsheet");
       xlObj.deleteSheet(3); // Sends a sheet delete request to the Spreadsheet
       } 
     }

deleteShiftLeft(startCell, endCell)

This method is used to delete the selected cells and shift the remaining cells to left.

Name	Type	Description
startCell	Object	Row index and column index of the starting cell.
endCell	Object	Row index and column index of the ending cell.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //Delete a cell and shift cells left in the sheet.
    xlObj.deleteShiftLeft(startCell, endCell);
       } 
     }

deleteShiftUp(startCell, endCell)

This method is used to delete the selected cells and shift the remaining cells up.

Name	Type	Description
startCell	Object	Row index and column index of the start cell.
endCell	Object	Row index and column index of the end cell.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Delete a cell and shift cells up in the sheet.
    xlObj.deleteShiftUp(startCell, endCell);
       } 
     }

editRange(rangeName, fn)

This method is used to edit data in the specified range of cells based on its corresponding rangeSettings.

Name	Type	Description
rangeName	string	Pass the defined rangeSettings property name.
fn	function	Pass the function that you want to perform range edit.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
let xlObj = $("#spreadsheet").data("ejSpreadsheet");
let update = function(cell, cellIdx) {
if (cellIdx % 2 == 0)
return "SpreadSheet";
else
return "Grid";
};
var rangeSettings = {
range: "B1:C2",
name: "updateTable",
cssClass: "readOnly1",
readOnly: true,
contextTab: {},
contextMenuSettings: {
dataSource: [{
id: 1,
text: "Copy",
parentId: null,
sprite: "e-icon e-copy"
}, {
id: 2,
text: "Refresh",
parentId: null,
}]
},
showPanel: true
};
//Update new rangeSettings property before invoking edit range
xlObj.model.sheets[1].rangeSettings["updateTable"] = rangeSettings;
//Sends a edit range request to the Spreadsheet
xlObj.editRange("updateTable", update);
       } 
     }

getActivationPanel()

This method is used to get the activation panel in the Spreadsheet.

Returns:

Element

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getActivationPanel(); // Gets sheet  ActivationPanel element in Spreadsheet.
       } 
     }

getActiveCell([sheetIdx])

This method is used to get the active cell object in Spreadsheet. It will returns object which contains rowIndex and colIndex of the active cell.

Name	Type	Description
sheetIdx	number	Optional. If sheetIdx is specified, it will return the active cell object in specified sheet index else it will use the current sheet index

Returns:

Object

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getActiveCell(1); // Gets the activeCell  object in specified sheet index.
       } 
     }

getActiveCellElem([sheetIdx])

This method is used to get the active cell element based on the given sheet index in the Spreadsheet.

Name	Type	Description
sheetIdx	number	Optional. If sheetIndex is specified, it will return the active cell element in specified sheet index else it will use the current active sheet index.

Returns:

Element

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getActiveCellElem(1); // Gets activeCell element in Spreadsheet.
       } 
     }

getActiveSheetIndex()

This method is used to get the current active sheet index in Spreadsheet.

Returns:

number

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getActiveSheetIndex(); // Gets activeSheet index in Spreadsheet.
       } 
     }

getAutoFillElem()

This method is used to get the auto fill element in Spreadsheet.

Returns:

Element

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getAutoFillElem(); // Gets autofill element in Spreadsheet.
       } 
     }

getCell(rowIdx, colIdx, [sheetIdx])

This method is used to get the cell element based on specified row and column index in the Spreadsheet.

Name	Type	Description
rowIdx	number	Pass the row index.
colIdx	number	Pass the column index.
sheetIdx	number	Optional. Pass the sheet index that you want to get cell.

Returns:

Element

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getCell(2, 3, 1); // Get the cell based on rowIndex and colIndex.
       } 
     }

getDataSettings(sheetIdx)

This method is used to get the data settings in the Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index.

Returns:

number

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getDataSettings(1); // Gets the data settings in Spreadsheet
       } 
     }

getFrozenColumns(sheetIdx)

This method is used to get the frozen columns index in the Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index.

Returns:

number

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getFrozenColumns(1); // Gets the frozen column index in Spreadsheet
       } 
     }

getFrozenRows(sheetIdx)

This method is used to get the frozen row index in Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index.

Returns:

number

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getFrozenRows(1); // Gets the frozen row index in Spreadsheet.
       } 
     }

getHyperlink(cell)

This method is used to get the hyperlink data as object from the specified cell in Spreadsheet.

Name	Type	Description
cell	Element	Pass the DOM element to get hyperlink

Returns:

Object

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getHyperlink(xlObj.getCell(1, 1)); // To get the hyperlink data of specified cell.
       } 
     }

getRange(range, sheetIdx, [skipHiddenRow])

This method is used to get all cell elements in the specified range.

Name	Type	Description
range	string	Pass the range that you want to get the cells.
sheetIdx	number	Pass the index of the sheet.
skipHiddenRow	boolean	Optional. Pass `true` , if you want to skip the hidden rows.

Returns:

Element

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getRange("A2:A5", 1, false); // Get the cells based on the given range
       } 
     }

getRangeData([options])

This method is used to get the data in specified range in Spreadsheet.

Name	Type	Description
options	Object	Optional. Pass the range, property, sheetIdx, valueOnly in options.

Returns:

Array

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getRangeData({range: [2, 6, 2, 6], property: ["value", "value2", "format"], sheetIdx: 1}); // To get the cells data of specified range
       } 
     }

getRangeIndices(range)

This method is used to get the range indices array based on the specified alpha range in Spreadsheet.

Name	Type	Description
range	string	Pass the alpha range that you want to get range indices.

Returns:

Array

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getRangeIndices("A1:A9"); // Get range indices based on specified alpha range.
       } 
     }

getSheet(sheetIdx)

This method is used to get the sheet details based on the given sheet index in Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index to get the sheet object.

Returns:

Object

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getSheet(1); // Gets sheet details of Spreadsheet.
       } 
     }

getSheetElement(sheetIdx)

This method is used to get the sheet content div element of Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index to get the sheet content.

Returns:

Element

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getSheetElement(1); // Gets sheet content of Spreadsheet.
       } 
     }

getSheets()

This method is used to get all the sheets in workbook.

Returns:

Array

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.getSheets(); // Gets sheets details of Spreadsheet.
       } 
     }

gotoPage(sheetIdx, newSheet)

This method is used to send a paging request to the specified sheet Index in the Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index to perform paging at specified sheet index
newSheet	boolean	Pass `true` to create a new sheet. If the specified sheet index is already exist, it navigate to that sheet else it create a new sheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.gotoPage(1, false); // Sends a paging request to the Spreadsheet with specified sheet index
       } 
     }

hideActivationPanel()

This method is used to hide the pivot table activationPanel in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.hideActivationPanel(); // To hide the pivot table activationPanel in the Spreadsheet.
       } 
     }

hideColumn(startCol, endCol)

This method is used to hide the entire columns from the specified range (startCol, endCol) in Spreadsheet.

Name	Type	Description
startCol	number	Index of the start column.
endCol	number	Optional. Index of the end column.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Hide the column by passing column index in the active sheet.
    xlObj.hideColumn(1);
    // Hide the columns from startCol to endCol in the active sheet.
    xlObj.hideColumn(1, 4);
       } 
     }

hideFormulaBar()

This method is used to hide the formula bar in Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.hideFormulaBar(); //To hide formula bar in Spreadsheet.
       } 
     }

hideRow(startRow, endRow)

This method is used to hide the rows, based on the specified row index in Spreadsheet.

Name	Type	Description
startRow	number	Index of the start row.
endRow	number	Optional. Index of the end row.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Hide the row by passing row index in the active sheet.
    xlObj.hideRow(1);
    // Hide a rows from startRow to endRow in the active sheet.
    xlObj.hideRow(1, 4);
       } 
     }

hideSheet(sheetIdx)

This method is used to hide the sheet based on the specified sheetIndex or sheet name in the Spreadsheet.

Name	Type	Description
sheetIdx	string\|number	Pass the sheet name or index that you want to hide.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //Sends a hide sheet request to the Spreadsheet.
    xlObj.hideSheet("Sheet2");
       } 
     }

hideWaitingPopUp()

This method is used to hide the displayed waiting pop-up in Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // hide waiting popup in the Spreadsheet.
    xlObj.hideWaitingPopUp();
       } 
     }

insertEntireColumn(startCol, endCol)

This method is used to insert a column before the active cell’s column in the Spreadsheet.

Name	Type	Description
startCol	number	Pass start column.
endCol	number	Pass end column.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Insert a column in the sheet.
    xlObj.insertEntireColumn(1, 2);
       } 
     }

insertEntireRow(startRow, endRow)

This method is used to insert a row before the active cell’s row in the Spreadsheet.

Name	Type	Description
startRow	number	Pass start row.
endRow	number	Pass end row.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Insert a row in the sheet.
    xlObj.insertEntireRow(1, 2);
       } 
     }

insertSheet()

This method is used to insert a new sheet to the left of the current active sheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.insertSheet(); // Sends a insert new sheet request to the Spreadsheet.
       } 
     }

insertShiftBottom(startCell, endCell)

This method is used to insert cells in the selected or specified range and shift remaining cells to bottom.

Name	Type	Description
startCell	Object	Row index and column index of the start cell.
endCell	Object	Row index and column index of the end cell.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){

    let startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Insert a cells and shift cells bottom in the sheet.
    xlObj.insertShiftBottom(startCell, endCell);
       } 
     }

insertShiftRight(startCell, endCell)

This method is used to insert cells in the selected or specified range and shift remaining cells to right.

Name	Type	Description
startCell	Object	Row index and column index of the start cell.
endCell	Object	Row index and column index of the end cell.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){

    let startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Insert a cells and shift cells right in the sheet.
    xlObj.insertShiftRight(startCell, endCell);
       } 
     }

import(importRequest)

This method is used to import excel file manually by using form data.

Name	Type	Description
importRequest	Object	Pass the form data object to import files manually.

The Objects are File, Password, URL, FileStream, FileType.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    var importRequest = { Url:"http://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx" };
    xlObj.import(importRequest); 
       } 
     }

loadFromJSON(response)

This method is used to load JSON data in Spreadsheet.

Name	Type	Description
response	Object	Pass the response that you want to load.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let response = excelObj.saveAsJSON();
    xlObj.loadFromJSON(response); // To load JSON data in the Spreadsheet.
       } 
     }

lockCells(range, [isLocked])

This method is used to lock/unlock the range of cells in active sheet. Lock cells are activated only after the sheet is protected. Once the sheet is protected it is unable to lock/unlock cells.

Name Type Description

range string|Array Pass the alpha range cells or array range of cells.

isLocked

Name	Type	Description
range	string\|Array	Pass the alpha range cells or array range of cells.
isLocked	string	Optional. By default is `true` . If it is `false` locked cells are unlocked.

string

Optional. By default is

true

. If it is

false

locked cells are unlocked.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.lockCells("A3:B5", true); // To lock cells in the Spreadsheet.
       } 
     }

mergeAcrossCells([range], [alertStatus])

This method is used to merge cells by across in the Spreadsheet.

Name	Type	Description
range	string	Optional. To pass the cell range or selected cells are process.
alertStatus	boolean	Optional. If pass `true` it does not show alert.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.mergeAcrossCells("A3:B5", true); // To merge cells across in the Spreadsheet.
       } 
     }

mergeCells([range], [alertStatus])

This method is used to merge the selected cells in the Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. To pass the cell range or selected cells are process.
alertStatus	boolean	Optional. If pass `true` it does not show alert.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.mergeCells("A3:B5", true); // To merge the selected cell in Spreadsheet.
       } 
     }

performSelection(startCell, endCell)

This method is used to select a cell or range in the Spreadsheet.

Name	Type	Description
startCell	Object	Pass the start cell to perform selection.
endCell	Object	Pass the end cell to perform selection.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To perform selection for the specified range.
    xlObj.performSelection({ rowIndex: 1, colIndex: 1 }, { rowIndex: 2, colIndex: 2 }); 
    // Range as string
    xlObj.performSelection("B1:C3");
       } 
     }

protectSheet([isProtected])

This method is used to protect or unprotect active sheet.

Name Type Description

isProtected

Name	Type	Description
isProtected	boolean	Optional. By default is `true` . If it is `false` active sheet is unprotected.

boolean

Optional. By default is

true

. If it is

false

active sheet is unprotected.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To protect sheet in Spreadsheet.
    xlObj.protectSheet(false);
       } 
     }

refreshContent(sheetIdx)

This method is used to refresh the content in Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the index of the sheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To refresh the sheet content in Spreadsheet.
    xlObj.refreshContent(1);
       } 
     }

refreshSpreadsheet()

This method is used to refresh the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To refresh the Spreadsheet.
    xlObj.refreshSpreadsheet();
       } 
     }

removeCustomFormula(formulaName, functionName)

This method is used to remove custom formulae in Spreadsheet.

Name	Type	Description
formulaName	string	Pass the name of the formula.
functionName	string	Pass the name of the function.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.removeCustomFormula("CUSTOMTOTAL","customTotal"); // Sends a remove custom formula request to the Spreadsheet.
    customTotal(args){}//args-It uses the value given by the user while using custom formula in Spreadsheet.
       } 
     }

removeHyperlink(range, [isClearHLink], [status], [cells], [skipHiddenRow])

This method is used to remove the hyperlink from selected cells of current sheet.

Name	Type	Description
range	string	Hyperlink remove from the specified range.
isClearHLink	boolean	Optional. If it is `true` , It will clear link only not format.
status	boolean	Optional. Pass the status to perform undo and redo operations.
cells	Object	Optional. Pass the cells that you want to remove hyperlink.
skipHiddenRow	boolean	Optional. Pass `true` , if you want to skip the hidden rows.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.removeHyperlink("A2:A3", false); // To remove the hyperlink  of specified range
       } 
     }

removeRange(rangeName)

This method is used to remove the range data and its defined rangeSettings property based on the specified range name.

Name	Type	Description
rangeName	string	Pass the defined rangeSetting property name.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Sends a remove range request to the Spreadsheet.
    xlObj.removeRange("updateTable"); 
       } 
     }

removeReadOnly([range])

This method is used to remove the readonly option for the specified range.

Name	Type	Description
range	string\|Array	Pass the range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Removes readonly option for the range.
    xlObj.removeReadOnly("B3"); 
       } 
     }

saveAsJSON()

This method is used to save JSON data in Spreadsheet.

Returns:

Object

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.saveAsJSON();
       } 
     }

saveBatchChanges(sheetIdx)

This method is used to save batch changes in Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index for Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //Set sheet index for Spreadsheet. 
    xlObj.saveBatchChanges(1);
       } 
     }

setActiveCell(rowIdx, colIdx, sheetIdx)

This method is used to set the active cell in the Spreadsheet.

Name	Type	Description
rowIdx	number	Pass the row index.
colIdx	number	Pass the column index.
sheetIdx	number	Pass the index of the sheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.setActiveCell(1, 0, 1); // Sets activeCell in Spreadsheet.
       } 
     }

setActiveSheetIndex(sheetIdx)

This method is used to set active sheet index for the Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the active sheet index for Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //Set active sheet index for Spreadsheet. 
    xlObj.setActiveSheetIndex(sheetIndex);
       } 
     }

setBorder(property, [range])

This method is used to set border for the specified range of cells in the Spreadsheet.

Name	Type	Description
property	Object	Pass the border properties that you want to set.
range	string	Optional. If range is specified, it will set border for the specified range else it will use the selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.setBorder({ style: "solid", type: "outside", color: "#000000"}, "B2:B6"); // To set borders in Spreadsheet
       } 
     }

setHeightToRows(heightColl)

This method is used to set the height for the rows in the Spreadsheet.

Name	Type	Description
heightColl	Array\|Object	Pass the row index and height of the rows.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let heightRowObj= [{rowIndex: 2, height: 40}, {rowIndex: 3, height: 50}], heightRowArr = [50, 40];
        //Initialize the Spreadsheet object
        let xlObj = $("#Spreadsheet").data("ejSpreadsheet");
        // Set height for specified rows in active sheet.
        xlObj.setHeightToRows(heightRowObj);
        // Set height for rows starting from the '0'th index in active sheet.
        xlObj.setHeightToRows(heightRowArr);
       } 
     }

setHyperlink(range, link, sheetIdx)

This method is used to set the hyperlink in selected cells of the current sheet.

Name	Type	Description
range	string\|Array	If range is specified, it will set the hyperlink in range of the cells.
link	Object	Pass cellAddress or webAddress
sheetIdx	number	If we pass cellAddress then which sheet to be navigate in the applied link.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.setHyperlink("A2:A3",{"cellAddr":"A2:A8"}, 3); // To set the hyperlink  of specified range.
       } 
     }

setReadOnly([range])

This method is used to set the readonly option for the specified range.

Name	Type	Description
range	string\|Array	Pass the range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Sets readonly option for the range.
    xlObj.setReadOnly("B3"); 
       } 
     }

setSheetFocus()

This method is used to set the focus to the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Set focus on Spreadsheet.
    xlObj.setSheetFocus(); 
       } 
     }

setWidthToColumns(widthColl)

This method is used to set the width for the columns in the Spreadsheet.

Name	Type	Description
widthColl	Array\|Object	Pass the column index and width of the columns.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
   let widthCollObj= [{colIndex: 2, width: 40}, {colIndex: 3, width: 50}], widthCollArr = [80, 90];
   //initialize the Spreadsheet object
   let xlObj = $("#spreadsheet").data("ejSpreadsheet");
   // Set width for specified columns in active sheet
   xlObj.setWidthToColumns(widthCollObj);
   // Set width for columns starting from the '0'th index in active sheet.
   xlObj.setWidthToColumns(widthCollArr); 
       } 
     }

sheetRename(sheetName)

This method is used to rename the active sheet.

Name	Type	Description
sheetName	string	Pass the sheet name that you want to change the current active sheet name.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.sheetRename("Sep-Billing"); // Sends a sheet rename request to the Spreadsheet
       } 
     }

showActivationPanel(rangeName)

This method is used to display the activationPanel for the specified range name.

Name	Type	Description
rangeName	string	Pass the range name that you want to display the activation panel.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.showActivationPanel("upTable"); // To display the activationPanel in Spreadsheet
       } 
     }

showColumn(startCol, endCol)

This method is used to show the hidden columns within the specified range in the Spreadsheet.

Name	Type	Description
startColIdx	number	Index of the start column.
endColIdx	number	Optional. Index of the end column.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // show the hidden column by passing column index in the active sheet.
    xlObj.showColumn(1);
    // show the hidden columns from startColIdx to startColIdx in the active sheet.
    xlObj.showColumn(3, 6);
       } 
     }

showFormulaBar()

This method is used to show the formula bar in Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //To show the formula bar in Spreadsheet
    xlObj.showFormulaBar();
       } 
     }

showGridlines(status)

This method is used to show/hide gridlines in active sheet in the Spreadsheet.

Name	Type	Description
status	boolean	Pass `true` to show the gridlines

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To hide the gridlines in the sheet.
    xlObj.showGridlines(false);
       } 
     }

showHeadings(status)

This method is used to show/hide the headers in active sheet in the Spreadsheet.

Name	Type	Description
startRow	boolean	Pass `true` to show the sheet headers.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To hide the headers in the sheet.
    xlObj.showHeadings(false);
       } 
     }

showPager(status)

This method is used to show/hide pager in the Spreadsheet.

Name	Type	Description
status	boolean	Pass `true` to show pager.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.showPager(false); // Gets or sets the value to show/hide pager.
       } 
     }

showRow(startRow, endRow)

This method is used to show the hidden rows in the specified range in the Spreadsheet.

Name	Type	Description
startRow	number	Index of the start row.
endRow	number	Optional. Index of the end row.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // show the hidden row by passing row index in the active sheet.
    xlObj.showRow(1);
    // To show the hidden rows for startRow to endRow in the active sheet.
    xlObj.showRow(3, 6);
       } 
     }

showWaitingPopUp()

This method is used to show waiting pop-up in Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To show waiting popup in Spreadsheet
    xlObj.showWaitingPopUp();
       } 
     }

unhideSheet(sheetInfo)

This method is used to unhide the sheet based on specified sheet name or sheet index.

Name	Type	Description
sheetInfo	string\|number	Pass the sheet name or index that you want to unhide.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //To unhide a sheet in Spreadsheet.
    xlObj.unhideSheet("Sheet2");
       } 
     }

unmergeCells([range])

This method is used to unmerge the selected range of cells in the Spreadsheet.

Name	Type	Description
range	string	Optional. If the range is specified, then it will un merge the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To unmerge the selected cells in Spreadsheet.
    xlObj.unmergeCells("A3:B5"); 
       } 
     }

unWrapText([range])

This method is used to unwrap the selected range of cells in the Spreadsheet.

Name	Type	Description
range	Array\|string	Optional. If the range is specified, then it will update unwrap in the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To unwrap the cell text.
    xlObj.unWrapText("A1:B3");
       } 
     }

updateData(data, [range])

This method is used to update the data for the specified range of cells in the Spreadsheet.

Name	Type	Description
data	Object	Pass the cells data that you want to update.
range	Array\|string	Optional. If range is specified, it will update data for the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To update data in the specified range of the cells in Spreadsheet.
    xlObj.updateData([{ value: 10, value2: 10, type: "general"}, { value: 25000, value2: 25000, type: "general"}], "A3"); 
       } 
     }

updateFormulaBar()

This method is used to update the formula bar in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //To update the formula bar in Spreadsheet
    xlObj.updateFormulaBar();
       } 
     }

updateRange(sheetIdx, settings)

This method is used to update the range of cells based on the specified settings which we want to update in the Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index that you want to update.
settings	Object	Pass the dataSource, startCell and showHeader values as settings.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let settings = { dataSource: [{ Product: "XYZ", Price: "2000" }], showHeader: "true", startCell: "F1" };
    // To update range of cells with the specified settings
    xlObj.updateRange(1, settings); 
       } 
     }

updateUndoRedoCollection(details)

This method is used to update the details for custom undo and redo operations.

Name	Type	Description
details	Object	Pass the details to update undo and redo collection

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let details = { action: "custom", cell: excelObj.getActiveCell(), sheetIndex: 1 };
    // To update undo and redo collections.
    xlObj.updateUndoRedoCollection(details); 
       } 
     }

updateUniqueData(data, [range], [skipCell])

This method is used to update the unique data for the specified range of cells in Spreadsheet.

Name	Type	Description
data	Object	Pass the data that you want to update in the particular range
range	Array\|string	Optional. If range is specified, it will update data for the specified range else it will use the current selected range.
skipCell	Object	Optional. It specifies whether to skip element processing or not.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To update unique data in Spreadsheet.
    xlObj.updateUniqueData({ value: 10, value2: 10, type: "general"}, [1, 0, 5, 0]); 
       } 
     }

wrapText([range])

This method is used to wrap the selected range of cells in the Spreadsheet.

Name	Type	Description
range	Array\|string	Optional. If the range is specified, then it will update wrap in the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To wrap the cell Text.
    xlObj.wrapText("A1:B3");
       } 
     }

XLCellType

XLCellType.addCellTypes(range, settings, [sheetIdx])

This method is used to set a cell type from the specified range of cells in the spreadsheet.

Name	Type	Description
range	string	Pass the range where you want apply cell type.
settings	Object	Pass type of cell type and its settings.
sheetIdx	number	Optional. Pass sheet index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To add cell types in Spreadsheet.
    xlObj.XLCellType.addCellTypes("A1:B3", {"type" : ej.Spreadsheet.CustomCellType.Button, "text" : "Button1", "background-color" : "green" },  1);
    } 
}

XLCellType.removeCellTypes(range, [sheetIdx])

This method is used to remove cell type from the specified range of cells in the Spreadsheet.

Name	Type	Description
range	string\|Array	Pass the range where you want remove cell type.
sheetIdx	number	Optional. Pass sheet index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        // To remove cell types in Spreadsheet.
        xlObj.XLCellType.removeCellTypes("A1:B2", 1);
    } 
}

XLCFormat

XLCFormat.clearCF([range])

This method is used to clear the applied conditional formatting rules in the Spreadsheet.

Name	Type	Description
range	Array\|string	Optional. If range is specified, it will clear rules for the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        // To clear conditional formatting rules in Spreadsheet.
        xlObj.XLCFormat.clearCF([1, 0, 7, 0]);
    } 
}

XLCFormat.getCFRule(rowIdx, colIdx)

This method is used to get the applied conditional formatting rules as array of objects based on the specified row Index and column Index in the Spreadsheet.

Name	Type	Description
rowIdx	number	Pass the row index.
colIdx	number	Pass the column index.

Returns:

Array

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        // Gets the conditional formatting rules in Spreadsheet.
        xlObj.XLCFormat.getCFRule(2, 0);
    } 
}

XLCFormat.setCFRule(rule)

This method is used to set the conditional formatting rule in the Spreadsheet.

Name	Type	Description
rule	Object	Pass the rule to set.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        // Sets the conditional formatting rules in Spreadsheet
        xlObj.XLCFormat.setCFRule({ action: "lessthan", inputs: ["30"], color: "yellowft", range: "H3:H7" });
    } 
 }

XLChart

XLChart.changeTheme(chartId, theme)

This method is used to change the theme of the chart in the Spreadsheet.

Name	Type	Description
chartId	string	Pass the chart id.
theme	enum	Pass the chart theme which want to update.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet"), chartId = "Spreadsheet_chart1"
        let theme = ej.datavisualization.Chart.Theme.Azuredark;
        xlObj.XLChart.changeTheme(chartId, theme); // To update chart theme.
    } 
}

NOTE

You can use the supported chart themes.

XLChart.changeType(chartId, option)

This method is used to change the type of the chart in the Spreadsheet.

Name	Type	Description
chartId	string	Pass the chart id.
option	Object	Pass the chart type.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet"), chartId = "Spreadsheet_chart1"
        xlObj.XLChart.changeType(chartId,{type: "radar", enable3D: false, marker: {visible: false}} ); // To change chart type.
    } 
 }

XLChart.changeDataRange(chartId, xRange, yRange, lRange)

This method is used to change the data range of the chart in the Spreadsheet.

Name	Type	Description
chartId	string	Pass the chart id.
xRange	string	X axis range of chart data.
yRange	string	Y axis range of chart data.
lRange	string	Legend range of chart data.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet"), chartId = "Spreadsheet_chart1"
        xlObj.XLChart.changeDataRange(chartId, "A2:A7", "A2:B5", "A1:B1"); // To change the data range of the chart.
    } 
}

XLChart.createChart([range], [options])

This method is used to create a chart for specified range in Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. If range is specified, it will create chart for the specified range else it will use the current selected range.
options	Object	Optional. To pass the type of chart and chart name.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLChart.createChart("A3:A7",{"type":"stackingcolumn100","enable3D":"true","marker":{"visible":false}}); // To create chart in Spreadsheet.
    } 
}

XLChart.refreshChart(id, options)

This method is used to refresh the chart in the Spreadsheet.

Name	Type	Description
id	string	To pass the chart Id.
options	Object	To pass the type of chart and chart name.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLChart.refreshChart(id,{"type":"stackingcolumn100","enable3D":"true","marker":{"visible":false}}); // To refresh the chart in Spreadsheet
    } 
 }

XLChart.resizeChart(id, height, width)

This method is used to resize the chart of specified id in the Spreadsheet.

Name	Type	Description
id	string	To pass the chart id.
height	number	To pass height value.
width	number	To pass the width value.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLChart.resizeChart("Spreadsheet_chart1", 200, 300); // It is used to resize the chart in Spreadsheet.
    } 
 }

XLChart.updateChartElement(chartId, value)

This method is used to update the chart element, such as axes, titles, data labels, grid lines and legends in the Spreadsheet.

Name	Type	Description
chartId	string	Pass the chart id.
value	enum	Pass chart element value which you want to update.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet"),
        chartId = "Spreadsheet_chart1", 
        value = ej.Spreadsheet.ChartProperties.PrimaryHorizontal; 
        xlObj.XLChart.updateChartElement(chartId, value); // To update chart property.
    } 
 }

ChartProperties

Specifies the chart element value in the Spreadsheet,

Name	Description
DataLabelCenter	Specifies to make the data label center of the chart.
DataLabelInsideBase	Specifies to make the data label inside base of the chart.
DataLabelInsideEnd	Specifies to make the data label inside end of the chart.
DataLabelNone	Specifies to make the data label none of the chart.
DataLabelOutsideEnd	Specifies to make the data label outside end of the chart.
LegendsBottom	Specifies to make the legends to bottom of the chart.
LegendsLeft	Specifies to make the legends to left of the chart.
LegendsNone	Specifies to make the legends to none of the chart.
LegendsRight	Specifies to make the legends to right of the chart.
LegendsTop	Specifies to make the legends to top of the chart.
PrimaryHorizontal	To set the primary horizontal of the chart.
PrimaryHorizontalAxisTitle	To set the primary horizontal axis title of the chart.
PrimaryMajorHorizontal	To set the primary major horizontal of the chart.
PrimaryMajorVertical	To set the primary major vertical of the chart.
PrimaryMinorHorizontal	To set the primary minor horizontal of the chart.
PrimaryMinorVertical	To set the primary minor vertical of the chart.
PrimaryVertical	To set the primary vertical of the chart.
PrimaryVerticalAxisTitle	To set the primary vertical axis title of the chart.
TitleCenter	Specifies to make the title to center of the chart.
TitleFar	Specifies to make the title to far of the chart.
TitleNear	Specifies to make the title to near of the chart.
TitleNone	Specifies to make the title to none of the chart.

XLChart.switchRowColumn(chartId)

This method is used switch row to columns and vice versa for chart in the Spreadsheet. So that the data is displayed in the chart the way you want.

Name	Type	Description
chartId	string	Pass the chart id.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet"),
        chartId = "Spreadsheet_chart1";
        xlObj.XLChart.switchRowColumn(chartId);
    } 
 }

XLClipboard

XLClipboard.copy()

This method is used to copy the selected cells in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        // To copy cells in a Spreadsheet.
        xlObj.XLClipboard.copy();
    } 
 }

XLClipboard.cut()

This method is used to cut the selected cells in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        // To cut cells in a Spreadsheet
        xlObj.XLClipboard.cut();
    } 
 }

XLClipboard.paste()

This method is used to paste the cut or copied cells data in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        // To paste data in Spreadsheet
        xlObj.XLClipboard.paste();
    } 
 }

XLComment

XLComment.deleteComment([range], [sheetIdx], [skipHiddenRow])

This method is used to delete the comment in the specified range in Spreadsheet.

Name	Type	Description
range	Array\|string	Optional. If range is specified, it will delete comments for the specified range else it will use the current selected range.
sheetIdx	number	Optional. If sheetIdx is specified, it will delete comment in specified sheet else it will use active sheet.
skipHiddenRow	boolean	Optional. Pass `true` , if you want to skip the hidden rows data.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        //Sends a delete comment request to the Spreadsheet.
        xlObj.XLComment.deleteComment("A1:D3", 1, true);
    } 
 }

XLComment.editComment([targetCell])

This method is used to edit the comment in the target Cell in Spreadsheet.

Name	Type	Description
targetCell	Object	Optional. Pass the row index and column index of the cell which contains comment.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        //Sends an edit comment request to the Spreadsheet.
        xlObj.XLComment.editComment({rowIndex: 1, colIndex: 1});
    } 
 }

XLComment.findNextComment()

This method is used to find the next comment from the active cell in Spreadsheet.

Returns:

boolean

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        //Sends a find next comment request to the Spreadsheet.
        xlObj.XLComment.findNextComment();
    } 
 }

XLComment.findPrevComment()

This method is used to find the previous comment from the active cell in Spreadsheet.

Returns:

boolean

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        //Sends a find previous comment request to the Spreadsheet.
        xlObj.XLComment.findPrevComment();
    } 
 }

XLComment.getComment(cell)

This method is used to get comment data for the specified cell.

Name	Type	Description
cell	Element	Pass the DOM element to get comment data as object.

Returns:

Object

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLComment.getComment(xlObj.getCell(1, 5)); // Get the specified cell comment data.
    } 
 }

XLComment.setComment([range], [data], [showEditPanel], [showUserName])

This method is used to set new comment in Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. If we pass the range comment will set in the range otherwise it will set with selected cells.
data	string	Optional. Pass the comment data.
showEditPanel	boolean	Optional. Pass `true` to show comment in edit mode
showUserName	boolean	Optional. Pass `true` to show the user name

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        //To set comment in Spreadsheet.
        xlObj.XLComment.setComment("A2", "Spreadsheet Comment!");
    } 
 }

XLComment.showAllComments()

This method is used to show all the comments in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        //Sends a show all comment request to the Spreadsheet.
        xlObj.XLComment.showAllComments();
    } 
 }

XLComment.showHideComment([targetCell])

This method is used to show or hide the specific comment in the Spreadsheet.

Name	Type	Description
targetCell	Element	Optional. Pass the cell DOM element to show or hide its comment. If pass empty argument active cell will processed.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        //To show/hide comment request in Spreadsheet.
        xlObj.XLComment.showHideComment(excelObj.getCell(1, 5));
    } 
 }

XLCMenu

XLCMenu.addItem(target, itemColl, operation)

This method is used to dynamically add items in the context menu.

Name	Type	Description
target	string	Specifies the context menu type in which the item to be inserted.
itemColl	Array	Pass the items to be inserted
operation	string	Specifies the type of operation to be performed

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.Cell, [{"text":"Added item 1!!!", "url":"#", "id": "Added item1", "spriteCssClass": "e-icon e-ss-cut" }], 'insertbefore'); // To add a item in the context menu.
    } 
 }

XLCMenu.changeDataSource(target, data)

This method is used to change data source in the context menu.

Name	Type	Description
target	string	Specifies the context menu type to bind the data source.
data	Array	Pass the data source to be binded

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLCMenu.changeDataSource(ej.Spreadsheet.ContextMenu.Cell,[{ id: "Comment", text: 'cmnt', parentId: null, spriteCssClass: "e-icon e-ss-newcmnt" }]); // To change the data source in the context menu.
    } 
 }

XLCMenu.disableItem(target, idxColl)

This method is used to disable the items in the context menu.

Name	Type	Description
target	string	Specifies the context menu type in which the item to be disabled.
idxColl	Array	Specifies the Menu Item id collection to be disabled

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLCMenu.disableItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]); // To disable the item in the context menu.
    } 
 }

XLCMenu.enableItem(target, idxColl)

This method is used to enable the items in the context menu.

Name	Type	Description
target	string	Specifies the context menu type in which the item to be enabled.
idxColl	Array	Specifies the Menu Item id collection to be enabled

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLCMenu.enableItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]); // To enable the item in the context menu.
    } 
 }

XLCMenu.removeItem(target, idxColl)

This method is used to remove the items in the context menu.

Name	Type	Description
target	string	Specifies the context menu type in which the item to be removed.
idxColl	Array	Specifies the Menu Item id collection to be removed

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.XLCMenu.removeItem(ej.Spreadsheet.ContextMenu.Cell, [1,2,3]); // To remove the item in the context menu.
    } 
 }

XLDragDrop

XLDragDrop.moveRangeTo(sourceRange, destinationRange)

This method is used to drag and drop the selected range of cells to destination range in the Spreadsheet.

Name	Type	Description
sourceRange	Object\|Array	Pass the source range to perform drag and drop.
destinationRange	Object\|Array	Pass the destination range to drop the dragged cells.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let options = {sourcerange: [1,2,1,2], destinationrange: [1,3,1,6]}
    xlObj.XLDragDrop.moveRangeTo(options.sourcerange, options.destinationrange); // To perform drag and drop in Spreadsheet.
    } 
 }

XLDragFill

XLDragFill.autoFill(options)

This method is used to perform auto fill in Spreadsheet.

Name	Type	Description
options	Object	Pass the options to perform auto fill in Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let options = {dataRange: "A1:B1", direction: "right", fillRange:"A1:B2"}
    xlObj.XLDragFill.autoFill(options); // To perform autofill in Spreadsheet.
    } 
 }

XLDragFill.hideAutoFillElement()

This method is used to hide the auto fill element in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To hide auto fill element in Spreadsheet
    xlObj.XLDragFill.hideAutoFillElement();
    } 
 }

XLDragFill.hideAutoFillOptions()

This method is used to hide the auto fill options in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To hide auto fill element in Spreadsheet
    xlObj.XLDragFill.hideAutoFillOptions();
    } 
 }

XLDragFill.positionAutoFillElement(isDragFill)

This method is used to set position of the auto fill element in the Spreadsheet.

Name	Type	Description
isDragFill	boolean	Pass the isDragFill option as `boolean` value to show auto fill options in Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLDragFill.positionAutoFillElement(false); // set position of the autofill element in Spreadsheet.
    } 
 }

XLEdit

XLEdit.calcNow([sheetIdx])

This method is used to calculate formulas in the specified sheet.

Name	Type	Description
sheetIdx	number	Optional. If sheet index is specified, then it will calculate formulas in the specified sheet only else it will calculate formulas in all sheets.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLEdit.calcNow(1); // To calculate formulas in specified sheet in Spreadsheet.
    } 
 }

XLEdit.editCell(rowIdx, colIdx, oldData)

This method is used to edit a particular cell based on the row index and column index in the Spreadsheet.

Name	Type	Description
rowIdx	number	Pass the row index to edit particular cell.
colIdx	number	Pass the column index to edit particular cell.
oldData	boolean	Pass `true` , if you want to maintain previous cell value.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Edit particular cell based on row index and column index.
    xlObj.XLEdit.editCell(1, 1, true);
    } 
 }

XLEdit.getPropertyValue(rowIdx, colIdx, [prop], [sheetIdx])

This method is used to get the property value of particular cell, based on the row and column index in the Spreadsheet.

Name	Type	Description
rowIdx	number	Pass the row index to get the property value.
colIdx	number	Pass the column index to get the property value.
prop	string	Optional. Pass the property name that you want("value", "value2", "type", "cFormatRule", "range", "thousandSeparator", "rule", "format", "border", "picture", "chart", "calcValue", "align", "hyperlink", "formats", "borders", "tformats", "tborders", "isFilterHeader", "filterState", "tableName", "comment", "formatStr", "decimalPlaces", "cellType").
sheetIdx	number	Optional. Pass the index of the sheet.

Returns:

Object|string|Array

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Get the cell property value.
    xlObj.XLEdit.getPropertyValue(1, 1, "value", 1);
    } 
 }

XLEdit.getPropertyValueByElem(elem, property, sheetIdx)

This method is used to get the property value in specified cell in Spreadsheet.

Name	Type	Description
elem	Element	Pass the cell element to get property value.
property	string	Pass the property name that you want ("value", "value2", "type", "cFormatRule", "range", "thousandSeparator", "rule", "format", "border", "picture", "chart", "calcValue", "align", "hyperlink", "formats", "borders", "tformats", "tborders", "isFilterHeader", "filterState", "tableName", "comment", "formatStr", "decimalPlaces", "cellType").
sheetIdx	number	Pass the index of sheet.

Returns:

Object|string|Array

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Get the cell property value based on tag element.
    xlObj.XLEdit.getPropertyValueByElem(excelObj.getCell(1, 1), "value", 1);
    } 
 }

XLEdit.saveCell()

This method is used to save the edited cell value in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Save the edited cell value
    xlObj.XLEdit.saveCell();
    } 
 }

XLEdit.updateCell(cell, value)

This method is used to update a particular cell value in the Spreadsheet.

Name	Type	Description
cell	Object	Pass row index and column index of the cell.
value	string\|number	Pass the cell value.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Update the specified values to a particular cell.
    xlObj.XLEdit.updateCell({rowIndex: 1, colIndex: 1}, "product");
    } 
 }

XLEdit.updateCellValue(cellIdx, val, formatClass, sheetIdx)

This method is used to update a particular cell value and its format in the Spreadsheet.

Name	Type	Description
cellIdx	Object	Pass row index and column index of the cell.
val	string\|number	Pass the cell value.
formatClass	string	Pass the class name to update format.
sheetIdx	number	Pass sheet index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let className = excelObj.XLFormat.getFormatHashCode({ color: "#FF0000" });
    // To update the specified values in a particular cell.
    xlObj.XLEdit.updateCellValue({rowIndex: 1, colIndex: 1}, "product", className, 1);
    } 
 }

XLExport

XLExport.export(type)

This method is used to save the sheet data as Excel ,CSV or PDF document (.xls, .xlsx .csv, .pdf) in Spreadsheet.

NOTE

To use export, user must provide the excelUrl, csvUrl, and pdfUrl property in exportSettings.

Name	Type	Description
type	string	Pass the export type that you want.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To save the worksheet on Excel format.
    xlObj.XLExport.export("Excel", "sample");
    } 
 }

getExportProps()

This method is used to get the export properties in the Spreadsheet.

Returns:

Object

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLExport.getExportProps(); // Gets export properties in Spreadsheet.
    } 
 }

XLFilter

XLFilter.clearFilter()

This method is used to clear the filter in filtered columns in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Clear filter for columns in the sheet.
    xlObj.XLFilter.clearFilter();
    } 
 }

XLFilter.filter(range)

This method is used to apply filter for the selected range of cells in the Spreadsheet.

Name	Type	Description
range	string\|Array	Pass the range of the selected cells.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To apply filter for specified range of cells.
    xlObj.XLFilter.filter("A3:C8");
    } 
 }

XLFilter.filterByActiveCell()

This method is used to apply filter for the column by active cell’s value in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Apply filter for columns with active cell in the sheet.
    xlObj.XLFilter.filterByActiveCell();
    } 
 }

XLFormat

XLFormat.addFontFamily(fontName)

This method is used to add the font to the Ribbon font family dropdown.

Name	Type	Description
fontName	string	Font name which needs to add into the font family option.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLFormat.addFontFamily("Gisha"); // To add the font name into font family option.
    } 
 }

XLFormat.convertToRange(options)

This method is used to convert table range to normal range.

Name	Type	Description
options	Object	Pass the sheet index and table id.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLFormat.convertToRange({sheetIdx: 1, tableId: 1}); // To convert table range to normal range.
    } 
 }

XLFormat.createTable( tableObject, [range])

This method is used to create a table for the selected range of cells in the Spreadsheet.

Name	Type	Description
tableObject	Object	Pass the table object.
range	string\|Array	Optional. If the range is specified, then it will create table in the specified range else it will use the current selected range.

Returns:

string

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let tableObj = { header: true, name: "Table1", formatName: "TableStyleLight1"};
    // Sends a create table request to the Spreadsheet
    xlObj.XLFormat.createTable(tableObj, "A1:C6");
    } 
 }

XLFormat.format(formatObj, range)

This method is used to set format style and values in a cell or range of cells.

Name	Type	Description
formatObj	Object	Pass the formatObject which contains style, type, format, groupSeparator and decimalPlaces.
range	string	Pass the range to format cells.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
let xlObj = $("#spreadsheet").data("ejSpreadsheet");
// Sends a format request to the Spreadsheet.
xlObj.XLFormat.format({style:{ "background-color": "#C0C0C0"}}, "A1:C10");
//Default Number format - decimal places is 2.
xlObj.XLFormat.format({ "type": "number" }, "B1");
//Number format with 3 decimal places by default thousandseparator as true.
xlObj.XLFormat.format({ "type": "number", "decimalPlaces": 3, "thousandSeparator": false }, "B3");
//Currency format with formatStr property.
xlObj.XLFormat.format({ "type": "currency", "formatStr":"{0:C3}" }, "B1");
//Accounting format with formatStr property.
xlObj.XLFormat.format({ "type": "accounting", "formatStr":"{0:C2}" }, "A1");
//Percentage format with formatStr property.
xlObj.XLFormat.format({ "type": "percentage", "formatStr":"{0:P2}" }, "B1");
//Short date format with formatStr property.
xlObj.XLFormat.format({ "type": "shortdate", "formatStr":"{0:MM/dd/yyyy}" }, "C1");
xlObj.XLFormat.format({ "type": "longdate" }, "D1");
//Time format with formatStr property.
xlObj.XLFormat.format({ "type": "time", "formatStr":"{0:hh:mm:ss tt}" }, "E1");
xlObj.XLFormat.format({ "type": "scientific" }, "F1");
xlObj.XLFormat.format({ "type": "fraction" }, "G1");
    } 
 }

XLFormat.removeFontFamily(fontName)

This method is used to remove the font from the Ribbon font family dropdown.

Name	Type	Description
fontName	string	Font name which needs to remove from the font family drop down.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLFormat.removeFontFamily("Gisha"); // To remove the name from the font family drop down.
    } 
 }

XLFormat.removeStyle(range,options)

This method is used to remove the style in the specified range.

Name	Type	Description
range	Array\|string	Pass the cell range .
options	Object	Optional. Pass the options for which the style gets removed.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Sends a remove style request to the Spreadsheet.
    xlObj.XLFormat.removeStyle("E4:F13",{ cellStyle: true, tableStyle: true, format: true, border: true }); 
    } 
 }

XLFormat.removeTable(tableId)

This method is used to remove table with specified tableId in the Spreadsheet.

Name	Type	Description
tableId	number	Pass the tableId that you want to remove.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Sends a remove table request to the Spreadsheet.
    xlObj.XLFormat.removeTable(1);
    } 
 }

XLFormat.updateDecimalPlaces(type, range)

This method is used to update the decimal places for numeric value for the selected range of cells in the Spreadsheet.

Name	Type	Description
type	string	Pass the decimal places type in IncreaseDecimal/DecreaseDecimal.
range	string\|Array	Pass the range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To update decimal place value in the range of cells in the Spreadsheet.
   xlObj.XLFormat.updateDecimalPlaces("IncreaseDecimal", "A1:C3");
    } 
 }

XLFormat.updateFormat(formatObj, [range])

This method is used to update the format for the selected range of cells in the Spreadsheet.

Name	Type	Description
formatObj	Object	Pass the format object that you want to update.
range	Array	Optional. If the range is specified, then it will update format in the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let formatObj = { format: ["e-formatFFFF006N2N2N1N1N1N1N2N1N", "", "e-formatFFFF006N2N2N1N1N1N1N2N1N"], leftborder: ["","",""], topborder: ["e-border1N1N6N1N1N6NS1N1N6N11000000"]};
    // To update a format in the specified range of cells.
    xlObj.XLFormat.updateFormat(formatObj, [1, 0, 3, 0]);
    } 
 }

XLFormat.updateUniqueFormat(formatClass, [range])

This method is used to update the unique format for selected range of cells in the Spreadsheet.

Name	Type	Description
formatClass	string	Pass the unique format class.
range	Array	Optional. If the range is specified, then it will update format in the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To update the unique format.
    xlObj.XLFormat.updateUniqueFormat("e-formatFFFF006N2N2N251N1N2N", [1, 0, 4, 0]);

    } 
 }

XLFreeze

XLFreeze.freezeColumns(colIdx)

This method is used to freeze columns upto the specified column index in the Spreadsheet.

Name	Type	Description
colIdx	number	Index of the column to be freeze.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Freeze a column in the sheet.
    xlObj.XLFreeze.freezeColumns(2);

    } 
 }

XLFreeze.freezeLeftColumn()

This method is used to freeze the first column in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Freeze the first column in the sheet. 
    xlObj.XLFreeze.freezeLeftColumn();

    } 
 }

XLFreeze.freezePanes(rowIdx, colIdx)

This method is used to freeze rows and columns before the specified cell in the Spreadsheet.

Name	Type	Description
rowIdx	number	Index of the row to be freeze.
colIdx	number	Index of the column to be freeze.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Freeze some rows and columns in the sheet.
    xlObj.XLFreeze.freezePanes(2, 3);

    } 
 }

XLFreeze.freezeRows(rowIdx)

This method is used to freeze rows upto the specified row index in the Spreadsheet.

Name	Type	Description
rowIdx	number	Index of the row to be freeze.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Freeze a row in the sheet.
    xlObj.XLFreeze.freezeRows(2);

    } 
 }

XLFreeze.freezeTopRow()

This method is used to freeze the top row in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Freeze the top row in the sheet.
    xlObj.XLFreeze.freezeTopRow();

    } 
 }

unfreezePanes()

This method is used to unfreeze the frozen rows and columns in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To unfreeze the frozen rows and columns in the sheet.
    xlObj.XLFreeze.unfreezePanes();

    } 
 }

XLPivot

XLPivot.clearPivotFieldList(pivotName)

This property is used to clear the pivot table list in Spreadsheet.

Name	Type	Description
pivotName	string	Pass the name of the pivot table.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLPivot.clearPivotFieldList("name"); // Sends a clear pivot field list request to the Spreadsheet.

    } 
 }

XLPivot.createPivotTable(range,location,name,settings,pvt)

This method is used to create pivot table.

Name	Type	Description
range	string	It specifies the range for which the pivot table is created.
location	string	It specifies the location in which the pivot table is created.
name	string	It specifies the name of the pivot table.
settings	Object	Pass the pivot table settings.
pvt	Object	Pass the pivot range, sheet index, address and data source .

Returns:

string

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // create a pivot table in the sheet.
    let settings = {
                 rows: [ {fieldName: "Country",},{fieldName: "State",}],
                 columns: [{fieldName: "Product",}],
                 values: [{fieldName: "Amount", },{fieldName: "Quantity", } ],
                 filters: [ {fieldName: "Date", }] };
    xlObj.XLPivot.createPivotTable("Sheet1!$A$1:$F$25","Sheet1!$A$1", null, settings);

    } 
 }

XLPivot.deletePivotTable(pivotName)

This method is used to delete the pivot table which is selected.

Name	Type	Description
pivotName	string	Pass the name of the pivot table.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Delete pivot table in the sheet.
    xlObj.XLPivot.deletePivotTable("name");

    } 
 }

XLPivot.refreshDataSource(name, sheetIdx)

This method is used to refresh data in pivot table.

Name	Type	Description
name	string	Optional. Pass the name of the pivot table.
sheetIdx	number	Optional. Pass the index of the sheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLPivot.refreshDataSource(); // Sends a refresh data source request to the Spreadsheet.

    } 
 }

XLPrint

XLPrint.printSelection()

This method is used to print the selected contents in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Print the selected area in the sheet.
    xlObj.XLPrint.printSelection();

    } 
 }

XLPrint.printSheet()

This method is used to print the entire contents in the active sheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //Sends a print entire sheet request to the Spreadsheet.
    xlObj.XLPrint.printSheet();

    } 
 }

XLResize

XLResize.fitHeight([rowIndexes])

This method is used to fit the height of rows in the Spreadsheet.

Name	Type	Description
rowIndexes	Array	Optional. Pass row index collection that you want to fit its height.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To fit the height of the rows in Spreadsheet.
    xlObj.XLResize.fitHeight([2,3,4,5])
    } 
 }

XLResize.fitWidth([colIndexes])

This method is used to fit the width of columns in the Spreadsheet.

Name	Type	Description
colIndexes	Array	Optional. Pass column index collection that you want to fit its width.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To fit the width of the columns in Spreadsheet.
    xlObj.XLResize.fitWidth([2,3,4,5])
    } 
 }

XLResize.getColWidth(colIdx)

This method is used to get the column width of the specified column index in the Spreadsheet.

Name	Type	Description
colIdx	number	Pass the column index.

Returns:

number

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Gets the particular column width in Spreadsheet.
    xlObj.XLResize.getColWidth(2);
    } 
 }

XLResize.getRowHeight(rowIdx)

This method is used to get the row height of the specified row index in the Spreadsheet.

Name	Type	Description
rowIdx	number	Pass the row index which you want to find its height.

Returns:

number

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Gets the particular row height in Spreadsheet.
    xlObj.XLResize.getRowHeight(2);
    } 
 }

XLResize.setColWidth(colIdx, size)

This method is used to set the column width of the specified column index in the Spreadsheet.

Name	Type	Description
colIdx	number	Pass the column index.
size	number	Pass the width value that you want to set.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Sets the column width in the Spreadsheet.
    xlObj.XLResize.setColWidth(2, 100);
    } 
 }

XLResize.setRowHeight(rowIdx, size)

This method is used to set the row height of the specified row index in the Spreadsheet.

Name	Type	Description
rowIdx	number	Pass the row index.
size	number	Pass the height value that you want to set.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // Sets the row height in Spreadsheet.
    xlObj.XLResize.setRowHeight(2, 100);
    } 
 }

XLRibbon

XLRibbon.addBackStageItem(pageItem, index)

This method is used to add a new item in the backstage.

Name	Type	Description
pageItem	Object	Specifies the item to be added in the backstage.
index	number	pass the index of the item to be added in the backstage.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let addBackStage = {   id: "File", text: "File", itemType: ej.Ribbon.ItemType.Tab};
    xlObj.XLRibbon.addBackStageItem(addBackStage, 1); // To add a item in the backstage.
    } 
 }

XLRibbon.addContextualTabs(contextualTabSet, index)

This method is used to dynamically add the contextual tabs in the ribbon.

Name	Type	Description
contextualTabSet	Object	Specifies the contextual tab set object.
index	number	pass the index of the contextual tab.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let cTab = { backgroundColor: "#FCFBEB", borderColor: "#F2CC1C", tabs: [{id: "Design", text: "DESIGN",groups: [{ text: "Table Style",type: "custom", contentID: "design" }]}] };
    xlObj.XLRibbon.addContextualTabs(cTab, 7); // To add a contextual tab in the ribbon.
    } 
 }

XLRibbon.addMenuItem(item, index)

This method is used to dynamically add the menu item in the file menu.

Name	Type	Description
item	Array	Specifies the item to be added
index	number	pass the index of the menu item.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.addMenuItem([{ id: "SignIn1", text: "AddMenuItem", parentId: "FILE", spriteCssClass: "e-icon e-ssr-cut" }], 2); // To add the menu item in the ribbon.
    } 
 }

XLRibbon.addNamedRange(name, refersTo, [comment], [sheetIdx])

This method is used to add a new name in the Spreadsheet name manager.

Name	Type	Description
name	string	Pass the name that you want to define in name manager.
refersTo	string	Pass the cell reference.
comment	string	Optional. Pass comment, if you want.
sheetIdx	number	Optional. Pass the sheet index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To define new name in the Spreadsheet.
    xlObj.XLRibbon.addNamedRange("PRICE_LIST", "=Sheet1!$A$2:$A$7", "Month_Wise");
    } 
 }

XLRibbon.addTab(tabText, ribbonGroups, index)

This method is used to dynamically add the tab in the ribbon.

Name	Type	Description
tabText	Array	Specifies the text to be displayed in the tab.
ribbonGroups	number	pass the groups to be displayed in the ribbon tab.
index	number	pass the index of the tab.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let tabGroup = [{ alignType: ej.Ribbon.AlignType.Rows, content: [{ groups: [{ id: "new", text: "New", toolTip: "New", 
                     buttonSettings: {
                                    contentType: ej.ContentType.ImageOnly,
                                    imagePosition: ej.ImagePosition.ImageTop,
                                    prefixIcon: "e-icon e-ssr-cut",
                                    click: "executeAction"
                                }}], defaults: { type: ej.Ribbon.Type.Button, width: 60, height: 70} }] }];
    xlObj.XLRibbon.addTab("Tab2", tabGroup, 2); // To add the tab in the ribbon.
    } 
 }

XLRibbon.addTabGroup(tabIndex, tabGroup, groupIndex)

This method is used to dynamically add the tab group in the ribbon.

Name	Type	Description
tabIndex	number	Specifies the ribbon tab index.
tabGroup	Object	pass the groups to be displayed in the ribbon tab.
groupIndex	number	pass the index of the ribbon group.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    let ribbonGrp = { text: "Cut", alignType: ej.Ribbon.AlignType.Rows, content: [{ groups: [{  id: "new",  text: "CUT",buttonSettings: {
                                    contentType: ej.ContentType.TextAndImage,
                                    imagePosition: ej.ImagePosition.ImageTop,
                                    prefixIcon: "e-icon e-ssr-cut",
                                    click: "executeAction"
                                } }], defaults: { type: ej.Ribbon.Type.Button,  width: 60, height: 70 } }] };
    xlObj.XLRibbon.addTabGroup(1, ribbonGrp, 0); // To add the tab group in the ribbon.
    } 
 }

XLRibbon.autoSum(type, range)

This method is used to insert the few type (SUM, MAX, MIN, AVG, COUNT) of formulas in the selected range of cells in the Spreadsheet.

Name	Type	Description
type	string	To pass the type("SUM","MAX","MIN","AVG","COUNT").
range	string\|Array	If range is specified, it will apply auto sum for the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.autoSum("SUM", "A2:A6"); // To insert the formula after selected range of cells in Spreadsheet.
    } 
 }

XLRibbon.changeDimension(options)

This method is used to change the dimensions for chart/picture.

Name	Type	Description
options	Object	Pass the id, width, height and shapeType.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To change chart/picture dimensions.
    xlObj.XLRibbon.changeDimension({id:"Spreadsheet_chart1" , width: 330, height: 500, shapeType: "chart"}); 
    } 
 }

XLRibbon.disableRibbonItems([idCollection])

This method is used to disable ribbon items in the Spreadsheet.

Name	Type	Description
idCollection	Array	Pass the id's of the ribbon items.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.disableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]); // To disable ribbon items.
    } 
 }

XLRibbon.enableRibbonItems([idCollection])

This method is used to enable ribbon items in the Spreadsheet.

Name	Type	Description
idCollection	Array	Pass the id's of the ribbon items.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.enableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]); // To enable ribbon items.
    } 
 }

XLRibbon.hideMenu()

This method is used to hide the file menu in the ribbon tab.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.hideMenu(); // To hide the file menu option in the Spreadsheet.
    } 
 }

XLRibbon.removeBackStageItem(index)

This method is used to remove the item from the backstage in the spreadsheet.

Name	Type	Description
index	number	Specifies the index of the item to be removed from backstage.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.removeBackStageItem(2); // To remove the item in the backstage.
    } 
 }

XLRibbon.removeMenuItem(index)

This method is used to remove the menu item form file menu in spreadsheet.

Name	Type	Description
index	number	Specifies the index of the item to be removed from the file menu.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.removeMenuItem(2); // To remove the item in the file menu.
    } 
 }

XLRibbon.removeNamedRange(name)

This method is used to delete the defined name in the Spreadsheet name manager.

Name	Type	Description
name	string	Pass the defined name that you want to remove from name manager.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To remove the define name in Spreadsheet name manager.
    xlObj.XLRibbon.removeNamedRange("PRICE_LIST");
    } 
 }

XLRibbon.removeTab(index, isRemoveMenu)

This method is used to remove the tab form ribbon in the spreadsheet.

Name	Type	Description
index	number	Specifies the index of the tab to be removed from the ribbon.
isRemoveMenu	boolean	pass the boolean value to remove the tab from ribbon

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.removeTab(2, true) // To remove the tab from the ribbon.
    } 
 }

XLRibbon.removeTabGroup(tabIndex, groupText)

This method is used to remove the tab group form ribbon in the spreadsheet.

Name	Type	Description
tabIndex	number	Specifies the index of the tab group to be removed from the ribbon.
groupText	string	Specifies the text to be displayed in the tab group

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
   xlObj.XLRibbon.removeTabGroup(1,"Clipboard"); // To remove the tab group from the ribbon.
    } 
 }

XLRibbon.showMenu()

This method is used to show the file menu in the ribbon tab.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.showMenu(); // To show the file menu option in the Spreadsheet.
    } 
 }

XLRibbon.updateMenuItem(item, index)

This method is used to update the menu item in the file menu.

Name	Type	Description
item	Object	Specifies the menu item to be updated in the ribbon
index	number	pass the index of the item to be updated

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLRibbon.updateMenuItem([{ id: "SignIn1", text: "AddMenuItem", parentId: "FILE", spriteCssClass: "e-icon e-ssr-cut"}], 3); // To update the menu item in the file menu
    } 
 }

XLRibbon.updateRibbonIcons()

This method is used to update the ribbon icons in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To update the ribbon icons in the spreadsheet based on the active sheet index.
    xlObj.XLRibbon.updateRibbonIcons();
    } 
 }

XLScroll

XLScroll.scrollToCell(cellAddr)

This method is used to scroll the sheet content to the specified cell address in the Spreadsheet.

Name	Type	Description
range	string	Pass the cell address that you want to scroll to it.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To scroll the sheet to the specified cell address.
    xlObj.XLScroll.scrollToCell("A30");
    } 
 }

XLSearch

XLSearch.findNext(value, options, sIndex)

This method is used to find the next occurrence of given value in the sheet/workbook.

Name	Type	Description
value	string	Pass the value to search.
options	Object	Pass the options to perform search operation.
sIndex	number	Pass the sheet index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To find the next occurrence of given value.
    xlObj.XLSearch.findNext("g", {isCSen: false, isEMatch: false, type: "value", mode: "sheet", searchBy: "rows"}, 1); 
    } 
 }

XLSearch.findPrevious(value, options, sIndex)

This method is used to find the previous occurrence of given value in the sheet/workbook.

Name	Type	Description
value	string	Pass the value to search.
options	Object	Pass the options to perform search operation.
sIndex	number	Pass the sheet index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To find the previous occurrence of given value.
    xlObj.XLSearch.findPrevious("g", {isCSen: true, isEMatch: false, type: "value", mode: "sheet", searchBy: "columns"}, 1);
    } 
 }

XLSearch.goTo(range)

This method is used to perform goto operation in the Spreadsheet.

Name	Type	Description
range	string	Pass the range to perform goto operation.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSearch.goTo("L4"); // To perform goto operation.
    } 
 }

XLSearch.goToSpecial(type, options)

This method is used to perform goto special operation in the Spreadsheet.

Name	Type	Description
type	string	Pass the type of the cell.
options	Object	Pass the options to perform goto special.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To perform goto special operation.
    xlObj.XLSearch.goToSpecial("comments",{isNumber:true, isText:true, isLogical:true, isError: true}); 
    } 
 }

XLSearch.replaceAllByBook(findData, replaceData, isCSen, isEMatch)

This method is used to find and replace all data by workbook in the Spreadsheet.

Name	Type	Description
findData	string	Pass the search data.
replaceData	string	Pass the replace data.
isCSen	boolean	Pass `true` , if you want to match with case-sensitive.
isEMatch	boolean	Pass `true` , if you want to match with entire cell contents.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSearch.replaceAllByBook("Sheet", "Spreadsheet", true, false); // Sends a replace all by workbook request to the Spreadsheet. 
    } 
 }

XLSearch.replaceAllBySheet(findData, replaceData, isCSen, isEMatch)

This method is used to find and replace all data by sheet in Spreadsheet.

Name	Type	Description
findData	string	Pass the search data.
replaceData	string	Pass the replace data.
isCSen	boolean	Pass `true` , if you want to match with case-sensitive.
isEMatch	boolean	Pass `true` , if you want to match with entire cell contents.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSearch.replaceAllBySheet("Sheet", "Spreadsheet", true, false); // Sends a replace all by sheet request to Spreadsheet
    } 
 }

XLSelection

XLSelection.clearAll()

This method is used to clear the selection of the active sheet in the Spreadsheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSelection.clearAll(); // To clear selection.
    } 
 }

XLSelection.getSelectedCells(sheetIdx)

This method is used to get the selected cells element based on specified sheet index in the Spreadsheet.

Name	Type	Description
sheetIdx	number	Pass the sheet index to get the cells element.

Returns:

Element

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSelection.getSelectedCells(1); //Gets the selected cells element.
    } 
 }

XLSelection.refreshSelection([range])

This method is used to refresh the selection in the Spreadsheet.

Name	Type	Description
range	Array\|string	Optional. Pass range to refresh selection.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To defined refresh selection in Spreadsheet.
    xlObj.XLSelection.refreshSelection("A1:D3");
    } 
 }

XLSelection.selectColumn(colIdx)

This method is used to select a single column in the Spreadsheet.

Name	Type	Description
colIdx	number	Pass the column index value.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSelection.selectColumn(1); //To select a single column in the active sheet.
    } 
 }

XLSelection.selectColumns(startIdx, endIdx)

This method is used to select entire columns in a specified range (start index and end index) in the Spreadsheet.

Name	Type	Description
startIdx	number	Pass the column start index.
endIdx	number	Pass the column end index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSelection.XLSelection.selectColumns(2, 4); //To select entire columns in the specified range.
    } 
 }

XLSelection.selectRange(range)

This method is used to select the specified range of cells in the Spreadsheet.

Name	Type	Description
range	string	Pass range which want to select.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSelection.selectRange("A1:B2"); //To select range of cells in Spreadsheet.
    } 
 }

XLSelection.selectRow(rowIdx)

This method is used to select a single row in the Spreadsheet.

Name	Type	Description
rowIdx	number	Pass the row index value.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSelection.selectRow(1); //To select a single row in the specified sheet index in Spreadsheet.
    } 
 }

XLSelection.selectRows(startIdx, endIdx)

This method is used to select entire rows in a specified range (start index and end index) in the Spreadsheet.

Name	Type	Description
startIdx	number	Pass the start row index.
endIdx	number	Pass the end row index.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSelection.selectRows(2, 4); //To select entire rows in the specified range.
    } 
 }

XLSelection.selectSheet()

This method is used to select all cells in active sheet.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLSelection.selectSheet(); //To select all cells in a sheet
    } 
 }

XLShape

XLShape.changePicture(pictureId, url)

This method is used to change the picture.

Name	Type	Description
pictureId	string	Pass the id of the picture.
url	string	Pass the relative path of the picture.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLShape.changePicture('Spreadsheet_picture1', "image.png"); // To change the picture.
    } 
 }

XLShape.changePictureBorder(pictureId, width, style, color)

This method is used to change the border of the picture.

Name	Type	Description
pictureId	string	Pass the id of the picture.
width	string	Pass the width of the border.
style	string	Pass the style of the border.
color	string	Pass the color of the border.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To change the border of the picture.
    xlObj.XLShape.changePictureBorder("Spreadsheet_picture1", "1px", "solid", "#89c987"); 
    } 
 }

XLShape.resetPicture(pictureId, action)

This method is used to reset the picture.

Name	Type	Description
pictureId	string	Pass the id of the picture.
action	string	Pass the type of action.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLShape.resetPicture(pictureId, "resetSize"); // To reset the picture. 
    } 
 }

XLShape.setPicture(range, url, width, height, top, left)

This method is used to set a picture in the Spreadsheet.

Name	Type	Description
range	string	Pass the range of the cell.
url	string	Pass the path of the specified image.
width	number	Optional. Pass the width of the image that you want to set.
height	number	Optional. Pass the height of the image that you want to set.
top	number	Optional. Pass the top of the image that you want to set.
left	number	Optional. Pass the left of the image that you want to set.

Returns:

string

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //To set the picture in the Spreadsheet.  
    xlObj.XLShape.setPicture('D4', "../images/spreadsheet/ladybug.png", 538, 319);
    } 
 }

XLSort

XLSort.sortByColor(operation, color, range)

This method is used to sort a particular range of cells based on its cell or font color in the Spreadsheet.

Name Type Description

operation

string

Pass

PutCellColor

to sort by cell color or

PutFontColor

for sort by font color.

color Object Pass the HEX color code to sort.

range string Pass the range

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //To sort range based on cell color in the Spreadsheet.
    xlObj.XLSort.sortByColor("PutCellColor", {"background-color" : "#EC2024", color:  "#6N2N2N"}, "D2:D8");
    } 
 }

XLSort.sortByRange(range, columnName, direction)

This method is used to sort a particular range of cells based on its values in the Spreadsheet.

Name	Type	Description
range	Array\|string	Pass the range to sort.
columnName	string	Pass the column name.
direction	Object	Pass the direction to sort (ascending or descending).

Returns:

boolean

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    //To sort the cell value in a specified range in the Spreadsheet.
    xlObj.XLSort.sortByRange("A1:D3", "B",  "ascending"); 
    } 
 }

XLValidate

XLValidate.applyDVRules(range, values, type, required, showErrorAlert)

This method is used to apply data validation rules in a selected range of cells based on the defined condition in the Spreadsheet.

Name	Type	Description
range	string\|Array	If range is specified, it will apply rules for the specified range else it will use the current selected range.
values	Array	Pass the validation condition, value1 and value2.
type	string	Pass the data type.
required	boolean	Pass `true` if you ignore blank values.
showErrorAlert	boolean	Pass `true` if you want to show an error alert.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To apply validation rule to allow whole number between 15 and 20.
    xlObj.XLValidate.applyDVRules("A1:D3", ["Between", "15", "20"], "number" ,true, true); 
    } 
 }

XLValidate.clearDV([range])

This method is used to clear the applied validation rules in a specified range of cells in the Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. If range is specified, it will clear rules for the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To clear validation rules in selected cells.
    xlObj.XLValidate.clearDV("A2:A7"); 
    } 
 }

XLValidate.clearHighlightedValData(range)

This method is used to clear invalid data highlights in the given range.

Name	Type	Description
range	string	Pass the range to clear highlights.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    xlObj.XLValidate.clearHighlightedValData("A1:K15"); // To clear highlighted data.
    } 
 }

XLValidate.highlightInvalidData([range])

This method is used to highlight invalid data in a specified range of cells in the Spreadsheet.

Name	Type	Description
range	string\|Array	Optional. If range is specified, it will clear rules for the specified range else it will use the current selected range.

Example

HTML

<ej-spreadsheet id="spreadsheet"></ej-spreadsheet>

export class AppComponent {

ngAfterViewInit(){
    
    let xlObj = $("#spreadsheet").data("ejSpreadsheet");
    // To highlight invalid cell data
    xlObj.XLValidate.highlightInvalidData("A2:A7");
    } 
 }

Events

actionBegin

Triggered for every action before its starts.

Name

Type

Description

argument

Object

Arguments when actionBegin event is triggered.

Name	Type	Description
afterFormat	Object	Returns the applied style format object.
beforeFormat	Object	Returns the applied style format object.
sheetIdx	number	Returns the sheet index.
range	Array	Returns the cell range.
reqType	string	Returns the action format.
gotoIdx	number	Returns goto index while paging.
newSheet	boolean	Returns boolean value. If create new sheet it returns true.
columnName	string	Return column name while sorting.
colSelected	number	Returns selected columns while sorting or filtering begins.
sortDirection	string	Returns sort direction while sort action begins.

Example

HTML

<ej-spreadsheet id="spreadsheet" (actionBegin)= onActionBegin($event)>
    </ej-spreadsheet>

export class AppComponent {
        onActionBegin(e: any){ 
             //Do Something...
       }
    }

actionComplete

Triggered for every action complete.

Name

Type

Description

argument

Object

Arguments when actionComplete event is triggered.

Name	Type	Description
model	Object	Returns Spreadsheet model.
selectedCell	Array\|Object	Returns the applied cell format object.
sheetIdx	number	Returns the sheet index.
reqType	string	Returns the request type.
cancel	boolean	Returns the cancel option value.
type	string	Returns the name of the event.

Example

HTML

<ej-spreadsheet id="spreadsheet" (actionComplete)= onActionComplete($event)>
    </ej-spreadsheet>

export class AppComponent {
        onActionComplete(e: any){ 
             //Do Something...
       }
    }

autoFillBegin

Triggered when the auto fill operation begins.

Name

Type

Description

argument

Object

Arguments when autoFillBegin event is triggered.

Name	Type	Description
dataRange	Array	Returns auto fill begin cell range.
direction	string	Returns which direction drag the auto fill.
fillRange	Array	Returns fill cells range.
fillType	string	Returns the auto fill type.
sheetIdx	number	Returns the sheet index.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (autoFillBegin)= onAutoFillBegin($event)>
    </ej-spreadsheet>

export class AppComponent {
        onAutoFillBegin(e: any){ 
             //Do Something...
       }
    }

autoFillComplete

Triggered when the auto fill operation completes.

Name

Type

Description

argument

Object

Arguments when autoFillComplete event is triggered.

Name	Type	Description
dataRange	Array	Returns auto fill begin cell range.
direction	string	Returns which direction to drag the auto fill.
fillRange	Array	Returns fill cells range.
fillType	string	Returns the auto fill type.
sheetIdx	number	Returns the sheet index.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (autoFillComplete)= onAutoFillComplete($event)>
    </ej-spreadsheet>

export class AppComponent {
        onAutoFillComplete(e: any){ 
             //Do Something...
       }
    }

beforeBatchSave

Triggered before the batch save.

Name

Type

Description

argument

Object

Arguments when beforeBatchSave event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
dataSetting	Object	Returns the query, primary key,batch changes for the data Source.
batchChanges	Object	Returns the changed record object.

Example

HTML

<ej-spreadsheet id="spreadsheet" (beforeBatchSave)= onBeforeBatchSave($event)>
    </ej-spreadsheet>

export class AppComponent {
        onBeforeBatchSave(e: any){ 
             //Do Something...
       }
    }

beforeCellFormat

Triggered before the cells to be formatted.

Name

Type

Description

argument

Object

Arguments when beforeCellFormat event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
format	Object	Returns the applied style format object.
cells	Array\|Object	Returns the selected cells.
model	Object	Returns the Spreadsheet model.
cancel	boolean	Returns the cancel option value.
type	string	Returns the name of the event.

Example

HTML

<ej-spreadsheet id="spreadsheet" (beforeCellFormat)= onBeforeCellFormat($event)>
    </ej-spreadsheet>

export class AppComponent {
        onBeforeCellFormat(e: any){ 
             //Do Something...
       }
    }

beforeCellSelect

Triggered before the cell selection.

Name

Type

Description

argument

Object

Arguments when beforeCellSelect event is triggered.

Name	Type	Description
prevRange	Array	Returns the previous cell range.
currRange	Array	Returns the current cell range.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (beforeCellSelect)= onBeforeCellSelect($event)>
    </ej-spreadsheet>

export class AppComponent {
        onBeforeCellSelect(e: any){ 
             //Do Something...
       }
    }

beforeDrop

Triggered before the selected cells are dropped.

Name

Type

Description

argument

Object

Arguments when beforeDrop event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
currentCell	Object	Returns the current cell row and column index.
dragAndDropRange	Object	Returns the drag cells range object.
preventAlert	boolean	Returns the cell Overwriting alert option value.
model	Object	Returns the Spreadsheet model.
target	Element	Returns the target item.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (beforeDrop)= onBeforeDrop($event)>
    </ej-spreadsheet>

export class AppComponent {
        onBeforeDrop(e: any){ 
             //Do Something...
       }
    }

beforeEditComment

Triggered while start to edit the comment.

Name

Type

Description

argument

Object

Arguments when beforeEditComment event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
cellIndex	Object	Returns the comment cell index.
disable	boolean	Returns the disable option value.
model	Object	Returns the Spreadsheet model.
value	string	Returns the value of the comment
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (beforeEditComment)= onBeforeEditComment($event)>
    </ej-spreadsheet>

export class AppComponent {
        onBeforeEditComment(e: any){ 
             //Do Something...
       }
    }

beforeOpen

Triggered before the context menu is open.

Name

Type

Description

argument

Object

Arguments when beforeOpen event is triggered.

Name	Type	Description
target	Element	Returns the target element.
type	string	Returns the name of the event.
model	Object	Returns the Spreadsheet model.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (beforeOpen)= onBeforeOpen($event)>
    </ej-spreadsheet>

export class AppComponent {
        onBeforeOpen(e: any){ 
             //Do Something...
       }
    }

beforePanelOpen

Triggered before the activation panel is open.

Name

Type

Description

argument

Object

Arguments when beforePanelOpen event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
activationPanel	Object	Returns the activation panel element.
range	Object	Returns the range option value.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (beforePanelOpen)= onBeforePanelOpen($event)>
    </ej-spreadsheet>

export class AppComponent {
        onBeforePanelOpen(e: any){ 
             //Do Something...
       }
    }

cellClick

Triggered when click on sheet cell.

Name

Type

Description

argument

Object

Arguments when cellClick event is triggered.

Name	Type	Description
cell	Element	Returns the click cell element.
columnIndex	number	Returns the column index of clicked cell.
rowIndex	number	Returns the row index of clicked cell.
columnName	string	Returns the column name of clicked cell.
columnObject	Object	Returns the column information.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
target	Element	Returns the target element.
value	string	Returns the value of the cell.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (cellClick)= onCellClick($event)>
    </ej-spreadsheet>

export class AppComponent {
        onCellClick(e: any){ 
             //Do Something...
       }
    }

cellEdit

Triggered when the cell is edited.

Name

Type

Description

argument

Object

Arguments when cellEdit event is triggered.

Name	Type	Description
cell	Element	Returns the click cell element.
columnName	string	Returns the columnName of clicked cell.
columnObject	Object	Returns the column field information.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
target	Element	Returns the target element.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (cellEdit)= onCellEdit($event)>
    </ej-spreadsheet>

export class AppComponent {
        onCellEdit(e: any){ 
             //Do Something...
       }
    }

cellFormatting

Triggered while cell is formatting.

Name

Type

Description

argument

Object

Arguments when cellFormatting event is triggered.

Name	Type	Description
SheetIdx	number	Returns the sheet index
Format	Object	Returns the applied style format object
Cell	number	Returns the cell index.
cssClass	string	Returns the name of the CSS theme.
type	string	Returns the name of the event.
target	Element	Returns the target element.
model	Object	Returns the Spreadsheet model.

Example

HTML

<ej-spreadsheet id="spreadsheet" (cellFormatting)= onCellFormatting($event)>
    </ej-spreadsheet>

export class AppComponent {
        onCellFormatting(e: any){ 
             //Do Something...
       }
    }

cellHover

Triggered when mouse hover on cell in sheets.

Name

Type

Description

argument

Object

Arguments when cellHover event is triggered.

Name	Type	Description
target	Element	Returns the target element.
type	string	Returns the name of the event.
model	Object	Returns the Spreadsheet model.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (cellHover)= onCellHover($event)>
    </ej-spreadsheet>

export class AppComponent {
        onCellHover(e: any){ 
             //Do Something...
       }
    }

cellSave

Triggered when save the edited cell.

Name

Type

Description

argument

Object

Arguments when cellSave event is triggered.

Name	Type	Description
cell	Element	Returns the save cell element.
columnName	string	Returns the columnName of clicked cell.
columnObject	Object	Returns the column field information.
rowIndex	number	Returns the index of the row.
colIndex	number	Returns the index of the column.
model	Object	Returns the Spreadsheet model.
pValue	string	Returns the cell previous value.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.
target	Element	Returns the target element.
value	string	Returns the cell value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (cellSave)= onCellSave($event)>
    </ej-spreadsheet>

export class AppComponent {
        onCellSave(e: any){ 
             //Do Something...
       }
    }

cellSelected

Triggered when the cell is selected.

Name

Type

Description

argument

Object

Arguments when cellSelected event is triggered.

Name	Type	Description
sheetIdx	number	Returns the active sheet index.
selectedRange	Array	Returns the selected range.
target	Element	Returns the target element.
model	Object	Returns Spreadsheet model.
type	string	Returns the name of the event.
target	Element	Returns the target element.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (cellSelected)= onCellSelected($event)>
    </ej-spreadsheet>

export class AppComponent {
        onCellSelected(e: any){ 
             //Do Something...
       }
    }

contextMenuClick

Triggered when click the context menu items.

Name

Type

Description

argument

Object

Arguments when contextMenuClick event is triggered.

Name	Type	Description
Id	string	Returns target element Id.
element	Element	Returns the target element.
event	Object	Returns event information.
events	Object	Returns target element and event information.
model	Object	Returns the Spreadsheet model.
parentId	string	Returns target element parent Id.
parentText	string	Returns target element parent text.
text	string	Returns target element text.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (contextMenuClick)= onContextMenuClick($event)>
    </ej-spreadsheet>

export class AppComponent {
        onContextMenuClick(e: any){ 
             //Do Something...
       }
    }

drag

Triggered when the selected cells are being dragged.

Name

Type

Description

argument

Object

Arguments when drag event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
currentCell	Object	Returns the current cell row and column index.
dragAndDropRange	Object	Returns the drag cells range object.
model	Object	Returns the Spreadsheet model.
target	Element	Returns the target item.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (drag)= onDrag($event)>
    </ej-spreadsheet>

export class AppComponent {
        onDrag(e: any){ 
             //Do Something...
       }
    }

dragShape

Triggered when you start to drag the picture or chart.

Name

Type

Description

argument

Object

Arguments when dragShape event is triggered.

Name	Type	Description
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
target	element	Returns the target element.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (dragShape)= onDragShape($event)>
    </ej-spreadsheet>

export class AppComponent {
        onDragShape(e: any){ 
             //Do Something...
       }
    }

dragStart

Triggered when the selected cells are initiated to drag.

Name

Type

Description

argument

Object

Arguments when dragStart event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
currentCell	Object	Returns the current cell row and column index.
dragAndDropRange	Object	Returns the drag cells range object.
model	Object	Returns the Spreadsheet model.
target	Element	Returns the target item.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (dragStart)= onDragStart($event)>
    </ej-spreadsheet>

export class AppComponent {
        onDragStart(e: any){ 
             //Do Something...
       }
    }

drop

Triggered when the selected cells are dropped.

Name

Type

Description

argument

Object

Arguments when drop event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
currentCell	Object	Returns the current cell row and column index.
dragAndDropRange	Object	Returns the drag cells range object.
model	Object	Returns the Spreadsheet model.
target	Element	Returns the target item.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (drop)= onDrop($event)>
    </ej-spreadsheet>

export class AppComponent {
        onDrop(e: any){ 
             //Do Something...
       }
    }

editRangeBegin

Triggered before the range editing starts.

Name

Type

Description

argument

Object

Arguments when editRangeBegin event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
model	Object	Returns the Spreadsheet model.
range	Object	Returns the range option value.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (editRangeBegin)= onEditRangeBegin($event)>
    </ej-spreadsheet>

export class AppComponent {
        onEditRangeBegin(e: any){ 
             //Do Something...
       }
    }

editRangeComplete

Triggered after range editing completes.

Name

Type

Description

argument

Object

Arguments when editRangeComplete event is triggered.

Name	Type	Description
sheetIdx	number	Returns the sheet index.
model	Object	Returns the Spreadsheet model.
range	Object	Returns the range option value.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (editRangeComplete)= onEditRangeComplete($event)>
    </ej-spreadsheet>

export class AppComponent {
        onEditRangeComplete(e: any){ 
             //Do Something...
       }
    }

keyDown

Triggered when the key is pressed down.

Name

Type

Description

argument

Object

Arguments when keyDown event is triggered.

Name	Type	Description
sheetIndex	number	Returns the sheet index.
model	Object	Returns the Spreadsheet model.
isCommentEdit	boolean	Returns the boolean value.
isEdit	boolean	Returns the boolean value.
isSheetRename	boolean	Returns the boolean value.
target	Element	Returns the target element.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (keyDown)= onKeyDown($event)>
    </ej-spreadsheet>

export class AppComponent {
        onKeyDown(e: any){ 
             //Do Something...
       }
    }

keyUp

Triggered when the key is released.

Name

Type

Description

argument

Object

Arguments when keyUp event is triggered.

Name	Type	Description
sheetIndex	number	Returns the sheet index.
model	Object	Returns the Spreadsheet model.
isCommentEdit	boolean	Returns the boolean value.
isEdit	boolean	Returns the boolean value.
isSheetRename	boolean	Returns the boolean value.
target	Element	Returns the target element.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (keyUp)= onKeyUp($event)>
    </ej-spreadsheet>

export class AppComponent {
        onKeyUp(e: any){ 
             //Do Something...
       }
    }

load

Triggered before the sheet is loaded.

Name

Type

Description

argument

Object

Arguments when load event is triggered.

Name	Type	Description
type	string	Returns the name of the event.
model	Object	Returns the Spreadsheet model.
cancel	boolean	Returns the cancel option value.
sheetIndex	number	Returns the active sheet index.

Example

HTML

<ej-spreadsheet id="spreadsheet" (load)= onLoad($event)>
    </ej-spreadsheet>

export class AppComponent {
        onLoad(e: any){ 
             //Do Something...
       }
    }

loadComplete

Triggered after the sheet is loaded.

Name

Type

Description

argument

Object

Arguments when loadComplete event is triggered.

Name	Type	Description
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (loadComplete)= onLoadComplete($event)>
    </ej-spreadsheet>

export class AppComponent {
        onLoadComplete(e: any){ 
             //Do Something...
       }
    }

menuClick

Triggered every click of the menu item.

Name

Type

Description

argument

Object

Arguments when menuClick event is triggered.

Name	Type	Description
element	Element	Returns menu click element.
event	Object	Returns the event information.
model	Object	Returns the Spreadsheet model.
parentId	string	Returns target element parent Id.
parentText	string	Returns target element parent text.
text	string	Returns target element text.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (menuClick)= onMenuClick($event)>
    </ej-spreadsheet>

export class AppComponent {
        onMenuClick(e: any){ 
             //Do Something...
       }
    }

onImport

Triggered when a file is imported.

Name

Type

Description

argument

Object

Arguments when onImport event is triggered.

Name	Type	Description
type	string	Returns the name of the event.
model	Object	Returns the Spreadsheet model.
cancel	boolean	Returns the cancel option value.
importData	Object	Returns the imported data.

Example

HTML

<ej-spreadsheet id="spreadsheet" (onImport)= onImport($event)>
    </ej-spreadsheet>

export class AppComponent {
        onImport(e: any){ 
             //Do Something...
       }
    }

openFailure

Triggered when import sheet is failed to open.

Name

Type

Description

argument

Object

Arguments when openFailure event is triggered.

Name	Type	Description
failureType	string	Returns the failure type.
status	number	Returns the status index.
statusText	string	Returns the status in text.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (openFailure)= onOpenFailure($event)>
    </ej-spreadsheet>

export class AppComponent {
        onOpenFailure(e: any){ 
             //Do Something...
       }
    }

pagerClick

Triggered when pager item is clicked in the Spreadsheet.

Name

Type

Description

argument

Object

Arguments when pagerClick event is triggered.

Name	Type	Description
activeSheet	number	Returns the active sheet index.
gotoSheet	number	Returns the new sheet index.
newSheet	boolean	Returns whether new sheet icon is clicked.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
target	Element	Returns the target element.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (pagerClick)= onPagerClick($event)>
    </ej-spreadsheet>

export class AppComponent {
        onPagerClick(e: any){ 
             //Do Something...
       }
    }

resizeStart

Triggered when you start resizing the chart, picture, row and column.

Name

Type

Description

argument

Object

Arguments when resizeStart event is triggered.

Name	Type	Description
colIndex	number	Returns the column index which column you start to resize.
rowIndex	number	Returns the row index which row you start to resize.
model	Object	Returns the Spreadsheet model.
reqType	string	Returns type of the request.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (resizeStart)= onResizeStart($event)>
    </ej-spreadsheet>

export class AppComponent {
        onResizeStart(e: any){ 
             //Do Something...
       }
    }

resizeEnd

Triggered after end of resizing the chart, picture, row and column.

Name

Type

Description

argument

Object

Arguments when resizeEnd event is triggered.

Name	Type	Description
colIndex	number	Returns the column index which you resized.
oldWidth	number	Returns old width of the column or shape.
newWidth	number	Returns new width of the column or shape.
rowIndex	number	Returns the row index which you resized.
oldHeight	number	Returns old height of the row or shape.
newHeight	number	Returns new height of the row or shape.
model	Object	Returns the Spreadsheet model.
reqType	string	Returns type of the request.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (resizeEnd)= onResizeEnd($event)>
    </ej-spreadsheet>

export class AppComponent {
        onResizeEnd(e: any){ 
             //Do Something...
       }
    }

ribbonClick

Triggered when click on the ribbon.

Name

Type

Description

argument

Object

Arguments when ribbonClick event is triggered.

Name	Type	Description
Id	string	Returns element Id.
prop	Object	Returns target information.
model	Object	Returns the Spreadsheet model.
status	boolean	Returns status.
isChecked	boolean	Returns isChecked in boolean.
type	string	Returns the name of the event.
target	Element	Returns the target element.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (ribbonClick)= onRibbonClick($event)>
    </ej-spreadsheet>

export class AppComponent {
        onRibbonClick(e: any){ 
             //Do Something...
       }
    }

seriesRendering

Triggered when the chart series rendering.

Name

Type

Description

argument

Object

Arguments when seriesRendering event is triggered.

Name	Type	Description
data	Object	Returns chart data and chart information.
model	Object	Returns the chart model.
type	string	Returns the name of the event.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (seriesRendering)= onSeriesRendering($event)>
    </ej-spreadsheet>

export class AppComponent {
        onSeriesRendering(e: any){ 
             //Do Something...
       }
    }

tabClick

Triggered when click the ribbon tab.

Name

Type

Description

argument

Object

Arguments when tabClick event is triggered.

Name	Type	Description
activeIndex	number	Returns the active tab index.
activeHeader	Object	Returns active tab header element.
prevActiveHeader	Object	Returns previous active tab header element.
prevActiveIndex	number	Returns previous active tab index.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
target	Element	Returns the target element.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (tabClick)= onTabClick($event)>
    </ej-spreadsheet>

export class AppComponent {
        onTabClick(e: any){ 
             //Do Something...
       }
    }

tabSelect

Triggered when select the ribbon tab.

Name

Type

Description

argument

Object

Arguments when tabSelect event is triggered.

Name	Type	Description
activeIndex	number	Returns the active tab index.
activeHeader	Object	Returns active tab header element.
prevActiveHeader	Object	Returns previous active tab header element.
prevActiveIndex	number	Returns previous active tab index.
model	Object	Returns the Spreadsheet model.
type	string	Returns the name of the event.
target	Element	Returns the target element.
cancel	boolean	Returns the cancel option value.

Example

HTML

<ej-spreadsheet id="spreadsheet" (tabSelect)= onTabSelect($event)>
    </ej-spreadsheet>

export class AppComponent {
        onTabSelect(e: any){ 
             //Do Something...
       }
    }

ejSpreadsheet

Example

Requires

Members

activeSheetIndex number

Default Value

Example

allowAutoCellType boolean

Default Value

Example

allowAutoFill boolean

Default Value

Example

allowAutoSum boolean

Default Value

Example

allowCellFormatting boolean

Default Value

Example

allowCellType boolean

Default Value

Example

allowCharts boolean

Default Value

Example

allowClear boolean

Default Value

Example

allowClipboard boolean

Default Value

Example

allowComments boolean

Default Value

Example

allowConditionalFormats boolean

Default Value

Example

allowDataValidation boolean

Default Value

Example

allowDelete boolean

Default Value

Example

allowDragAndDrop boolean

Default Value

Example

allowEditing boolean

Default Value

Example

allowFiltering boolean

Default Value

Example

allowFormatAsTable boolean

Default Value

Example

allowFormatPainter boolean

Default Value

Example

allowFormulaBar boolean

Default Value

Example

allowFreezing boolean

Default Value

Example

allowHyperlink boolean

Default Value

Example

allowImport boolean

Default Value

Example

allowInsert boolean

Default Value

Example

allowKeyboardNavigation boolean

Default Value

Example

allowLockCell boolean

Default Value

Example

allowMerging boolean

activeSheetIndex `number`

allowAutoCellType `boolean`

allowAutoFill `boolean`

allowAutoSum `boolean`

allowCellFormatting `boolean`

allowCellType `boolean`

allowCharts `boolean`

allowClear `boolean`

allowClipboard `boolean`

allowComments `boolean`

allowConditionalFormats `boolean`

allowDataValidation `boolean`

allowDelete `boolean`

allowDragAndDrop `boolean`

allowEditing `boolean`

allowFiltering `boolean`

allowFormatAsTable `boolean`

allowFormatPainter `boolean`

allowFormulaBar `boolean`

allowFreezing `boolean`

allowHyperlink `boolean`

allowImport `boolean`

allowInsert `boolean`

allowKeyboardNavigation `boolean`

allowLockCell `boolean`

allowMerging `boolean`

allowOverflow `boolean`

allowResizing `boolean`

allowSearching `boolean`

allowSelection `boolean`

allowSorting `boolean`

allowUndoRedo `boolean`

allowWrap `boolean`

apWidth `number`

autoFillSettings `Object`

autoFillSettings.fillType `enum`

autoFillSettings.showFillOptions `boolean`

chartSettings `Object`

chartSettings.height `number`

chartSettings.width `number`

columnCount `number`

columnWidth `number`

cssClass `string`

customFormulas `Array`

enableContextMenu `boolean`

enablePivotTable `boolean`

enableTouch `boolean`

exportSettings `Object`

exportSettings.allowExporting `boolean`

exportSettings.csvUrl `string`

exportSettings.excelUrl `string`