Essential JS Spreadsheet

13 May 202024 minutes to read

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

Syntax

  • JAVASCRIPT
  • $(element).ejSpreadsheet(options)
    Name Type Description
  • HTML
  • options
    Object Settings for Spreadsheet.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Create Spreadsheet
    $('#Spreadsheet').ejSpreadsheet();
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheetCount: 5,
        activeSheetIndex: 3
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({   
        allowCellType: true,
        allowAutoCellType:true
    });        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({   
        allowAutoFill: true
    });        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowAutoSum: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowCellFormatting : true
    });                     
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowCellType : true
    });                     
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowCharts: false
    }); 
    </script>

    allowClear boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
    allowClear: false
    }); 
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowClipboard : true                  
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowComments: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowCellFormatting : true,
        allowConditionalFormats : true        
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowDataValidation: true                   
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowDelete: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowDragAndDrop: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowEditing: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowFiltering: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowCellFormatting  :true,
        allowFiltering:true,
        allowFormatAsTable: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div>  
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowCellFormatting: true,
        allowFormatPainter: true
    });         
    </script>

    allowFormulaBar boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div>  
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowFormulaBar: false
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowFreezing : false
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowHyperlink: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowImport: true,
        importSettings:
            {
                importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import"
            }
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowInsert: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowKeyboardNavigation: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowLockCell: true                    
    });
    </script>

    allowMerging boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowMerging: true
    });         
    </script>

    allowOverflow boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
    allowOverflow: false
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowResizing: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowSearching : true
    });        
    </script>

    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
  • <div id="Spreadsheet"></div>
     
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowSelection: true
    });         
    </script>

    allowSorting boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowSorting: true
    });         
    </script>

    allowSparkline boolean

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

    Default Value

    • false

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowSparkline: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowUndoRedo: true                    
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowWrap: true                     
    });
    </script>

    apWidth number

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

    Default Value

    • 300

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        apWidth: 100
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowAutoFill: true,
        autoFillSettings:{
            fillType: ej.Spreadsheet.AutoFillOptions.CopyCells
        }
    });  
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowAutoFill: true,
        autoFillSettings:{
            showFillOptions: true
        }
    });  
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowCharts: true,
        chartSettings: {
            height : 300
        }
    }); 
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        allowCharts: true,
        chartSettings: {
            width : 500
        }
    }); 
    </script>

    columnCount number

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

    Default Value

    • 21

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        columnCount: 30
    });         
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        columnWidth: 100
    });         
    </script>

    cssClass string

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

    Default Value

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Set the CSS class during initialization. 
    $('#Spreadsheet').ejSpreadsheet({
        cssClass: "gradient-lime"
    });        
    </script>

    customFormulas Array

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

    Default Value

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Set the custom formula
    $('#Spreadsheet').ejSpreadsheet({
        customFormulas: [{
    	    formulaName:"CUSTOMTOTAL",
    	    functionName:"customTotal"
        }]
    });   
    function customTotal(args){}//args-It uses the value given by the user while using custom formula in Spreadsheet.
    </script>

    enableContextMenu boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        enableContextMenu: true
    });                   
    </script>

    enablePivotTable boolean

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

    Default Value

    • false

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        enablePivotTable: false
    });                   
    </script>

    enableTouch boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        enableTouch: true
    });                   
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        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.
        }
    });        
    </script>

    exportSettings.enableFormulaCalculation boolean

    Gets or sets a value that indicates whether to enable or disable formula calculation in Spreadsheet. By enabling this feature, formula calculated while export the Spreadsheet in protected mode.

    Default Value

    • false

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        exportSettings:{
            enableFormulaCalculation: 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.
        }
    });        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        exportSettings:{
            allowExporting: true,
            csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport", // It is used to set the url of the csv export.
        }
    });        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        exportSettings:{
            allowExporting: true,
            excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport", //It is used to set the url of the excel export.
        }
    });        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        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"
        }
    });        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        exportSettings:{
            allowExporting: true,
            pdfUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/PdfExport", //It is used to set the url of the pdf export.
        }
    });        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowCellFormatting: true,
        formatSettings:{
            allowCellBorder: true
        }
    });  
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowCellFormatting: true,
        formatSettings:{
            allowDecimalPlaces: true
        }
    });  
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowCellFormatting : true,
        formatSettings:{
            allowFontFamily: true
        }
    });  
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowImport: true,
        importSettings:{
            importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import"
        }
    });        
    </script>

    importSettings.importOnLoad boolean

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

    Default Value

    • false

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        importSettings: {
            importOnLoad: true            
        }
    });                   
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowImport: true,
        importSettings:{
            importUrl: "http://mvc.syncfusion.com/Spreadsheet/Spreadsheet.xlsx", //It is used to access the online files in Spreadsheet.
        }
    });        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowImport: true,
        importSettings:{
            importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import",
            password: "Spreadsheet" //It opens the excel file using this password.
        }
    });        
    </script>

    isImport boolean

    Gets a value that indicates whether importing or not while loading the sheets in Spreadsheet.

    Default Value

    • false

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        loadComplete: "loadComplete"
    });         
    function loadComplete(args) {
        if (!this.model.isImport)
            this.setWidthToColumns([140, 128, 105, 100, 100, 110, 120, 120, 100]);
    }         
    </script>

    isReadOnly boolean

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

    Default Value

    • false

    Example

  • HTML
  • <div id="Spreadsheet"></div>
     
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        isReadOnly: true
    });         
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    ej.Spreadsheet.locale["es-ES"] = {
    Sheet: "Hoja"
    };             
    $('#Spreadsheet').ejSpreadsheet({ 
        locale: "es-ES"
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        nameManager:[{
            name: "inputRange",
    		refersto: "=Sheet1!$A$1:$A$2"
        }]
    });    
    </script>

    nameManager.refersto string

    Specifies the address for the cell or a range.

    Default Value

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        nameManager:[{
            name: "inputRange",
    		refersto: "=Sheet1!$A$1:$A$2"
        }]
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        pictureSettings:{
            allowPictures: true
        }
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        pictureSettings:{
            allowPictures: true,
            height: 300
        }
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        pictureSettings:{
            allowPictures: true,
            width: 500
        }
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowPrinting: true,
        printSettings:{
            allowPageSetup: true
        }
    });   
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowPrinting: true,
        printSettings:{
            allowPageSize: true
        }
    });   
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        printSettings:{
            allowPrinting: true
        }
    });   
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        ribbonSettings: {
            applicationTab: {
                type: ej.Ribbon.ApplicationTabType.Menu
            }
        }
        });   
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        ribbonSettings:{
            applicationTab:{
                type: ej.Ribbon.ApplicationTabType.Menu
                menuSettings:{
                    isAppend:true
                }
            }
        }   
    });   
    </script>

    ribbonSettings.applicationTab.menuSettings.dataSource Array

    Specifies the data source to append in application tab.

    Default Value

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        ribbonSettings:{
            applicationTab:{
                type: ej.Ribbon.ApplicationTabType.Menu,
                menuSettings:{                
                    isAppend:true,
                    dataSource:[{ id: "File", text: "File" }]
                }
            }
        }
    });   
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        rowCount: 30
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        rowHeight: 30
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        scrollSettings:{
            allowScrolling: true,
        }
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        scrollSettings:{
            allowScrolling: true,
            allowSheetOnDemand: true
        }
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        scrollSettings:{
            allowScrolling: true,
            allowVirtualScrolling: true
        }
    });    
    </script>

    scrollSettings.height number|string

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

    Default Value

    • 100%

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        scrollSettings:{
            allowScrolling: true,
            height: 600
        }
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        scrollSettings:{
            allowScrolling: true,
            width: "100%",
            height: "100%",
            isResponsive: true
        }
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        scrollSettings:{
            allowScrolling: true,
            height: "100%",
            width: "100%",
            scrollmode: ej.Spreadsheet.scrollMode.Infinite,
        }
    });    
    </script>

    scrollSettings.width number|string

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

    Default Value

    • 100%

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        scrollSettings:{
            allowScrolling: true,
            width: 1300,
            scrollmode: ej.Spreadsheet.scrollMode.Infinite
        }
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowSelection: true,
        selectionSettings:{
            activeCell: "A1"
        }
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowSelection: true,
        selectionSettings:{
            enableAnimation: true,
            animationTime: 0.002
        }
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowSelection: true,
        selectionSettings:{
            enableAnimation: true
        }
    });
    </script>

    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
  • <div id="Spreadsheet"></div>
    
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowSelection: true,
        selectionSettings:{
            selectionType: ej.Spreadsheet.SelectionType.Row,
            animationTime: 0.001,
            enableAnimation: true
        }
    });
    </script>

    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
  • <div id="Spreadsheet"></div>
    
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        allowSelection: true,
        selectionSettings:{
            selectionUnit: ej.Spreadsheet.SelectionUnit.Single
        }
    });  
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        sheetCount: 5
    });         
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }]
        }]
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }]
        }]
    });    
    </script>

    sheets.border.color string

    Specifies border color for range of cells in Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }]
        }]
    });    
    </script>

    sheets.border.range string

    To apply border for the specified range of cell.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            border: [{ type: ej.Spreadsheet.BorderType.AllBorder, color: "#456534", range: "C6:D9" }]
        }]
    });    
    </script>

    sheets.cellTypes Array

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

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
        cellTypes: [{ range: 'F5', settings: { type: ej.Spreadsheet.CustomCellType.Button, 'background-color': 'yellow', color: 'black', text: 'BUTTON' } }]
        }]
    });    
    </script>

    sheets.cFormatRule Array

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

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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"}
                    ]
                }
            ]
        }]
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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"}
                    ]
                }
            ]
        }]
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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"}
                    ]
                }
            ]
        }]
    });    
    </script>

    sheets.cFormatRule.inputs Array

    Specifies the inputs for conditional formatting in Spreadsheet.

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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"}
                    ]
                }
            ]
        }]
    });    
    </script>

    sheets.cFormatRule.range string

    Specifies the range for conditional formatting in Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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"}
                    ]
                }
            ]
        }]
    });    
    </script>

    sheets.colCount number

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

    Default Value:

    • 21

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rangeSettings: [{dataSource: window.defaultData}],
            colCount: 25
        }]
    });    
    </script>

    sheets.columnWidth number

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

    Default Value:

    • 64

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
                columnWidth: 100
            }]
    });    
    </script>

    sheets.dataSource Object

    Gets or sets the data to render the Spreadsheet.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            // the datasource "window.defaultData" is referred from 'http://js.syncfusion.com/demos/web/scripts/xljsondata.js'
            dataSource: window.defaultData
        }]
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/");
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            dataSource: dataManager,
            query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
            fieldAsColumnHeader: true,
            primaryKey: "OrderID"
        }]
    });    
    </script>

    sheets.frozenRows number

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

    Default Value:

    • 0

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
                frozenRows: 3
            }]
    });    
    </script>

    sheets.frozenColumns number

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

    Default Value:

    • 0

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
                frozenColumns: 3
            }]
    });    
    </script>

    sheets.headerStyles Object

    Specifies the header styles for the headers in datasource range.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            dataSource: window.defaultData, showHeader: true, headerStyles: { "font-weight": "bold", "vertical-align": "middle", "text-align": "center", "background-color": "#559ad9", "color": "#FFFFFF" }}]
        });    
    </script>

    sheets.hideColumns Array

    To hide the specified columns in Spreadsheet.

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            hideColumns: [3, 4]
        }]
    });    
    </script>

    sheets.hideRows Array

    To hide the specified rows in Spreadsheet.

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            hideRows: [2, 3]
        }]
    });    
    </script>

    sheets.mergeCells Array

    To merge specified ranges in Spreadsheet.

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            mergeCells:["A1:A2","B2:C2"]
        }]
    });    
    </script>

    sheets.primaryKey string

    Specifies the primary key for the datasource in Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/");
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            dataSource: dataManager,
            query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
            primaryKey: "OrderID"
        }]
    });    
    </script>

    sheets.query Object

    Specifies the query for the dataSource in Spreadsheet.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    
    <script>
    var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/");
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            dataSource: dataManager,
            query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
            primaryKey: "OrderID"
        }]
    });    
    </script>

    sheets.rangeSettings Array

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

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            {rangeSettings: [{dataSource: window.defaultData, showHeader: true, startCell: "A1"}]},
            {rangeSettings: [{dataSource: window.personList, showHeader: true, startCell: "D1"}]}
        }]
    });    
    </script>

    sheets.rangeSettings.dataSource Object

    Gets or sets the data to render the Spreadsheet.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rangeSettings: [{dataSource: window.defaultData, showHeader: true}]}]
        });    
    </script>

    sheets.rangeSettings.headerStyles Object

    Specifies the header styles for the headers in datasource range.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rangeSettings: [{dataSource: window.defaultData, showHeader: true, headerStyles: { "font-weight": "bold", "vertical-align": "middle", "text-align": "center", "background-color": "#559ad9", "color": "#FFFFFF" }}]
            }]
    });    
    </script>

    sheets.rangeSettings.primaryKey string

    Specifies the primary key for the datasource in Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/");
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rangeSettings:[{
                dataSource: dataManager,
                query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
                primaryKey: "OrderID"
            }]
        }]
    });    
    </script>

    sheets.rangeSettings.query Object

    Specifies the query for the datasource in Spreadsheet.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/");
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rangeSettings:[{
    	        dataSource: dataManager,
                query: ej.Query().take(50).select(["OrderID", "CustomerID", "EmployeeID", "ShipName", "ShipAddress", "ShipCity", "ShipCountry"]),
                primaryKey: "OrderID"
                }]
            }]
    });    
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rangeSettings: [{dataSource: window.defaultData, showHeader: true}]
            }]
    });    
    </script>

    sheets.rangeSettings.startCell string

    Specifies the start cell for the datasource range in Spreadsheet.

    Default Value:

    • “A1”

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
            rangeSettings: [{ dataSource: window.defaultData, startCell: "B1" }]
    }]
    });    
    </script>

    sheets.rowCount number

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

    Default Value:

    • 20

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rangeSettings: [{dataSource: window.defaultData}],
            rowCount: 30
        }]
    });    
    </script>

    sheets.rows Array

    Specifies the rows for a sheet in Spreadsheet.

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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" }},
                    ]
                }
            ]
        }],
    });    
    </script>

    sheets.rows.height number

    Gets or sets the height of a row in Spreadsheet.

    Default Value:

    • 20

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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" } },
    			    ]
                }
            ]
        }],    
    });
    </script>

    sheets.rows.cells Array

    Specifies the cells of a row in Spreadsheet.

    Default Value:

    • []

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
    sheets: [{
        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" } }
                ]
            }
        ]
    }]   
    });
    </script>

    sheets.rows.cells.comment Object

    Specifies the comment for a cell in Spreadsheet.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
        rows: [
            {
                cells: [
                    { value: "Item Name", comment: { value: "Name of the item" } }
                ]
            }
        ]
    }]    
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "Item Name",comment: { value: "Name of the item" , isVisible:true}}
                    ]
                }
            ]
        }]    
    });
    </script>

    sheets.rows.cells.comment.value string

    Specifies the value for the comment in Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "Item Name",comment: { value: "Name of the item" , isVisible:true}}
                    ]
                }
            ]
        }]    
    });
    </script>

    sheets.rows.cells.format Object

    Specifies the format of a cell in Spreadsheet.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "20", format: { type: "currency" } }
                    ]
                }
            ]
        }]    
    });
    </script>

    sheets.rows.cells.format.decimalPlaces number

    Specifies the number of decimal places for the given input.

    Default Value:

    • 2

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
            rows: [
                { cells: [{ value: "200", format: { type: "currency", decimalPlaces: 3 } }] }
            ]
        }]
    });
    </script>

    sheets.rows.cells.format.formatStr string

    Specifies the string format for the given input.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
            rows: [
                { cells: [{ value: "20000", format: { type: "percentage", formatStr: "{0:P3}" } }] }
            ]
        }]
    });
    </script>

    sheets.rows.cells.format.thousandSeparator boolean

    Specifies the thousand separator for the given input.

    Default Value:

    • false

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
            rows: [
                { cells: [{ value: "200000", format: { type: "number", thousandSeparator: true } }] }
            ]
        }]
    });
    </script>

    sheets.rows.cells.format.type string

    Specifies the type of the format in Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "20", format: { type: "currency" } }
                    ]
                }
            ]
        }]    
    });
    </script>

    Specifies the hyperlink for a cell in Spreadsheet.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "AliExpress", hyperlink: { webAddr: "www.aliexpress.com" } }
                    ]
                }
            ]
        }]    
    });
    </script>

    Specifies the web address for the hyperlink of a cell.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "AliExpress", hyperlink: { webAddr: "www.aliexpress.com" } }
                    ]
                }
            ]
        }]    
    });
    </script>

    Specifies the cell address for the hyperlink of a cell.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "AliExpress", hyperlink: { cellAddr: "B2" } }
                    ]
                }
            ]
        }]    
    });
    </script>

    Specifies the sheet index to which the cell is referred.

    NOTE

    User must give cellAddr to use this property.

    Default Value:

    • 1

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "AliExpress", hyperlink: { cellAddr: "B2" , sheetIndex: 2} }
                    ]
                }
            ]
        }]    
    });
    </script>

    sheets.rows.cells.index number

    Specifies the index of a cell in Spreadsheet.

    Default Value:

    • 0

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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" }}
                    ]
                }
            ]
        }]    
    });
    </script>

    sheets.rows.cells.isLocked boolean

    Specifies whether to lock or unlock a particular cell.

    Default Value:

    • false

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
            rows: [{
                cells: [{ value: "Item Name", isLocked: true }]
            }]
        }]
    });
    </script>

    sheets.rows.cells.style Object

    Specifies the styles of a cell in Spreadsheet.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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" }}
                    ]
                }
            ]
        }]    
    });
    </script>

    sheets.rows.cells.style.backgroundColor string

    Specifies the background color of a cell in the Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
            rows: [
                {
                    cells: [
                        { value: "Item Name", style: { "background-color": "#428bca" } }
                    ]
                }
            ]
        }]
    });
    </script>

    sheets.rows.cells.style.color string

    Specifies the font color of a cell in the Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
            rows: [
                {
                    cells: [
                        { value: "Item Name", style: { "color": "#428bca" } }
                    ]
                }
            ]
        }]
    });
    </script>

    sheets.rows.cells.style.fontWeight string

    Specifies the font weight of a cell in the Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets: [{
            rows: [
                {
                    cells: [
                        { value: "Item Name", style: { "font-weight": "bold" } }
                    ]
                }
            ]
        }]
    });
    </script>

    sheets.rows.cells.value string

    Specifies the value for a cell in Spreadsheet.

    Default Value:

    • ””

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            rows:[
                {
                    cells: [
                        { value: "Item Name"},
                        { value: "Quantity"}
                    ]
                }
            ]
        }]    
    });
    </script>

    sheets.rows.index number

    Gets or sets the index of a row in Spreadsheet.

    Default Value:

    • 0

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            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" }},
    			    ]
                }
            ]
        }],    
    });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
    	sheets:[{
    		showGridlines: true
    	}]
    });   
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            dataSource: window.defaultData, showHeader: true
            }]
    });    
    </script>

    sheets.showHeadings boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
    	sheets:[{
    		showHeadings: true
    	}]
    });   
    </script>

    sheets.sheetName string

    Specifies the name for sheet in the Spreadsheet.

    Default Value

    • string

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
    	sheets:[{
    		sheetName: "Sheet Name"
    	}]
    });   
    </script>

    sheets.startCell string

    Specifies the start cell for the datasource range in Spreadsheet.

    Default Value:

    • “A1”

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({
        sheets:[{
            dataSource: window.defaultData, startCell: "B1"
            }]
    });    
    </script>

    showPager boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        showPager: true
    });         
    </script>

    showRibbon boolean

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

    Default Value

    • true

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        showRibbon: true
    });         
    </script>

    undoRedoStep number

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

    Default Value

    • 20

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        undoRedoStep: 15
    });         
    </script>

    userName string

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

    Default Value

    • User Name

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    $('#Spreadsheet').ejSpreadsheet({ 
        userName: "User Name"
    });         
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.addCustomFormula("CUSTOMTOTAL","customTotal"); // Sends a add custom formula request to the Spreadsheet.
    function customTotal(args){}//args-It uses the value given by the user while using custom formula in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends a add custom formula request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("addCustomFormula","CUSTOMTOTAL","customTotal" );     
    function customTotal(args){}//args-It uses the value given by the user while using custom formula in Spreadsheet.  
    </script>

    addNewSheet()

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

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.addNewSheet(); // Sends a add new sheet request to the Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends a add new sheet request to the Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("addNewSheet");        
    </script>

    blankWorkbook()

    This method is used to blank the workbook in Spreadsheet.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To blank the workbook in Spreadsheet
    excelObj.blankWorkbook();
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.clearAll("A2:A6"); // Sends a clear all request to the Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends a clear all request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("clearAll", "A2:A6");        
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.clearAllFormat("A2:A6"); // Sends a clear all format request to the Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends a clear all format request to the Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("clearAllFormat", "A2:A6");        
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.clearBorder("A2:A6"); // Sends a clear border request to the Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends a clear border request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("clearBorder", "A2:A6");        
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.clearContents("A2:A6"); // Sends a clear content request to the Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends a clear content request to the Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("clearContents", "A2:A6");        
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.clearRange("updateTable"); // Sends a clear range request to the Spreadsheet.
    </script>
  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Sends a clear range request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("clearRange","updateTable");        
    </script>

    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 element Optional.
    skipHiddenRow boolean Optional. pass

    true

    , if you want to skip the hidden rows
    status string Optional. Pass the status to perform undo and redo operation.
    skipCell boolean Optional. It specifies whether to skip element processing or not.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.clearRangeData("A1:A5", ["value", "value2"], excelObj.getRange("A1:A5"), true);
    </script>
  • HTML
  • <script>
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sends a clear range data request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("clearRangeData", "A1:A5", ["value", "value2"], excelObj.getRange("A1:A5"), false);        
    </script>

    clearUndoRedo()

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

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.clearUndoRedo(); 
    </script>
  • HTML
  • <script>
    // Sends a clear undo redo request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("clearUndoRedo");        
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.copySheet(2, 1, true); // Sends a copy sheet request to the Spreadsheet.
    //excelObj.copySheet(2, 1, false); // Sends a move sheet request to the Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends a copy sheet request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("copySheet", 2, 1, true);        
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Delete a column in the sheet.
    excelObj.deleteEntireColumn(2, 3);
    </script>
  • HTML
  • <script>
    // Delete a column in the sheet.
    $("#Spreadsheet").ejSpreadsheet("deleteEntireColumn",2,3);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Delete a row in the sheet.
    excelObj.deleteEntireRow(2,3);
    </script>
  • HTML
  • <script>
    // Delete a row in the sheet.
    $("#Spreadsheet").ejSpreadsheet("deleteEntireRow", 2, 3);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.deleteSheet(3); // Sends a sheet delete request to the Spreadsheet
    </script>
  • HTML
  • <script>
    // Sends a sheet delete request to the Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("deleteSheet", 3);        
    </script>

    deleteShiftLeft(startCell, endCell)

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

    Name Type Description
    startCell Object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of the starting cell
    colIndex number Pass the column index of the starting cell
    endCell Object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of the ending cell
    colIndex number Pass the column index of the ending cell

    Example

  • HTML
  • <script>
    var startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Delete a cell and shift cells left in the sheet.
    excelObj.deleteShiftLeft(startCell, endCell);
    </script>
  • HTML
  • <script>
    var startCell= {rowIdx: 1, colIdx: 2}, endCell= {rowIdx: 1, colIdx: 2};
    // Delete a cell and shift cells left in the sheet.
    $("#Spreadsheet").ejSpreadsheet("deleteShiftLeft", startCell, endCell);
    </script>

    deleteShiftUp(startCell, endCell)

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

    Name Type Description
    startCell Object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of the start cell
    colIndex number Pass the column index of the start cell
    endCell Object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of the end cell
    colIndex number Pass the column index of the end cell

    Example

  • HTML
  • <script>
    var startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Delete a cell and shift cells up in the sheet.
    excelObj.deleteShiftUp(startCell, endCell);
    </script>
  • HTML
  • <script>
    var startCell= {rowIdx: 1, colIdx: 2}, endCell= {rowIdx: 1, colIdx: 2};
    // Delete a cell and shift cells up in the sheet.
    $("#Spreadsheet").ejSpreadsheet("deleteShiftUp", startCell, endCell);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    var updateFn = 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
    excelObj.model.sheets[1].rangeSettings["updateTable"] = rangeSettings;
    //Sends a edit range request to the Spreadsheet
    excelObj.editRange("updateTable", updateFn); 
    </script>
  • HTML
  • <script>
    //Sends a edit range request to the Spreadsheet after updating new rangeSettings.
    $("#Spreadsheet").ejSpreadsheet("editRange", "updateTable", updateFn);        
    </script>

    getActivationPanel()

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

    Returns:

    Element

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getActivationPanel(); // Gets sheet  ActivationPanel element in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets sheet ActivationPanel element in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("getActivationPanel");        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getActiveCell(1); // Gets the activeCell  object in specified sheet index.
    </script>
  • HTML
  • <script>
    // Gets the activeCell element in specified sheetindex
    $("#Spreadsheet").ejSpreadsheet("getActiveCell", 1);        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getActiveCellElem(1); // Gets activeCell element in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets activeCell element in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("getActiveCellElem", 1);        
    </script>

    getActiveSheetIndex()

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

    Returns:

    number

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getActiveSheetIndex(); // Gets activeSheet index in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets activeSheet index in Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("getActiveSheetIndex");        
    </script>

    getAutoFillElem()

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

    Returns:

    Element

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getAutoFillElem(); // Gets autofill element in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets autofill element in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("getAutoFillElem");        
    </script>

    getAlphaRange(sRIndex, sCIndex, eRIndex, eCIndex)

    This method is used to get the alpha range of the given index in Spreadsheet.

    Name Type Description
    sRIndex number Pass the start row index.
    sCIndex number Pass the start column index.
    eRIndex number Pass the end row index.
    eCIndex number Pass the end column index.

    Returns:

    String

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getAlphaRange(2,3,4,5); // Get the alpha range for the given index
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getCell(2, 3, 1); // Get the cell based on rowIndex and colIndex.
    </script>
  • HTML
  • <script>
    // Get the cell based on row and column index
    $("#Spreadsheet").ejSpreadsheet("getCell", 2, 3, 1);        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getDataSettings(1); // Gets the data settings in Spreadsheet
    </script>
  • HTML
  • <script>
    // Gets the data settings in Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("getDataSettings", 1);        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getFrozenColumns(1); // Gets the frozen column index in Spreadsheet
    </script>
  • HTML
  • <script>
    // Gets the frozen column index in Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("getFrozenColumns", 1);        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getFrozenRows(1); // Gets the frozen row index in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets the frozen row index in Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("getFrozenRows", 1);        
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getHyperlink(excelObj.getCell(1, 1)); // To get the hyperlink data of specified cell.
    </script>
  • HTML
  • <script>
    // To get the hyperlink data of specified cell.
    $("#Spreadsheet").ejSpreadsheet("getHyperlink", excelObj.getCell(1, 1, 1));        
    </script>

    getObjectKeys(obj)

    This method is used to get the keys from the given object in Spreadsheet.

    Name Type Description
    obj Object Pass the Object

    Returns:

    Array

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getObjectKeys({"font-family": "Arial Black", "font-weight": "normal", "font-style": "Italic", "font-size": "9pt", "text-decoration": "line-through",color:"#FFFF00"}); // To get the keys from the given object.
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getRange("A2:A5", 1, false); // Get the cells based on the given range
    </script>
  • HTML
  • <script>
    // Get the cells based on the given range
    $("#Spreadsheet").ejSpreadsheet("getRange", "A2:A5", 1, false);        
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getRangeData({range: [2, 6, 2, 6], property: ["value", "value2", "format"], sheetIdx: 1}); // To get the cells data of specified range
    </script>
  • HTML
  • <script>
    // To get the cells data of specified range
    $("#Spreadsheet").ejSpreadsheet("getRangeData", {range: [2, 6, 2, 6], property: ["value", "value2", "format"], sheetIdx: 1});        
    </script>

    getRangeDataAsObject(startcell, endcell, [skipHiddenRow])

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

    Name Type Description
    startcell object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index to get the data as object
    colIndex number Pass the column index to get the data as object
    endcell object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index to get the data as object
    colIndex number Pass the column index to get the data as object
    skipHiddenRow boolean Optional. Pass

    true

    , if you want to skip the hidden rows.

    Returns:

    Object

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getRangeDataAsObject({ rowIndex:2,colIndex:2 },{ rowIndex:4,colIndex:4 }, true, 1); // To get the data as object from the given cell
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getRangeIndices("A1:A9"); // Get range indices based on specified alpha range.
    </script>
  • HTML
  • <script>
    // Get cells based on specified range indices
    $("#Spreadsheet").ejSpreadsheet("getRangeIndices", "A1:A9");        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getSheet(1); // Gets sheet details of Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets sheet details of Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("getSheet", 1);        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getSheetElement(1); // Gets sheet content of Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets sheet content of Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("getSheetElement", 1);        
    </script>

    getSheets()

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

    Returns:

    Array

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getSheets(); // Gets sheets details of Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets sheets details of Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("getSheets");        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.gotoPage(1, false); // Sends a paging request to the Spreadsheet with specified sheet index
    </script>
  • HTML
  • <script>
    // Sends a paging request to the Spreadsheet with specified sheet index.
    $("#Spreadsheet").ejSpreadsheet("gotoPage", 3, true);        
    </script>

    getVisibleCellDetails()

    This method is used to get the visible cell details in Spreadsheet.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"),
    cellDetails = excelObj.getVisibleCellDetails(),  //To get the visible cell details in Spreadsheet.
    topLeftCell = cellDetails.topLeftCell,  // To get the visible topLeftCell.
    rowCount = cellDetails.rowCount,  // To get the visible rowcount.
    colCount = cellDetails.colCount;  // To get the visible colCount.
    </script>

    hideActivationPanel()

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

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.hideActivationPanel(); // To hide the pivot table activationPanel in the Spreadsheet.
    </script>
  • HTML
  • <script>
    // To hide the pivot table activationPanel in the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("hideActivationPanel");        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Hide the column by passing column index in the active sheet.
    excelObj.hideColumn(1);
    // Hide the columns from startCol to endCol in the active sheet.
    excelObj.hideColumn(1, 4);
    </script>
  • HTML
  • <script>
    // Hide the column by passing column index in the active sheet.
    $("#Spreadsheet").ejSpreadsheet("hideColumn", 1);
    // Hide the columns from startCol to endCol in the active sheet.
    $("#Spreadsheet").ejSpreadsheet("hideColumn", 1, 4);
    </script>

    hideFormulaBar()

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

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To hide formula bar in Spreadsheet.
    excelObj.hideFormulaBar();
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Hide the row by passing row index in the active sheet.
    excelObj.hideRow(1);
    // Hide a rows from startRow to endRow in the active sheet.
    excelObj.hideRow(1, 4);
    </script>
  • HTML
  • <script>
    // Hide the row by passing row index in the active sheet.
    $("#Spreadsheet").ejSpreadsheet("hideRow", 1);
    // Hide a rows from startRow to endRow in the active sheet.
    $("#Spreadsheet").ejSpreadsheet("hideRow", 1, 4);
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Sends a hide sheet request to the Spreadsheet.
    excelObj.hideSheet("Sheet2");
    </script>
  • HTML
  • <script>
    //Sends a hide sheet request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("hideSheet", 2);
    </script>

    hideWaitingPopUp()

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

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // hide waiting popup in the Spreadsheet.
    excelObj.hideWaitingPopUp();
    </script>
  • HTML
  • <script>
    // hide waiting popup in the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("hideWaitingPopUp");
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    //initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Insert a column in the sheet.
    excelObj.insertEntireColumn(1, 2);
    </script>
  • HTML
  • <script>
    // Insert a column in the sheet.
    $("#Spreadsheet").ejSpreadsheet("insertEntireColumn", 1, 2);
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Insert a row in the sheet.
    excelObj.insertEntireRow(1, 2);
    </script>
  • HTML
  • <script>
    // Insert a row in the sheet.
    $("#Spreadsheet").ejSpreadsheet("insertEntireRow", 1, 2);
    </script>

    insertSheet()

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

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.insertSheet(); // Sends a insert new sheet request to the Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends an insert new sheet request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("insertSheet");        
    </script>

    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 Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of start cell
    colIndex number Pass the column index of start cell
    endCell Object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of end cell
    colIndex number Pass the column index of end cell

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    var startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Insert a cells and shift cells bottom in the sheet.
    excelObj.insertShiftBottom(startCell, endCell);
    </script>
  • HTML
  • <script>
    var startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    // Insert a cell and shift cells bottom in the sheet.
    $("#Spreadsheet").ejSpreadsheet("insertShiftBottom", startCell, endCell);
    </script>

    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 Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of start cell
    colIndex number Pass the column index of start cell
    endCell Object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of end cell
    colIndex number Pass the column index of end cell

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    var startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    //initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Insert a cells and shift cells right in the sheet.
    excelObj.insertShiftRight(startCell, endCell);
    </script>
  • HTML
  • <script>
    var startCell= {rowIndex: 1, colIndex: 2}, endCell= {rowIndex: 1, colIndex: 2};
    // Insert a cell and shift cells right in the sheet.
    $("#Spreadsheet").ejSpreadsheet("insertShiftRight", startCell, endCell);
    </script>

    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. Pass the Object "ImportingOptions"
    Name Type Description
    file string Pass the file to import manually
    password string Pass the password to import manually
    Url string Pass the url to import manually
    fileStream string Pass the file stream to import manually
    fileType string Pass the filetype to import manually

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

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"); // Initialize the Spreadsheet object.
    var importRequest = { Url:"http://staging.syncfusion.com:7777/ejSpreadsheet/Spreadsheet.xlsx" };
    excelObj.import(importRequest); 
    </script>

    loadFromJSON(response)

    This method is used to load JSON data in Spreadsheet.

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

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), response;
    response = excelObj.saveAsJSON();
    excelObj.loadFromJSON(response); // To load JSON data in the Spreadsheet.
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.lockCells("A3:B5", true); // To lock cells in the Spreadsheet.
    </script>
  • HTML
  • <script>
    // To lock cells in the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("lockCells","A3:B5", true);        
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.mergeAcrossCells("A3:B5", true); // To merge cells across in the Spreadsheet.
    </script>
  • HTML
  • <script>
    // To merge cells across in the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("mergeAcrossCells","A3:B5");        
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.mergeCells("A3:B5", true); // To merge the selected cell in Spreadsheet.
    </script>
  • HTML
  • <script>
    // To merge the selected cell in Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("mergeCells","A3:B5");        
    </script>

    performSelection(startCell, endCell)

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

    Name Type Description
    startCell Object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of start cell
    colIndex number Pass the column index of start cell
    endCell Object Pass the Object "CellIndex"
    Name Type Description
    rowIndex number Pass the row index of end cell
    colIndex number Pass the row index of end cell
  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To perform selection for the specified range.
    excelObj.performSelection({ rowIndex: 1, colIndex: 1 }, { rowIndex: 2, colIndex: 2 }); 
    // Range as string
    excelObj.performSelection("B1:C3");
    </script>
  • HTML
  • <script>
    // To perform selection for the specified range.
    $("#Spreadsheet").ejSpreadsheet("performSelection", { rowIndex: 1, colIndex: 1 }, { rowIndex: 2, colIndex: 2 });
    // Range as string
    $("#Spreadsheet").ejSpreadsheet("performSelection", "B1:C3");
    </script>

    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
  • <script>
    //initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To protect sheet in Spreadsheet.
    excelObj.protectSheet(false);
    </script>
  • HTML
  • <script>
    // To defined refresh selection in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("protectSheet", false);
    </script>

    redo()

    This method is used to perform the redo action in Spreadsheet.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To perform redo action in Spreadsheet
    excelObj.redo();
    </script>

    refreshContent(sheetIdx)

    This method is used to refresh the Spreadsheet based on the sheet model values.

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

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), sheet = excelObj.getSheet(); 
        sheet.rowCount = 30; 
        sheet.colCount = 20; 
        excelObj.refreshContent(1); // refresh the spreadsheet based on the row count and column count in normal mode
    </script>
  • HTML
  • <script>
    $("#Spreadsheet").ejSpreadsheet("refreshContent",1);
    </script>

    refreshSpreadsheet()

    This method is used to refresh the Spreadsheet element based on the page layout.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.refreshSpreadsheet();
    </script>
  • HTML
  • <script>
    $("#Spreadsheet").ejSpreadsheet("refreshSpreadsheet");
    </script>

    refresh()

    This method destroys and re-creates the entire Spreadsheet control.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.refresh();
    </script>
  • HTML
  • <script>
    $("#Spreadsheet").ejSpreadsheet("refresh");
    </script>

    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.
  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.removeCustomFormula("CUSTOMTOTAL","customTotal"); // Sends a remove custom formula request to the Spreadsheet.
    function customTotal(args){}//args-It uses the value given by the user while using custom formula in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sends a remove custom formula request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("removeCustomFormula","CUSTOMTOTAL","customTotal" ); 
    function customTotal(args){}//args-It uses the value given by the user while using custom formula in Spreadsheet .      
    </script>

    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 String|Array 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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.removeHyperlink("A2:A3", false); // To remove the hyperlink  of specified range
    </script>
  • HTML
  • <script>
    // To remove the hyperlink  of specified range
    $("#Spreadsheet").ejSpreadsheet("removeHyperlink", "A2:A3", false);        
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sends a remove range request to the Spreadsheet.
    excelObj.removeRange("updateTable"); 
    </script>
  • HTML
  • <script>
    // Sends a remove range request to the Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("removeRange", "updateTable");
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Removes readonly option for the range.
    excelObj.removeReadOnly("B3"); 
    </script>
  • HTML
  • <script>
    // Removes readonly option for the range.
    $("#Spreadsheet").ejSpreadsheet("removeReadOnly", "B3");
    </script>

    saveAsJSON()

    This method is used to save JSON data in Spreadsheet.

    Returns:

    Object

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.saveAsJSON();
    </script>
  • HTML
  • <script>
    $("#Spreadsheet").ejSpreadsheet("saveAsJSON");
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Set sheet index for Spreadsheet. 
    excelObj.saveBatchChanges(1);
    </script>
  • HTML
  • <script>
    //Set sheet index for Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("saveBatchChanges", 1);
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.setActiveCell(1, 0, 1); // Sets activeCell in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Sets activeCell in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("setActiveCell", 1, 0, 1);
    </script>

    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
  • <script>
    var sheetIndex= 1;
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Set active sheet index for Spreadsheet. 
    excelObj.setActiveSheetIndex(sheetIndex);
    </script>
  • HTML
  • <script>
    //Set active sheet index for Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("setActiveSheetIndex", sheetIndex);
    </script>

    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 Object "BorderOptions".
    Name Type Description
    style string Pass the style to set border of the cell
    type string Pass the type to set border of the cell
    color string Pass the color to set border of the cell
    range string Optional. If range is specified, it will set border for the specified range else it will use the selected range.

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.setBorder({ style: "solid", type: "outside", color: "#000000"}, "B2:B6"); // To set borders in Spreadsheet
    </script>
  • HTML
  • <script>
    // To set borders in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("setBorder", { style: "solid", type: "outside", color: "#000000"}, "B2:B6");        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    var heightRowObj= [{rowIndex: 2, height: 40}, {rowIndex: 3, height: 50}], heightRowArr = [50, 40];
    //Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Set height for specified rows in active sheet.
    excelObj.setHeightToRows(heightRowObj);
    // Set height for rows starting from the '0'th index in active sheet.
    excelObj.setHeightToRows(heightRowArr);
    </script>
  • HTML
  • <script>
    var heightRowObj= [{rowIndex: 2, height: 40}, {rowIndex: 3, height: 50}], heightRowArr = [50, 40];
    // Set height for specified rows in active sheet.
    $("#Spreadsheet").ejSpreadsheet("setHeightToRows", heightRowObj);
    // Set height for rows starting from the '0'th index in active sheet.
    $("#Spreadsheet").ejSpreadsheet("setHeightToRows", heightRowArr);
    
    </script>

    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 the Object "LinkOptions"
    Name Type Description
    cellAddress string Pass the cell address in the cell
    text string Pass the text address in the cell
    webAddress string Pass the web address in the cell
    sheetIdx number If we pass cellAddress then which sheet to be navigate in the applied link.

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.setHyperlink("A2:A3",{"cellAddr":"A2:A8"}, 3); // To set the hyperlink  of specified range.
    </script>
  • HTML
  • <script>
    // To set the hyperlink  of specified range
    $("#Spreadsheet").ejSpreadsheet("setHyperlink", "A2:A3",{"cellAddr":"A2:A8"},3);        
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sets readonly option for the range.
    excelObj.setReadOnly("B3"); 
    </script>
  • HTML
  • <script>
    // Sets readonly option for the range.
    $("#Spreadsheet").ejSpreadsheet("setReadOnly", "B3");
    </script>

    setSheetFocus()

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

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Set focus on Spreadsheet.
    excelObj.setSheetFocus();
    </script>
  • HTML
  • <script>
    // Set focus on Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("setSheetFocus");
    </script>

    setWidthToColumns(widthColl, [sheetIndex])

    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.
    sheetIndex Number Optional. If sheetIdx is specified, it will set the width for columns to the specified sheet else it will use active sheet.

    Example

  • HTML
  • <script>
    var widthCollObj= [{colIndex: 2, width: 40}, {colIndex: 3, width: 50}], widthCollArr = [80, 90];
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Set width for specified columns in active sheet
    excelObj.setWidthToColumns(widthCollObj);
    // Set width for columns starting from the '0'th index in second sheet.
    excelObj.setWidthToColumns(widthCollArr, 2);
    </script>
  • HTML
  • <script>
    // Set width for specified columns in active sheet.
    $("#Spreadsheet").ejSpreadsheet("setWidthToColumns", widthCollObj);
    // Set width for columns starting from the '0'th index in second sheet.
    $("#Spreadsheet").ejSpreadsheet("setWidthToColumns", widthCollArr, 2);
    
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.sheetRename("Sep-Billing"); // Sends a sheet rename request to the Spreadsheet
    </script>
  • HTML
  • <script>
    // To rename a sheet in Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("sheetRename", "Sep-Billing");        
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.showActivationPanel("upTable"); // To display the activationPanel in Spreadsheet
    </script>
  • HTML
  • <script>
    // To display the activationPanel in Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("showActivationPanel", "upTable");        
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // show the hidden column by passing column index in the active sheet.
    excelObj.showColumn(1);
    // show the hidden columns from startColIdx to startColIdx in the active sheet.
    excelObj.showColumn(3, 6);
    
    </script>
  • HTML
  • <script>
    // show the hidden column by passing column index in the active sheet.
    $("#Spreadsheet").ejSpreadsheet("showColumn", 1);
    // show the hidden columns from startColIdx to startColIdx in the active sheet.
    $("#Spreadsheet").ejSpreadsheet("showColumn", 3, 6);
    </script>

    showFormulaBar()

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

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To show the formula bar in Spreadsheet
    excelObj.showFormulaBar();
    </script>
  • HTML
  • <script>
    // To show the formula bar in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("showFormulaBar ");
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To hide the gridlines in the sheet.
    excelObj.showGridlines(false);
    </script>
  • HTML
  • <script>
    // hide the gridlines in the sheet.
    $("#Spreadsheet").ejSpreadsheet("showGridlines", false);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To hide the headers in the sheet.
    excelObj.showHeadings(false);
    </script>
  • HTML
  • <script>
    // To hide the headers in the sheet.
    $("#Spreadsheet").ejSpreadsheet("showHeadings", false);
    </script>

    showPager(status)

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

    Name Type Description
    status boolean Pass

    true

    to show pager.
  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.showPager(false); // Gets or sets the value to show/hide pager.
    </script>
  • HTML
  • <script>
    // Gets or sets the value to show/hide pager.
    $("#Spreadsheet").ejSpreadsheet("showPager",false);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // show the hidden row by passing row index in the active sheet.
    excelObj.showRow(1);
    // To show the hidden rows for startRow to endRow in the active sheet.
    excelObj.showRow(3, 6);
    </script>
  • HTML
  • <script>
    // show the hidden row by passing row index in the active sheet.
    $("#Spreadsheet").ejSpreadsheet("showRow", 1);
    // To show the hidden rows for startRow to endRow in the active sheet.
    $("#Spreadsheet").ejSpreadsheet("showRow", 3, 6);
    </script>

    showWaitingPopUp()

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

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To show waiting popup in Spreadsheet
    excelObj.showWaitingPopUp();
    </script>
  • HTML
  • <script>
    // show waiting popup in the Spreadsheet
    $("#Spreadsheet").ejSpreadsheet("showWaitingPopUp");
    </script>

    undo()

    This method is used to perform the undo action in Spreadsheet.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To perform undo action in Spreadsheet
    excelObj.undo();
    </script>

    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
  • <script>
    //Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To unhide a sheet in Spreadsheet.
    excelObj.unhideSheet("Sheet2");
    </script>
  • HTML
  • <script>
    //To unhide a sheet in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("unhideSheet", "Sheet2");
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To unmerge the selected cells in Spreadsheet.
    excelObj.unmergeCells("A3:B5"); 
    </script>
  • HTML
  • <script>
    // To unmerge the selected cells in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("unmergeCells","A3:B5");        
    </script>

    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
  • <script>
    //Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To unwrap the cell text.
    excelObj.unWrapText("A1:B3");
    </script>
  • HTML
  • <script>
    // To unwrap the cell text.
    $("#Spreadsheet").ejSpreadsheet("unWrapText","A1:B3")
    </script>

    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 Object "DataOptions"
    Name Type Description
    value number Pass the value to update
    value2 number Pass the value2 to update
    type string Pass the type 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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To update data in the specified range of the cells in Spreadsheet.
    excelObj.updateData([{ value: 10, value2: 10, type: "general"}, { value: 25000, value2: 25000, type: "general"}], "A3"); 
    </script>
  • HTML
  • <script>
    // To update a data in the specified range of cells in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("updateData", [{ value: 10, value2: 10, type: "general"}, { value: 25000, value2: 25000, type: "general"}], "A3");        
    </script>

    updateFormulaBar()

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

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To update the formula bar in Spreadsheet
    excelObj.updateFormulaBar();
    </script>

    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 Object "RangeOptions"
    Name Type Description
    dataSource object Pass the datasource object values as settings
    showHeader boolean Pass the showheader condition as settings
    startCell string Pass the startcell values as settings

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    var settings = { dataSource: [{ Product: "XYZ", Price: "2000" }], showHeader: "true", startCell: "F1" };
    // To update range of cells with the specified settings
    excelObj.updateRange(1, settings); 
    </script>
  • HTML
  • <script>
    var settings = { dataSource: [{ Product: "XYZ", Price: "2000" }], showHeader: "true", startCell: "F1" };
    // To update cells range of cells with the specified settings
    $("#Spreadsheet").ejSpreadsheet("updateRange", 1, settings);        
    </script>

    updateUndoRedoCollection(details)

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

    Name Type Description
    details Object Pass the Object "UndoRedoOptions"
    Name Type Description
    action string Pass the action to update undo and redo collection
    cell element Pass the cell to update undo and redo collection
    sheetIndex number Pass the sheet index to update undo and redo collection

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), details = { action: "custom", cell: excelObj.getActiveCell(), sheetIndex: 1 };
    // To update undo and redo collections.
    excelObj.updateUndoRedoCollection(details); 
    </script>
  • HTML
  • <script>
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), details = { action: "custom", cell: excelObj.getActiveCell() };
    // To update undo and redo collections.
    $("#Spreadsheet").ejSpreadsheet("updateUndoRedoCollection", details);        
    </script>

    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 Object "DataOptions"
    Name Type Description
    value number< Pass the value to update in particular range
    value2 number Pass the value2 to update in particular range
    type string Pass the type to update in 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 boolean Optional. It specifies whether to skip element processing or not.

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To update unique data in Spreadsheet.
    excelObj.updateUniqueData({ value: 10, value2: 10, type: "general"}, [1, 0, 5, 0]); 
    </script>
  • HTML
  • <script>
    // To update unique data in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("updateUniqueData", [{ value: 10, value2: 10, type: "general"}], [1, 0, 5, 0]);        
    </script>

    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
  • <script>
    //Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To wrap the cell Text.
    excelObj.wrapText("A1:B3");
    </script>
  • HTML
  • <script>
    // To wrap the cell Text.
    $("#Spreadsheet").ejSpreadsheet("wrapText","A1:B3")
    </script>

    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 the Object "CellTypeSettings"
    Name Type Description
    type enum Specifies the button type of Custom Cell type.
    text string Specifies the button text of Custom Cell type.
    backgroundColor string Specifies the button background color of Custom Cell type.
    dataSourceRange string Specifies the dropdown list data source range of Custom Cell type.
    dataSourceSheetIndex number Specifies the dropdown list data source sheet index of Custom Cell type.
    field object Specifies the text and value of field in dropdown list.
    isChecked boolean Specifies the checkbox is set true or false of Custom Cell type.
    value string Specifies the datepicker of Custom Cell type.
    sheetIdx number Optional. Pass sheet index.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
     var customList = [{ id: "1", text: "ALFKI" }, { id: "2", text: "ANATR" }, { id: "3", text: "ANTON" }, { id: "4", text: "AROUT" }, { id: "5", text: "BERGS" }, { id: "6", text: "BLAUS" }];
    // To add button cell type in Spreadsheet.
    excelObj.XLCellType.addCellTypes("A1:B3", {"type" : ej.Spreadsheet.CustomCellType.Button, "text" : "Button1", "background-color" : "green" },  1);
    // To add dropdownlist cell type in spreadsheet.
    excelObj.XLCellType.addCellTypes("A1:B3", { 'type': ej.Spreadsheet.CustomCellType.DropDownList, 'dataSourceRange': 'A2:A23', 'dataSourceSheetIndex': 1 }, 2);
    // To add the dropdownlist with custom datasource in Spreadsheet.
     this.XLCellType.addCellTypes("A1:B3", { 'type': ej.Spreadsheet.CustomCellType.DropDownList, 'dataSource': customList, 'field': "text" });
    //To add checkbox cell type in spreadsheet.
    excelObj.XLCellType.addCellTypes("A1:B3", { 'type': ej.Spreadsheet.CustomCellType.CheckBox, isChecked:true});
    //To add date picker cell type in spreadsheet.
    xlObj.XLCellType.addCellTypes("B1", { 'type': ej.Spreadsheet.CustomCellType.DatePicker, 'value': '2/12/2016'});
    </script>

    CustomCellType

    Specifies the cell type in the Spreadsheet,

    Name Description
    Button To insert the Button in cell.
    CheckBox To insert the Checkbox in cell.
    DatePicker To insert the Datepicker in cell.
    DropDownList To insert the Dropdownlist in cell.

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To remove cell types in Spreadsheet.
    excelObj.XLCellType.removeCellTypes("A1:B2", 1);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To clear conditional formatting rules in Spreadsheet.
    excelObj.XLCFormat.clearCF([1, 0, 7, 0]);
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Gets the conditional formatting rules in Spreadsheet.
    excelObj.XLCFormat.getCFRule(2, 0);
    </script>

    XLCFormat.setCFRule(rule)

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

    Name Type Description
    rule Object Pass the Object "CFormatOptions"
    Name Type Description
    action string Pass the condition to set the conditional formatting
    color string Pass the color to set the conditional formatting
    inputs array|string Pass the inputs to set the conditional formatting
    bgColor string Pass the bgColor to set the conditional formatting
    range string Pass the range to set the conditional formatting

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sets the conditional formatting rules in Spreadsheet
    excelObj.XLCFormat.setCFRule({ action: "lessthan", inputs: ["30"], color: "yellowft", range: "H3:H7" });
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), chartId = "Spreadsheet_chart1"
    var theme = ej.datavisualization.Chart.Theme.Azuredark;
    excelObj.XLChart.changeTheme(chartId, theme); // To update chart theme.
    </script>

    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 Object ChartOptions.
    Name Type Description
    type string Pass the chart type
    enable3D boolean Pass the enable3D condition
    marker object Pass the marker object to change type

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), chartId = "Spreadsheet_chart1"
    excelObj.XLChart.changeType(chartId,{type: "radar", enable3D: false, marker: {visible: false}} ); // To change chart type.
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), chartId = "Spreadsheet_chart1";
    excelObj.XLChart.changeDataRange(chartId, "A2:A7", "A2:B5", "A1:B1"); // To change the data range of the chart.
    </script>

    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.Pass Object ChartOptions.
    Name Type Description
    type string Pass the chart type
    enable3D boolean Pass the enable3D condition
    marker object Pass the marker object to create chart

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLChart.createChart("A3:A7",{"type":"stackingcolumn100","enable3D":"true","marker":{"visible":false}}); // To create chart in Spreadsheet.
    </script>

    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
    Name Type Description
    type string Pass the chart type
    enable3D boolean Pass the enable3D condition
    marker object Pass the marker object

    Example

  • HTML
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLChart.refreshChart(id,{"type":"stackingcolumn100","enable3D":"true","marker":{"visible":false}}); // To refresh the chart in Spreadsheet
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLChart.resizeChart("Spreadsheet_chart1", 200, 300); // It is used to resize the chart in Spreadsheet.
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), chartId = "Spreadsheet_chart1", value = ej.Spreadsheet.ChartProperties.PrimaryHorizontal; 
    excelObj.XLChart.updateChartElement(chartId, value); // To update chart property.
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), chartId = "Spreadsheet_chart1";
    excelObj.XLChart.switchRowColumn(chartId);
    </script>

    XLClipboard

    XLClipboard.copy()

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

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To copy cells in a Spreadsheet.
    excelObj.XLClipboard.copy();
    </script>

    XLClipboard.cut()

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

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To cut cells in a Spreadsheet
    excelObj.XLClipboard.cut();
    </script>

    XLClipboard.paste()

    This method is used to paste the cut or copied cells data in the Spreadsheet.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To paste data in Spreadsheet
    excelObj.XLClipboard.paste();
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Sends a delete comment request to the Spreadsheet.
    excelObj.XLComment.deleteComment("A1:D3", 1, true);
    </script>

    XLComment.editComment([targetCell])

    This method is used to edit the comment in the target Cell in Spreadsheet.

    Name Type Description
    targetCell Object Optional. Pass Object CellIndex.
    Name Type Description
    rowIndex number Pass the row index of the cell which contains comment
    colIndex number Pass the col index of the cell which contains comment

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Sends an edit comment request to the Spreadsheet.
    excelObj.XLComment.editComment({rowIndex: 1, colIndex: 1});
    </script>

    XLComment.findNextComment()

    This method is used to find the next comment from the active cell in Spreadsheet.

    Returns:

    boolean

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Sends a find next comment request to the Spreadsheet.
    excelObj.XLComment.findNextComment();
    </script>

    XLComment.findPrevComment()

    This method is used to find the previous comment from the active cell in Spreadsheet.

    Returns:

    boolean

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Sends a find previous comment request to the Spreadsheet.
    excelObj.XLComment.findPrevComment();
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.getComment(excelObj.getCell(1, 5)); // Get the specified cell comment data.
    </script>
  • HTML
  • <script>
    // Get the specified cell comment data
    $("#Spreadsheet").ejSpreadsheet("getComment", excelObj.getCell(1, 5));        
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To set comment in Spreadsheet.
    excelObj.XLComment.setComment("A2", "Spreadsheet Comment!");
    </script>

    XLComment.showAllComments()

    This method is used to show all the comments in the Spreadsheet.

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Sends a show all comment request to the Spreadsheet.
    excelObj.XLComment.showAllComments();
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To show/hide comment request in Spreadsheet.
    excelObj.XLComment.showHideComment(excelObj.getCell(1, 5));
    </script>

    XLCMenu

    XLCMenu.addItem(target, itemColl, operation, itemIdx)

    This method is used to dynamically add items in the context menu.

    Name Type Description
    target enum 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
    itemIdx Number Specifies the item index

    Example

  • HTML
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To add an item in the context menu at last position.
    excelObj.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.Cell, [{"text":"Added item 1!!!", "url":"#", "id": "Added item1", "spriteCssClass": "e-icon e-ss-cut" }], 'insert'); 
    // To add an item in the context menu before the particular item index.
    excelObj.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.Cell, [{"text":"Added item 2!!!", "url":"#", "id": "Added item2", "spriteCssClass": "e-icon e-ss-copy" }], 'insertbefore', 2);
    // To add an item in the context menu after the particular item index.
    excelObj.XLCMenu.addItem(ej.Spreadsheet.ContextMenu.Cell, [{"text":"Added item 3!!!", "url":"#", "id": "Added item3", "spriteCssClass": "e-icon e-ss-paste" }], 'insertafter', 2);
    </script>

    ContextMenuType

    Specifies the Context Menu type in the Spreadsheet,

    Name Description
    Cell To specify cell Context Menu.
    RowHeader To specify row header Context Menu.
    ColumnHeader To specify column header Context Menu.
    Footer To specify footer 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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.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.
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLCMenu.disableItem(ej.Spreadsheet.ContextMenu.Cell, ["Cut", "Insert", "Copy"]); // To disable the item in the context menu.
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLCMenu.enableItem(ej.Spreadsheet.ContextMenu.Cell, ["Cut", "Insert", "Copy"]); // To enable the item in the context menu.
    </script>

    XLCMenu.hideItem(cMenuType, idxColl)

    This method is used to hide the items in the context menu.

    Name Type Description
    cMenuType string Specifies the context menu type in which the item to be hides.
    idxColl Array Specifies the Menu Item id collection to be hides

    Example

  • HTML
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLCMenu.hideItem(ej.Spreadsheet.ContextMenu.Cell, ["Cut", "Insert", "Copy"]); // To hide the item in the context menu.
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLCMenu.removeItem(ej.Spreadsheet.ContextMenu.Cell, ["Cut", "Insert", "Copy"]); // To remove the item in the context menu.
    </script>

    XLCMenu.showItem(cMenuType, idxColl)

    This method is used to show the items in the context menu.

    Name Type Description
    cMenuType string Specifies the context menu type in which the item to be shown.
    idxColl Array Specifies the Menu Item id collection to be shown

    Example

  • HTML
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLCMenu.showItem(ej.Spreadsheet.ContextMenu.Cell, ["Cut", "Insert", "Copy"]); // To show the item in the context menu.
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    var options = {sourcerange: [1,2,1,2], destinationrange: [1,3,1,6]}
    excelObj.XLDragDrop.moveRangeTo(options.sourcerange, options.destinationrange); // To perform drag and drop in Spreadsheet.
    </script>

    XLDragFill

    XLDragFill.autoFill(options)

    This method is used to perform auto fill in Spreadsheet.

    Name Type Description
    options Object Pass Object AutoFillObject.
    Name Type Description
    dataRange string Pass the data range to autofill
    direction string Pass the direction to autofill
    fillRange string Pass the fill range to autofill
    fillType string Pass the fill type to perform autofill in spreadsheet

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    var options = {dataRange: "A1:B1", direction: "right", fillRange:"A1:B2"}
    excelObj.XLDragFill.autoFill(options); // To perform autofill in Spreadsheet.
    </script>

    XLDragFill.hideAutoFillElement()

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

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To hide auto fill element in Spreadsheet
    excelObj.XLDragFill.hideAutoFillElement();
    </script>

    XLDragFill.hideAutoFillOptions()

    This method is used to hide the auto fill options in the Spreadsheet.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To hide auto fill element in Spreadsheet
    excelObj.XLDragFill.hideAutoFillOptions();
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLDragFill.positionAutoFillElement(false); // set position of the autofill element in Spreadsheet.
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLEdit.calcNow(1); // To calculate formulas in specified sheet in Spreadsheet.
    </script>

    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
  • <script>
    //initialize the Spreadsheet object.
    var spreadsheetObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Edit particular cell based on row index and column index.
    spreadsheetObj.XLEdit.editCell(1, 1, true);
    </script>
  • HTML
  • <script>
    // Edit particular cell based on row index and column index.
    $("#Spreadsheet").ejSpreadsheet("XLEdit").editCell(1, 1, true);
    </script>

    XLEdit.getColumnIndexByField(field)

    This method is used to get the column index with specified field value in Spreadsheet.

    Name Type Description
    field string Pass the column field value

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To get the column index
    excelObj.XLEdit.getColumnIndexByField("D");
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var ssObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Get the cell property value.
    excelObj.XLEdit.getPropertyValue(1, 1, "value", 1);
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Get the cell property value based on tag element.
    excelObj.XLEdit.getPropertyValueByElem(excelObj.getCell(1, 1), "value", 1);
    </script>

    XLEdit.saveCell()

    This method is used to save the edited cell value in the Spreadsheet.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Save the edited cell value
    excelObj.XLEdit.saveCell();
    </script>

    XLEdit.updateCell(cell, value)

    This method is used to update a particular cell value in the Spreadsheet.

    Name Type Description
    cell Object Pass Object CellIndex.
    Name Type Description
    rowIndex number Pass the row index
    colIndex number Pass the Column index
    value string|number Pass the cell value.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Update the specified values to a particular cell.
    excelObj.XLEdit.updateCell({rowIndex: 1, colIndex: 1}, "product");
    </script>

    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 Object CellIndex.
    Name Type Description
    rowIndex number Pass the row index
    colIndex number Pass the column index
    val string|number Pass the cell value.
    formatClass string Pass the class name to update format.
    sheetIdx number Pass sheet index.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), className;
    className = excelObj.XLFormat.getFormatHashCode({ color: "#FF0000" });
    // To update the specified values in a particular cell.
    excelObj.XLEdit.updateCellValue({rowIndex: 1, colIndex: 1}, "product", className, 1);
    </script>

    XLEdit.updateValue(aRange, val, formatClass, sheetIdx)

    This method is used to update a particular cell value and its format in the Spreadsheet.

    Name Type Description
    aRange string Pass the range.
    val string|number Pass the cell value.
    formatClass string Pass the class name to update format.
    sheetIdx number Pass sheet index.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), className;
    className = excelObj.XLFormat.getFormatHashCode({ color: "#FF0000" });
    // To update the specified values in a particular cell.
    excelObj.XLEdit.updateValue("A1", "product", className, 1);
    </script>

    XLExport

    XLExport.export(type, fileName)

    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.
    fileName enum Pass the export filename that you want.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To save the worksheet on Excel format.
    excelObj.XLExport.export("Excel", "sample");
    </script>

    ExportType

    Specifies the export type in the Spreadsheet,

    Name Description
    Excel Specifies to export the file in Excel format.
    Csv Specifies to export the file in Csv format.
    Pdf Specifies to export the file in Pdf format.

    XLExport.getExportProps()

    This method is used to get the export properties in the Spreadsheet.

    Returns:

    Object

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLExport.getExportProps(); // Gets export properties in Spreadsheet.
    </script>
  • HTML
  • <script>
    // Gets export properties in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("getExportProps");        
    </script>

    XLFilter

    XLFilter.clearFilter()

    This method is used to clear the filter in filtered columns in the Spreadsheet.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Clear filter for columns in the sheet.
    excelObj.XLFilter.clearFilter();
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To apply filter for specified range of cells.
    excelObj.XLFilter.filter("A3:C8");
    </script>

    XLFilter.filterByActiveCell()

    This method is used to apply filter for the column by active cell’s value in the Spreadsheet.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Apply filter for columns with active cell in the sheet.
    excelObj.XLFilter.filterByActiveCell();
    </script>

    XLFormat

    XLFormat.addCustomFormatSpecifier(name, formatSpecifier, type)

    This method is used to add the custom Date & Time format and recognize it as a preferred pattern in spreadsheet.

    Name Type Description
    name string Pass the name for custom format.
    formatSpecifier string Pass the custom format string.
    type string Pass the type for custom format.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.addCustomFormatSpecifier("formatStr","dd/MM/yyyy", ej.Spreadsheet.CellType.Date) // To add the custom date format in spreadsheet
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.addFontFamily("Gisha"); // To add the font name into font family option.
    </script>

    XLFormat.addNewCustomStyle(styleName, options)

    This method is used to add the new custom cell style in spreadsheet.

    Name Type Description
    styleName string Pass the style name.
    options Object Pass Object NumberFormatOptions.
    Name Type Description
    NumFormat object Pass the number format object
    style object Pass the style object

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To add the new custom cell style
    excelObj.XLFormat.addNewCustomStyle("StyleName",{NumFormat:{type: "currency", decimalPlaces: 4, thousandSeparator: false, formatStr: "{0:C4}"},style:{"background-color": "#cccbcb", color: "#f16667", "font-family": "Arial", "font-size": "16pt", "font-style": "normal", "font-weight": "Bold","text-decoration": "line-through"}})
    </script>

    XLFormat.applyCustomCellStyle(styleName, range)

    This method is used to apply the custom cell style in the specified range.

    Name Type Description
    styleName string Pass the style name.
    range String Pass the range to applied.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To apply the custom cell style to specified range
    excelObj.XLFormat.applyCustomCellStyle("StyleName","A1:B4");
    </script>

    XLFormat.convertToRange(options)

    This method is used to convert table range to normal range.

    Name Type Description
    options Object Pass Object TableIDOptions.
    Name Type Description
    sheetIdx number Pass the sheet index
    tableId number Pass the table id

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.convertToRange({sheetIdx: 1, tableId: 1}); // To convert table range to normal range.
    </script>

    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 Object TableOptions.
    Name Type Description
    header boolean Pass the header boolean condition of table
    name string Pass the name of the table
    formatName string Pass the format name of table
    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
  • <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), tableObj;
    tableObj = { header: true, name: "Table1", formatName: "TableStyleLight1"};
    // Sends a create table request to the Spreadsheet
    excelObj.XLFormat.createTable(tableObj, "A1:C6");
    </script>

    XLFormat.deleteCustomStyle(styleName)

    This method is used to delete the added custom cell style in spreadsheet.

    Name Type Description
    styleName String Pass the cell style name

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.deleteCustomStyle("StyleName") // To delete the custom cell style.
    </script>

    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 Object FormatObjectOptions.
    Name Type Description
    style object Pass the style object in a cell
    type string Pass the type of cell
    thousandSeparator string Pass the thousand separator in cell
    decimalPlaces string Pass the decimal places in cell
    formatStr string Pass the format str in cell
    range string Pass the range to format cells.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sends a format request to the Spreadsheet.
    excelObj.XLFormat.format({style:{ "background-color": "#C0C0C0"}}, "A1:C10");
    //Default Number format - decimal places is 2.
    excelObj.XLFormat.format({ "type": "number" }, "B1");
    //Number format with 3 decimal places by default thousandseparator as true.
    excelObj.XLFormat.format({ "type": "number", "decimalPlaces": 3, "thousandSeparator": false }, "B3");
    //Currency format with formatStr property.
    excelObj.XLFormat.format({ "type": "currency", "formatStr":"{0:C3}" }, "B1");
    //Accounting format with formatStr property.
    excelObj.XLFormat.format({ "type": "accounting", "formatStr":"{0:C2}" }, "A1");
    //Percentage format with formatStr property.
    excelObj.XLFormat.format({ "type": "percentage", "formatStr":"{0:P2}" }, "B1");
    //Short date format with formatStr property.
    excelObj.XLFormat.format({ "type": "shortdate", "formatStr":"{0:MM/dd/yyyy}" }, "C1");
    excelObj.XLFormat.format({ "type": "longdate" }, "D1");
    //Time format with formatStr property.
    excelObj.XLFormat.format({ "type": "time", "formatStr":"{0:hh:mm:ss tt}" }, "E1");
    excelObj.XLFormat.format({ "type": "scientific" }, "F1");
    excelObj.XLFormat.format({ "type": "fraction" }, "G1");
    </script>

    XLFormat.getBorderFromHashCode(code, isComplete)

    This method is used to get the border from hashcode in the Spreadsheet.

    Name Type Description
    code String Pass the border hashcode.
    isComplete boolean Optional. pass `true` to get the complete border object

    Returns:

    Object

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To get the border object from the Spreadsheet
    excelObj.XLFormat.getBorderFromHashCode("e-border1N1N6N1N1N6N210000001N1N6N",true);
    </script>

    XLFormat.getFormatClass(classname, isborder)

    This method is used to get the format class in spreadsheet.

    Name Type Description
    classname string Pass the style name.
    isborder boolean Optional. Pass true to get the border class.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.getFormatClass(excelObj.getCell(1,1)[0].className);// to get the format class
    </script>

    XLFormat.getFormatFromHashCode(hashCode)

    This method is used to get the format from the given hashcode in spreadsheet.

    Name Type Description
    hashCode String Pass the hashcode.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.getFormatFromHashCode(excelObj.XLFormat.getFormatClass(excelObj.getCell(1,1)[0].className)); // To get the format from the given hashcode
    </script>

    XLFormat.getFormatHashCode(style)

    This method is used to get the hashcode from the given style object in spreadsheet.

    Name Type Description
    style Object Pass Object FontOptions.
    Name Type Description
    fontFamily object Pass the font family
    fontWeight string Pass the font weight
    fontStyle string Pass the font style
    fontSize string Pass the font size
    color string Pass the color
    textDecoration string Pass the text decoration

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.getFormatHashCode({"font-family": "Arial Black", "font-weight": "normal", "font-style": "Italic", "font-size": "9pt", "text-decoration": "line-through",color:"#FFFF00"}); // To get the hashcode from the given style object
    </script>

    XLFormat.getHashCodeClassAsArray(range)

    This method is used to get the format as array from the given specified range in spreadsheet.

    Name Type Description
    range String Pass the range.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.getHashCodeClassAsArray("A1:B4"); // To get the format as an array from the given range.
    </script>

    XLFormat.modifyCustomStyle(oldStyleName, options, newStyleName)

    This method is used to modify the added custom cell style in spreadsheet.

    Name Type Description
    oldStyleName string pass the old style name
    options Object Pass Object CustomStyleOptions.
    Name Type Description
    style object Pass the style object
    NumFormat object Pass the number format object
    newStyleName string pass the new style name

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.modifyCustomStyle("NewStyle",{ NumFormat: {type: "currency", decimalPlaces: 4, thousandSeparator: false, formatStr: "{0:C4}"},style:{color: "#f16667", "font-family": "Arial", "font-size": "16pt", "font-weight": "Bold"}},"StyleName")); // To modify the custom cell style.
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLFormat.removeFontFamily("Gisha"); // To remove the name from the font family drop down.
    </script>

    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 Object FormatOptions.
    Name Type Description
    cellStyle boolean Pass the cell style to be removed
    tableStyle boolean Pass the table style to be removed
    format boolean Pass the format
    border boolean Pass the border condition

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sends a remove style request to the Spreadsheet.
    excelObj.XLFormat.removeStyle("E4:F13",{ cellStyle: true, tableStyle: true, format: true, border: true }); 
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sends a remove table request to the Spreadsheet.
    excelObj.XLFormat.removeTable(1);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To update decimal place value in the range of cells in the Spreadsheet.
    excelObj.XLFormat.updateDecimalPlaces("IncreaseDecimal", "A1:C3");
    </script>

    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 Object BorderOptions.
    Name Type Description
    format Object Pass the format object of selected range of cells
    leftBorder string Pass the left border
    topBorder string Pass the top border
    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
  • <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), formatObj;
    formatObj = { format: ["e-formatFFFF006N2N2N1N1N1N1N2N1N", "", "e-formatFFFF006N2N2N1N1N1N1N2N1N"], leftborder: ["","",""], topborder: ["e-border1N1N6N1N1N6NS1N1N6N11000000"]};
    // To update a format in the specified range of cells.
    excelObj.XLFormat.updateFormat(formatObj, [1, 0, 3, 0]);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To update the unique format.
    excelObj.XLFormat.updateUniqueFormat("e-formatFFFF006N2N2N251N1N2N", [1, 0, 4, 0]);
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    //Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Freeze a column in the sheet.
    excelObj.XLFreeze.freezeColumns(2);
    </script>

    XLFreeze.freezeLeftColumn()

    This method is used to freeze the first column in the Spreadsheet.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Freeze the first column in the sheet.
    excelObj.XLFreeze.freezeLeftColumn();
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Freeze some rows and columns in the sheet.
    excelObj.XLFreeze.freezePanes(2, 3);
    </script>

    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
  • <script>
    //initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Freeze a row in the sheet.
    excelObj.XLFreeze.freezeRows(2);
    </script>

    XLFreeze.freezeTopRow()

    This method is used to freeze the top row in the Spreadsheet.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Freeze the top row in the sheet.
    excelObj.XLFreeze.freezeTopRow();
    </script>

    XLFreeze.unfreezePanes()

    This method is used to unfreeze the frozen rows and columns in the Spreadsheet.

    Example

  • HTML
  • <script>
    //Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To unfreeze the frozen rows and columns in the sheet.
    excelObj.XLFreeze.unfreezePanes();
    </script>

    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
  • <script>
    // Create Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLPivot.clearPivotFieldList("name"); // Sends a clear pivot field list request to the Spreadsheet.
    </script>

    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 Object PivotOptions.
    Name Type Description
    rows object Pass the rows object to create pivot table
    columns object Pass the column object to create pivot table
    values object Pass the values to create pivot table
    filter object Pass the filter object to create pivot table
    pvt Object Pass the pivot range, sheet index, address and data source .

    Returns:

    string

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // create a pivot table in the sheet.
    var settings = {
                     rows: [ {fieldName: "Country",},{fieldName: "State",}],
                     columns: [{fieldName: "Product",}],
                     values: [{fieldName: "Amount", },{fieldName: "Quantity", } ],
                     filters: [ {fieldName: "Date", }] };
    excelObj.XLPivot.createPivotTable("Sheet1!$A$1:$F$25","Sheet1!$A$1", null, settings);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Delete pivot table in the sheet.
    excelObj.XLPivot.deletePivotTable("name");
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLPivot.refreshDataSource(); // Sends a refresh data source request to the Spreadsheet.
    </script>

    XLPrint

    XLPrint.printSelection()

    This method is used to print the selected contents in the Spreadsheet.

    Example

  • HTML
  • <script>
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Print the selected area in the sheet.
    excelObj.XLPrint.printSelection();
    </script>

    XLPrint.printSheet()

    This method is used to print the entire contents in the active sheet.

    Example

  • HTML
  • <script>
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //Sends a print entire sheet request to the Spreadsheet.
    excelObj.XLPrint.printSheet();
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To fit the height of the rows in Spreadsheet.
    excelObj.XLResize.fitHeight([2,3,4,5])
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To fit the width of the columns in Spreadsheet.
    excelObj.XLResize.fitWidth([2,3,4,5])
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Gets the particular column width in Spreadsheet.
    excelObj.XLResize.getColWidth(2);
    </script>

    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
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Gets the particular row height in Spreadsheet.
    excelObj.XLResize.getRowHeight(2);
    </script>
  • HTML
  • <script>
    // Gets the particular row height in Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet("XLResize.getRowHeight",2);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sets the column width in the Spreadsheet.
    excelObj.XLResize.setColWidth(2, 100);
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // Sets the row height in Spreadsheet.
    excelObj.XLResize.setRowHeight(2, 100);
    </script>

    XLRibbon

    XLRibbon.addBackStageItem(pageItem, index)

    This method is used to add a new item in the backstage.

    Name Type Description
    pageItem Object Pass Object BackstageOptions.
    Name Type Description
    id string Pass the id to added in backstage
    text string Pass the text to added in backstage
    itemType element Pass the item type to added in backstage
    index number pass the index of the item to be added in the backstage.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    var addBackStage = {   id: "File", text: "File", itemType: ej.Ribbon.ItemType.Tab};
    excelObj.XLRibbon.addBackStageItem(addBackStage, 1); // To add a item in the backstage.
    </script>

    XLRibbon.addContextualTabs(contextualTabSet, index)

    This method is used to dynamically add the contextual tabs in the ribbon.

    Name Type Description
    contextualTabSet Object Pass Object ContextualTabOptions.
    Name Type Description
    backgroundColor string Pass the background color
    borderColor string Pass the border color
    tabs object Pass the tabs object to add in ribbon
    index number pass the index of the contextual tab.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    var cTab = { backgroundColor: "#FCFBEB", borderColor: "#F2CC1C", tabs: [{id: "Design", text: "DESIGN",groups: [{ text: "Table Style",type: "custom", contentID: "design" }]}] };
    excelObj.XLRibbon.addContextualTabs(cTab, 7); // To add a contextual tab in the ribbon.
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.addMenuItem([{ id: "SignIn1", text: "AddMenuItem", parentId: "FILE", spriteCssClass: "e-icon e-ssr-cut" }], 2); // To add the menu item in the ribbon.
    </script>

    XLRibbon.addNamedRange(name, refersTo, [comment], [sheetIdx], [scope])

    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.
    scope string Optional. Pass the scope of the name manager.

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To define new name in the Spreadsheet.
    excelObj.XLRibbon.addNamedRange("PRICE_LIST", "=Sheet1!$A$2:$A$7", "Month_Wise", 1, "Sheet1");
    </script>

    XLRibbon.addTab(tabText, ribbonGroups, index)

    This method is used to dynamically add the tab in the ribbon.

    Name Type Description
    tabText string Specifies the text to be displayed in the tab.
    ribbonGroups Array pass the groups to be displayed in the ribbon tab.
    index number pass the index of the tab.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    var 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} }] }];
    excelObj.XLRibbon.addTab("Tab2", tabGroup, 2); // To add the tab in the ribbon.
    </script>

    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 Object TabOptions.
    Name Type Description
    text string Pass the text to displayed in ribbon tab
    alignType element Pass the align type
    contents object Pass the content object to be displayed in ribbon tab
    defaults object Pass the defaults object to be displayed in ribbon tab
    groupIndex number pass the index of the ribbon group.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    var 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 } }] };
    excelObj.XLRibbon.addTabGroup(1, ribbonGrp, 0); // To add the tab group in the ribbon.
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.autoSum("SUM", "A2:A6"); // To insert the formula after selected range of cells in Spreadsheet.
    </script>

    XLRibbon.changeDimension(options)

    This method is used to change the dimensions for chart/picture.

    Name Type Description
    options Object Pass Object ShapeOptions.
    Name Type Description
    id string Pass the id to change the dimension
    width number Pass the width to change the dimension
    height number Pass the height to change the dimension
    shapeType string Pass the shape type to change the dimension

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To change chart/picture dimensions.
    excelObj.XLRibbon.changeDimension({id:"Spreadsheet_chart1" , width: 330, height: 500, shapeType: "chart"}); 
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.disableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]); // To disable ribbon items.
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.enableRibbonItems(["Spreadsheet_Ribbon_Insert_Illustrations_Pictures"]); // To enable ribbon items.
    </script>

    XLRibbon.hideMenu()

    This method is used to hide the file menu in the ribbon tab.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.hideMenu(); // To hide the file menu option in the Spreadsheet.
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.removeBackStageItem(2); // To remove the item in the backstage.
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.removeMenuItem(2); // To remove the item in the file menu.
    </script>

    XLRibbon.removeNamedRange(name, [scope])

    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.
    scope string Optional. Pass the scope of the name manager.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To remove the define name in Spreadsheet name manager.
    excelObj.XLRibbon.removeNamedRange("PRICE_LIST","Sheet1");
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.removeTab(2, true) // To remove the tab from the ribbon.
    </script>

    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
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.removeTabGroup(1,"Clipboard"); // To remove the tab group from the ribbon.
    </script>

    XLRibbon.showMenu()

    This method is used to show the file menu in the ribbon tab.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.showMenu(); // To show the file menu option in the Spreadsheet.
    </script>

    XLRibbon.updateMenuItem(item, index)

    This method is used to update the menu item in the file menu.

    Name Type Description
    item Object Pass Object MenuItemOptions.
    Name Type Description
    id string Pass the id to update the menu item
    text string Pass the text to update the menu item
    parentId string Pass the parent id to update the menu item
    spriteCssClass string Pass the sprite css class to update the menu item
    index number pass the index of the item to be updated

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLRibbon.updateMenuItem([{ id: "SignIn1", text: "AddMenuItem", parentId: "FILE", spriteCssClass: "e-icon e-ssr-cut"}], 3); // To update the menu item in the file menu
    </script>

    XLRibbon.updateRibbonIcons()

    This method is used to update the ribbon icons in the Spreadsheet.

    Example

  • HTML
  • <script>
    //initialize the Spreadsheet object
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To update the ribbon icons in the spreadsheet based on the active sheet index.
    excelObj.XLRibbon.updateRibbonIcons();
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To scroll the sheet to the specified cell address.
    excelObj.XLScroll.scrollToCell("A30");
    </script>

    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 Object SearchOptions.
    Name Type Description
    isCSen boolean Pass the condition to find previous
    isEMatch boolean Pass the condition to find previous
    type string Pass the type to find previous
    mode string Pass the mode to find previous
    searchBy string Pass the search by to find previous
    sIndex number Pass the sheet index.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To find the next occurrence of given value.
    excelObj.XLSearch.findNext("g", {isCSen: false, isEMatch: false, type: "value", mode: "sheet", searchBy: "rows"}, 1); 
    </script>

    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 Object SearchOptions.
    Name Type Description
    isCSen boolean Pass the condition to find previous
    isEMatch boolean Pass the condition to find previous
    type string Pass the type to find previous
    mode string Pass the mode to find previous
    searchBy string Pass the search by to find previous
    sIndex number Pass the sheet index.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
     // To find the previous occurrence of given value.
    excelObj.XLSearch.findPrevious("g", {isCSen: true, isEMatch: false, type: "value", mode: "sheet", searchBy: "columns"}, 1);
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSearch.goTo("L4"); // To perform goto operation.
    </script>

    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 Object GotoOptions.
    Name Type Description
    isNumber boolean Pass the isNumber condition to perform goto special
    isText boolean Pass the isText condition to perform goto special
    isLogical boolean Pass the isLogical condition to perform goto special
    isError boolean Pass the isError condition to perform goto special

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To perform goto special operation.
    excelObj.XLSearch.goToSpecial("comments",{isNumber:true, isText:true, isLogical:true, isError: true}); 
    </script>

    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
  • <script>
    // initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSearch.replaceAllByBook("Sheet", "Spreadsheet", true, false); // Sends a replace all by workbook request to the Spreadsheet.
    </script>

    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
  • <script>
    // initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSearch.replaceAllBySheet("Sheet", "Spreadsheet", true, false); // Sends a replace all by sheet request to Spreadsheet
    </script>

    XLSelection

    XLSelection.clearAll()

    This method is used to clear the selection of the active sheet in the Spreadsheet.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSelection.clearAll(); // To clear selection.
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSelection.getSelectedCells(1); //Gets the selected cells element.
    </script>

    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
  • <script>
    //initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To defined refresh selection in Spreadsheet.
    excelObj.XLSelection.refreshSelection("A1:D3");
    </script>

    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
  • <script>
    // initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSelection.selectColumn(1); //To select a single column in the active sheet.
    </script>

    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
  • <script>
    // initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSelection.selectColumns(2, 4); //To select entire columns in the specified range.
    </script>

    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
  • <script>
    // initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSelection.selectRange("A1:B2"); //To select range of cells in Spreadsheet.
    </script>

    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
  • <script>
    // initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSelection.selectRow(1); //To select a single row in the specified sheet index in Spreadsheet.
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSelection.selectRows(2, 4); //To select entire rows in the specified range.
    </script>

    XLSelection.selectSheet()

    This method is used to select all cells in active sheet.

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLSelection.selectSheet(); //To select all cells in a sheet
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLShape.changePicture('Spreadsheet_picture1', "img.png"); // To change the picture.
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To change the border of the picture.
    excelObj.XLShape.changePictureBorder("Spreadsheet_picture1", "1px", "solid", "#89c987"); 
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet"), pictureId = "Spreadsheet_picture1";
    excelObj.XLShape.resetPicture(pictureId, "resetSize"); // To reset the picture.
    </script>

    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
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To set the picture in the Spreadsheet.
    excelObj.XLShape.setPicture('D4', "../images/spreadsheet/ladybug.png", 538, 319);
    </script>

    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 Object ColorOptions.
    Name Type Description
    backgroundColor string Pass the background color to sort the cell
    color string Pass the color to sort the cell
    range string Pass the range

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To sort range based on cell color in the Spreadsheet.
    excelObj.XLSort.sortByColor("PutCellColor", {"background-color" : "#EC2024", color:  "#6N2N2N"}, "D2:D8"); </script>

    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 string Pass the direction to sort

    Returns:

    boolean

    Example

  • HTML
  • <script>
    // Initialize Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    //To sort the cell value in a specified range in the Spreadsheet.
    excelObj.XLSort.sortByRange("A1:D3", "B",  "ascending"); 
    </script>

    XLSparkline

    XLSparkline.createSparkline(dataRange, locationRange, type, options, [sheetIndex])

    This method used for creating the sparkline chart for specified range in spreadsheet.

    Name Type Description
    dataRange String Pass the data range
    locationRange String Pass the location range
    type String Pass the sparkline chart type
    options Object Pass Object SparklineOptions.
    Name Type Description
    markerSettings object Pass the marker settings object to create sparkline
    highPointColor string Pass the high point color to create sparkline
    negativePointColor string Pass the negative point color to create sparkline
    startPointColor string Pass the start point color to create sparkline
    sheetIndex Number Pass the sheetIndex

    Example

  • HTML
  • <script>
    
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To create the sparkline chart
    excelObj.XLSparkline.createSparkline("C3:C5", "F10",  "Line", {markerSettings:{visible:true},highPointColor: "red", negativePointColor: "black", startPointColor: "green"} ); // To create sparkline in Spreadsheet.
    
    </script>

    XLSparkline.changePointColor(sparklineId, option, [sheetIdx])

    This method used to change the sparkline color and marker point color in the spreadsheet.

    Name Type Description
    sparklineId String Pass the sparkline ID
    option Object pass the high point color as object.
    sheetIdx Number Optional. Pass the sheet index

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To change the sparkline color and marker color 
    excelObj.XLSparkline.changePointColor("Spreadsheet_S1_Column_2_6", {highPointColor: "red"});
    </script>

    XLSparkline.changeType(sparklineId, type, [sheetIdx])

    This method used to change the sparkline type in the spreadsheet.

    Name Type Description
    sparklineId String Pass the sparkline ID
    type string Pass the sparkline type
    sheetIdx Number Optional. Pass the sheet index

    Example

  • HTML
  • <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To change the sparkline chart type
    excelObj.XLSparkline.changeType("Spreadsheet_S1_Column_2_6", "Line");
    </script>

    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
  • <script>
    //Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To apply validation rule to allow whole number between 15 and 20.
    excelObj.XLValidate.applyDVRules("A1:D3", ["Between", "15", "20"], "number" ,true, true);
    </script>

    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
  • <script>
    // Initialize the Spreadsheet object.
    var spreadsheetObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To clear validation rules in selected cells.
    spreadsheetObj.XLValidate.clearDV("A2:A7");
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    // Initialize the Spreadsheet object.
    var excelObj = $("#Spreadsheet").data("ejSpreadsheet");
    excelObj.XLValidate.clearHighlightedValData("A1:K15"); // To clear highlighted data.
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    //initialize the Spreadsheet object
    var spreadsheetObj = $("#Spreadsheet").data("ejSpreadsheet");
    // To highlight invalid cell data
    spreadsheetObj.XLValidate.highlightInvalidData("A2:A7");
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    //actionBegin event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        actionBegin: function (args){}
    });
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    //actionComplete event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        actionComplete: function (args){}
    });
    </script>

    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
  • <div id="Spreadsheet"></div>
    <script>
    //autoFillBegin event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        autoFillBegin: function (args){}
    });
    </script>

    autoFillComplete

    Triggered when the auto fill operation completes.

    Name Type Description
    argument Object Arguments when autoFillComplete event is triggered.
    Name Type Description
    dataRange Array Returns auto fill begin cell range.
    direction string Returns which direction to drag the auto fill.
    fillRange Array Returns fill cells range.
    fillType string Returns the auto fill type.
    sheetIdx number Returns the sheet index.
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    //autoFillComplete event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        autoFillComplete: function (args){}
    });
    </script>

    beforeBatchSave

    Triggered before the batch save.

    Name Type Description
    argument Object Arguments when beforeBatchSave event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    dataSetting Object Returns the query, primary key,batch changes for the data Source.
    batchChanges Object Returns the changed record object.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    //beforeBatchSave event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        beforeBatchSave: function (args){}
    });
    </script>

    beforeCellFormat

    Triggered before the cells to be formatted.

    Name Type Description
    argument Object Arguments when beforeCellFormat event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    format Object Returns the applied style format object.
    cells Array|Object Returns the selected cells.
    model Object Returns the Spreadsheet model.
    cancel boolean Returns the cancel option value.
    type string Returns the name of the event.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    //beforeCellFormat event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        beforeCellFormat: function (args){}
    });
    </script>

    beforeCellSelect

    Triggered before the cell selection.

    Name Type Description
    argument Object Arguments when beforeCellSelect event is triggered.
    Name Type Description
    prevRange Array Returns the previous cell range.
    currRange Array Returns the current cell range.
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // beforeCellSelect event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({   
        beforeCellSelect: function (args){}
    });
    </script>

    beforeDrop

    Triggered before the selected cells are dropped.

    Name Type Description
    argument Object Arguments when beforeDrop event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    currentCell Object Returns the current cell row and column index.
    dragAndDropRange Object Returns the drag cells range object.
    preventAlert boolean Returns the cell Overwriting alert option value.
    model Object Returns the Spreadsheet model.
    target Element Returns the target item.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    //beforeDrop event for Spreadsheet.
    $("#Spreadsheet").ejSpreadsheet({
        beforeDrop: function (args){}
    });
    </script>

    beforeEditComment

    Triggered while start to edit the comment.

    Name Type Description
    argument Object Arguments when beforeEditComment event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    cellIndex Object Returns the comment cell index.
    disable boolean Returns the disable option value.
    model Object Returns the Spreadsheet model.
    value string Returns the value of the comment
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // beforeEditComment event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({   
        beforeEditComment: function (args){}
    });
    </script>

    beforeOpen

    Triggered before the contextmenu is open.

    Name Type Description
    argument Object Arguments when beforeOpen event is triggered.
    Name Type Description
    target Element Returns the target element.
    type string Returns the name of the event.
    model Object Returns the Spreadsheet model.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //beforeOpen event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        beforeOpen: function (args){}
    });
    </script>

    beforePanelOpen

    Triggered before the activation panel is open.

    Name Type Description
    argument Object Arguments when beforePanelOpen event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    activationPanel Object Returns the activation panel element.
    range Object Returns the range option value.
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // beforePanelOpen event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        beforePanelOpen: function (args){}
    });
    </script>

    cellClick

    Triggered when click on sheet cell.

    Name Type Description
    argument Object Arguments when cellClick event is triggered.
    Name Type Description
    cell Element Returns the click cell element.
    columnIndex number Returns the column index of clicked cell.
    rowIndex number Returns the row index of clicked cell.
    columnName string Returns the column name of clicked cell.
    columnObject Object Returns the column information.
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    target Element Returns the target element.
    value string Returns the value of the cell.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //cellClick event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        cellClick: function (args){}
    });
    </script>

    cellEdit

    Triggered when the cell is edited.

    Name Type Description
    argument Object Arguments when cellEdit event is triggered.
    Name Type Description
    cell Element Returns the click cell element.
    columnName string Returns the columnName of clicked cell.
    columnObject Object Returns the column field information.
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    target Element Returns the target element.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //cellEdit event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        cellEdit: function (args){}
    });
    </script>

    cellFormatting

    Triggered while cell is formatting.

    Name Type Description
    argument Object Arguments when cellFormatting event is triggered.
    Name Type Description
    SheetIdx number Returns the sheet index
    Format Object Returns the applied style format object
    Cell number Returns the cell index.
    cssClass string Returns the name of the CSS theme.
    type string Returns the name of the event.
    target Element Returns the target element.
    model Object Returns the Spreadsheet model.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //cellFormatting event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        cellFormatting: function (args){}
    });
    </script>

    cellHover

    Triggered when mouse hover on cell in sheets.

    Name Type Description
    argument Object Arguments when cellHover event is triggered.
    Name Type Description
    target Element Returns the target element.
    type string Returns the name of the event.
    model Object Returns the Spreadsheet model.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // cellHover event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        cellHover: function (args){}
    });
    </script>

    cellSave

    Triggered when save the edited cell.

    Name Type Description
    argument Object Arguments when cellSave event is triggered.
    Name Type Description
    cell Element Returns the save cell element.
    columnName string Returns the columnName of clicked cell.
    columnObject Object Returns the column field information.
    rowIndex number Returns the index of the row.
    colIndex number Returns the index of the column.
    model Object Returns the Spreadsheet model.
    prevValue string Returns the cell previous value.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.
    target Element Returns the target element.
    value string Returns the cell value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //cellSave event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        cellSave: function (args){}
    });
    </script>

    cellSelected

    Triggered when the cell is selected.

    Name Type Description
    argument Object Arguments when cellSelected event is triggered.
    Name Type Description
    sheetIdx number Returns the active sheet index.
    selectedRange Array Returns the selected range.
    target Element Returns the target element.
    model Object Returns Spreadsheet model.
    type string Returns the name of the event.
    target Element Returns the target element.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //cellSelected event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        cellSelected: function (args){}
     });
     </script>

    contextMenuClick

    Triggered when click the contextmenu items.

    Name Type Description
    argument Object Arguments when contextMenuClick event is triggered.
    Name Type Description
    Id string Returns target element Id.
    element Element Returns the target element.
    event Object Returns event information.
    events Object Returns target element and event information.
    model Object Returns the Spreadsheet model.
    parentId string Returns target element parent Id.
    parentText string Returns target element parent text.
    text string Returns target element text.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // contextMenuClick event for Spreadsheet.
    $('#Spreadsheet').ejSpreadsheet({ 
        contextMenuClick: function (args){}
    });
    </script>

    drag

    Triggered when the selected cells are being dragged.

    Name Type Description
    argument Object Arguments when drag event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    currentCell Object Returns the current cell row and column index.
    dragAndDropRange Object Returns the drag cells range object.
    model Object Returns the Spreadsheet model.
    target Element Returns the target item.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    //drag event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        drag: function (args){}
    });
    </script>

    dragShape

    Triggered when you start to drag the picture or chart.

    Name Type Description
    argument Object Arguments when dragShape event is triggered.
    Name Type Description
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    target element Returns the target element.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // dragShape event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({   
        dragShape: function (args){}
    });
    </script>

    dragStart

    Triggered when the selected cells are initiated to drag.

    Name Type Description
    argument Object Arguments when dragStart event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    currentCell Object Returns the current cell row and column index.
    dragAndDropRange Object Returns the drag cells range object.
    model Object Returns the Spreadsheet model.
    target Element Returns the target item.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    //dragStart event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        dragStart: function (args){}
    });
    </script>

    drop

    Triggered when the selected cells are dropped.

    Name Type Description
    argument Object Arguments when drop event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    currentCell Object Returns the current cell row and column index.
    dragAndDropRange Object Returns the drag cells range object.
    model Object Returns the Spreadsheet model.
    target Element Returns the target item.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    //drop event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
        drop: function (args){}
    });
    </script>

    editRangeBegin

    Triggered before the range editing starts.

    Name Type Description
    argument Object Arguments when editRangeBegin event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    model Object Returns the Spreadsheet model.
    range Object Returns the range option value.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // editRangeBegin event for Spreadsheet.
    $('#Spreadsheet').ejSpreadsheet({ 
        editRangeBegin: function (args){}
    });
    </script>

    editRangeComplete

    Triggered after range editing completes.

    Name Type Description
    argument Object Arguments when editRangeComplete event is triggered.
    Name Type Description
    sheetIdx number Returns the sheet index.
    model Object Returns the Spreadsheet model.
    range Object Returns the range option value.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // editRangeComplete event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        editRangeComplete: function (args){}
    });
    </script>

    keyDown

    Triggered when the key is pressed down.

    Name Type Description
    argument Object Arguments when keyDown event is triggered.
    Name Type Description
    sheetIndex number Returns the sheet index.
    model Object Returns the Spreadsheet model.
    isCommentEdit boolean Returns the boolean value.
    isEdit boolean Returns the boolean value.
    isSheetRename boolean Returns the boolean value.
    target Element Returns the target element.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // keyDown event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        keyDown: function (args){}
    });
    </script>

    keyUp

    Triggered when the key is released.

    Name Type Description
    argument Object Arguments when keyUp event is triggered.
    Name Type Description
    sheetIndex number Returns the sheet index.
    model Object Returns the Spreadsheet model.
    isCommentEdit boolean Returns the boolean value.
    isEdit boolean Returns the boolean value.
    isSheetRename boolean Returns the boolean value.
    target Element Returns the target element.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // keyUp event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        keyUp: function (args){}
    });
    </script>

    load

    Triggered before the sheet is loaded.

    Name Type Description
    argument Object Arguments when load event is triggered.
    Name Type Description
    type string Returns the name of the event.
    model Object Returns the Spreadsheet model.
    cancel boolean Returns the cancel option value.
    sheetIndex number Returns the active sheet index.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //load event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        load: function (args){}
    });
    </script>

    loadComplete

    Triggered after the sheet is loaded.

    Name Type Description
    argument Object Arguments when loadComplete event is triggered.
    Name Type Description
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // loadComplete event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        loadComplete: function (args){}
    });
    </script>

    menuClick

    Triggered every click of the menu item.

    Name Type Description
    argument Object Arguments when menuClick event is triggered.
    Name Type Description
    element Element Returns menu click element.
    event Object Returns the event information.
    model Object Returns the Spreadsheet model.
    parentId string Returns target element parent Id.
    parentText string Returns target element parent text.
    text string Returns target element text.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // menuClick event for Spreadsheet.
    $('#Spreadsheet').ejSpreadsheet({ 
        menuClick: function (args){}
    });
    </script>

    onImport

    Triggered when a file is imported.

    Name Type Description
    argument Object Arguments when onImport event is triggered.
    Name Type Description
    type string Returns the name of the event.
    model Object Returns the Spreadsheet model.
    cancel boolean Returns the cancel option value.
    importData Object Returns the imported data.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    //onImport event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        onImport: function (args){}
     });
     </script>

    openFailure

    Triggered when import sheet is failed to open.

    Name Type Description
    argument Object Arguments when openFailure event is triggered.
    Name Type Description
    failureType string Returns the failure type.
    status number Returns the status index.
    statusText string Returns the status in text.
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div>
    <script>
    //openFailure event for Spreadsheet
    $("#Spreadsheet").ejSpreadsheet({
    openFailure: function (args){}
    });
    </script>

    pagerClick

    Triggered when pager item is clicked in the Spreadsheet.

    Name Type Description
    argument Object Arguments when pagerClick event is triggered.
    Name Type Description
    activeSheet number Returns the active sheet index.
    gotoSheet number Returns the new sheet index.
    newSheet boolean Returns whether new sheet icon is clicked.
    model Object Returns the Spreadsheet model.
    type string Returns the name of the event.
    target Element Returns the target element.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // pagerClick event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        pagerClick: function (args){}
    });
    </script>

    resizeStart

    Triggered when you start resizing the chart, picture, row and column.

    Name Type Description
    argument Object Arguments when resizeStart event is triggered.
    Name Type Description
    colIndex number Returns the column index which column you start to resize.
    rowIndex number Returns the row index which row you start to resize.
    model Object Returns the Spreadsheet model.
    reqType string Returns type of the request.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // resizeStart event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({   
        resizeStart: function (args){}
    });
    </script>

    resizeEnd

    Triggered after end of resizing the chart, picture, row and column.

    Name Type Description
    argument Object Arguments when resizeEnd event is triggered.
    Name Type Description
    colIndex number Returns the column index which you resized.
    oldWidth number Returns old width of the column or shape.
    newWidth number Returns new width of the column or shape.
    rowIndex number Returns the row index which you resized.
    oldHeight number Returns old height of the row or shape.
    newHeight number Returns new height of the row or shape.
    model Object Returns the Spreadsheet model.
    reqType string Returns type of the request.
    type string Returns the name of the event.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // resizeEnd event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({   
        resizeEnd: function (args){}
    });
    </script>

    ribbonClick

    Triggered when click on the ribbon.

    Name Type Description
    argument Object Arguments when ribbonClick event is triggered.
    Name Type Description
    Id string Returns element Id.
    prop Object Returns target information.
    model Object Returns the Spreadsheet model.
    status boolean Returns status.
    isChecked boolean Returns isChecked in boolean.
    type string Returns the name of the event.
    target Element Returns the target element.
    cancel boolean Returns the cancel option value.

    Example

  • HTML
  • <div id="Spreadsheet"></div> 
    <script>
    // ribbonClick event for Spreadsheet
    $('#Spreadsheet').ejSpreadsheet({ 
        ribbonClick: function (args){}
    });
    </script>

    scrollStop

    Triggered after end of vertical and horizontal scrolling.

    Name Type Description
    argument Object