Workbook API in JavaScript Spreadsheet API control

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

new Spreadsheet({
     activeSheetIndex: 2
...
 }, '#Spreadsheet');

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

new Spreadsheet({
     autoFillSettings: {
         fillType: 'FillSeries',
         showFillOptions: true
     }
...
}, '#Spreadsheet');
The autoFillSettings `fillType` property has FOUR values and it is described below:

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

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

new Spreadsheet({
     ...
         cellStyle: { fontWeight: 'bold', fontSize: 12,
             fontStyle: 'italic', textIndent: '2pt'
             backgroundColor: '#4b5366', color: '#ffffff'
     },
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
     ...
     definedNames: [{ name: 'namedRange1', refersTo: 'Sheet1!A1:B5' }],
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
     height: '550px'
...
 }, '#Spreadsheet');

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

new Spreadsheet({
     sheets: [{
                 name: 'First Sheet',
                 range: [{ dataSource: data }],
                 rows: [{
                         index: 5,
                         cells: [{ index: 4, value: 'Total Amount:' },
                                 { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } }]
                 }]
             }, {
                 name: 'Second Sheet',
                 columns: [{ width: 180 }, { index: 4, width: 130 }]
             }]
...
 }, '#Spreadsheet');

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

new Spreadsheet({
     width: '550px'
...
 }, '#Spreadsheet');

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Cell Format</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, CellStyleModel } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
    spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
    // Setting common styles to whole table cells
    spreadsheet.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
    // Column wise styles setting
    spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A12');
    // Setting text-indent to 2 and 4 column
    let style: CellStyleModel = { textAlign: 'left', textIndent: '8pt' };
    spreadsheet.cellFormat(style, 'B2:B12');
    spreadsheet.cellFormat(style, 'D2:D12');
    spreadsheet.cellFormat({ fontStyle: 'italic', textAlign: 'right' }, 'C3:C12');
    spreadsheet.cellFormat({ textAlign: 'center' }, 'E2:E12');
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Compute Expression</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Used to compute the specified expression/formula.
    spreadsheet.computeExpression('522+1'); // pass the  expression 
    spreadsheet.computeExpression('=SUM(F2:F3)'); //pass the formula as string.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Delete</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Used to delete rows, columns and sheets from the spreadsheet.
    spreadsheet.delete(1, 1, "Row", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
    spreadsheet.delete(2, 2, "Column", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Delete Image</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        created: (): void => {
            spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]);
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

    document.getElementById("btn").onclick = () => {
     //Used to delete the chart from spreadsheet.
    spreadsheet.deleteChart("Chart1"); // id - Specifies the chart element id.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Duplicate Sheet</button>

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Make a duplicate/copy of the active sheet in the spreadsheet.
    spreadsheet.duplicateSheet();
    // Make a duplicate/copy of the specified sheet in the spreadsheet.
    spreadsheet.duplicateSheet(1); // index of the sheet to be duplicated
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Get Data</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Gets the range of data as JSON from the specified address.
    spreadsheet.getData("Sheet1!A1:B2").then(data => console.log(data)); // Specifies the address with sheet name for range of cells, Gets the range of data as JSON from the specified address
    spreadsheet.getData("A1:B2").then(data => console.log(data)); // Specifies the address for range of cells, Gets the range of data as JSON from the specified address
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Get display text</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, CellModel, getCell } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To Gets the formatted text of the cell.
   let cell: CellModel = getCell(0,0, spreadsheet.getActiveSheet()); // rowIndex, colIndex, sheetIndex
   console.log(spreadsheet.getDisplayText(cell)); // to provide the cell model
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Insert Chart</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Used to set the chart in spreadsheet.
    spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); //Specifies the options to insert chart in spreadsheet.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Insert Column</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To insert the column
 spreadsheet.insertColumn([{index: 1, width: 95}], 1); // startColumn (index, column width), endColumn
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Insert Row</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To insert the row
 spreadsheet.insertRow(4, 4); // startRow, endRow
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Insert Sheet</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To insert sheets in to the spreadsheet.
   spreadsheet.insertSheet(0, 2); // startSheet, endSheet
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Lock Cells</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To Applies cell lock to the specified range of cells.
   let protectSetting:ProtectSettingsModel = {
    selectCells: true,
    formatCells: false,
    formatRows: false,
    formatColumns: false,
    insertLink: false
  }
  spreadsheet.protectSheet("Issues", protectSetting);
  spreadsheet.lockCells('A2:AZ100', false); // to unlock the A2:Az100 cells
  spreadsheet.lockCells('A1:Z1', true); // to lock the A1:Z1 cells
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Merge</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To merge the range of cells.
   spreadsheet.merge('B1:E2'); // to pass the range
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Move Sheet</button>

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        sheets: [{},{},{}]
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Moves the active sheet to the position in the list of sheets.
    spreadsheet.moveSheet(1); // position to move
    // Moves the list of specified sheets to the position in the list of sheets.
    spreadsheet.moveSheet(0, [1,2]); // position to move, indexes of the sheets to be moved
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Number Format</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, getFormatFromType } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To Applies the number format (number, currency, percentage, short date, etc…) to the specified range of cells.
    spreadsheet.numberFormat('$#,##0.00', 'E1:E3');
    // Applied Accounting format to the cells from C3 to E10 range.
    spreadsheet.numberFormat(getFormatFromType('Accounting'), 'C3:E10');
    // Applied Percentage format to the cells from F3 to F10 range in Sheet1.
    spreadsheet.numberFormat('0%', 'Sheet1!F3:F10');
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="save">Save Json</button>
    <button class="e-btn" id="load">load Json</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

    let response;
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("save").onclick = () => {
   spreadsheet.saveAsJson().then(Json => (response = Json)); 
};

document.getElementById("load").onclick = () => {
  spreadsheet.openFromJson({ file: response.jsonObject }); // To load JSON data in the Spreadsheet.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Save</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Saves the Spreadsheet data to Excel file.
   spreadsheet.save({ url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: 'Worksheet', saveType: 'Xlsx' }); // Specifies the save URL, filename, file type need to be saved.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="save">Save Json</button>
    <button class="e-btn" id="load">load Json</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

    let response;
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("save").onclick = () => {
   spreadsheet.saveAsJson().then(Json => (response = Json)); // to save JSON data in Spreadsheet.
};

document.getElementById("load").onclick = () => {
  spreadsheet.openFromJson({ file: response.jsonObject }); // To load JSON data in the Spreadsheet.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Set Border</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Sets the border to specified range of cells.
    spreadsheet.setBorder({ border: '1px solid #000000' }, 'C6:G8', 'Outer'); // Specifies the style property which contains border value,Specifies the range of cell reference. If not specified, it will considered the active cell reference, Specifies the Border type
    spreadsheet.setBorder({ border: '1px solid #000000' });
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">UnMerge</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
   //To split the merged cell into multiple cells.
   spreadsheet.unMerge('B1:E2'); // to pass the range
};

     <div id="spreadsheet"></div>
    <button id="btn">Wrap</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
   // To wrap/unwrap the text content of the cell.
   spreadsheet.wrap("B5", true); // address, set true if the text content of the cell to be wrapped.
};

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

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

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

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

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

new Spreadsheet({
      beforeOpen: (args: BeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
      beforeSave: (args: BeforeSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
      openFailure: (args: OpenFailureArgs) => {
      }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
     queryCellInfo: (args: CellInfoEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
      saveComplete: (args: SaveCompleteEventArgs) => {
      }
     ...
 }, '#Spreadsheet');