ejSpreadsheet

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>
  • ts
  • 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

    • 1

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheetCount]=5 [activeSheetIndex]=3>
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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 {
            //..
        }

    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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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

    • 300

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [apWidth]=100>
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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

    • 220

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [allowCharts]=true [chartSettings.height]=300>
        </ej-spreadsheet>
  • ts
  • 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

    • 440

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [allowCharts]=true [chartSettings.width]=500>
        </ej-spreadsheet>
  • ts
  • 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

    • 21

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [columnCount]=30>
        </ej-spreadsheet>
  • ts
  • 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

    • 64

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [columnWidth]=30>
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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

    • 220

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [pictureSettings]="pictureSettings">
        </ej-spreadsheet>
  • ts
  • 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

    • 440

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [pictureSettings]="pictureSettings">
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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

    • 20

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [rowCount]=30>
        </ej-spreadsheet>
  • ts
  • 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

    • 20

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [rowHeight]=30>
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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

    • 1

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheetCount]=5>
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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:

    • 21

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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:

    • 64

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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:

    • 0

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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:

    • 0

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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:

    • 20

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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:

    • 20

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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:

    • 2

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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" } }
                    ]
                }
             ]
          }];
       }
     }

    Specifies the hyperlink for a cell in Spreadsheet.

    Default Value:

    • null

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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" } }
                    ]
                }
            ]
          }];
       }
     }

    Specifies the web address for the hyperlink of a cell.

    Default Value:

    • ””

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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" } }
                    ]
                }
            ]
          }];
       }
     }

    Specifies the cell address for the hyperlink of a cell.

    Default Value:

    • ””

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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" } }
                    ]
                }
            ]
          }];
       }
     }

    Specifies the sheet index to which the cell is referred.

    NOTE

    User must give cellAddr to use this property.

    Default Value:

    • 1

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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:

    • 0

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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:

    • 0

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [sheets]="spreadData">
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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

    • 20

    Example

  • html
  • <ej-spreadsheet id="spreadsheet" [undoRedoStep]=15>
        </ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • export class AppComponent {
    
    ngAfterViewInit(){
        
        let xlObj = $("#spreadsheet").data("ejSpreadsheet");
        xlObj.getFrozenRows(1); // Gets the frozen row index in Spreadsheet.
           } 
         }

    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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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 string Optional. By default is

    true

    . If it is

    false

    locked cells are unlocked.

    Example

  • html
  • <ej-spreadsheet id="spreadsheet"></ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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 boolean Optional. By default is

    true

    . If it is

    false

    active sheet is unprotected.

    Example

  • html
  • <ej-spreadsheet id="spreadsheet"></ej-spreadsheet>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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.
           } 
         }

    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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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);
           } 
         }

    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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • export class AppComponent {
            onAutoFillBegin(e: any){ 
                 //Do Something...
           }
        }

    autoFillComplete

    Triggered when the auto fill operation completes.

    Name Type Description
    argument<