Search results

Editing in JavaScript Spreadsheet control

You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the allowEditing property to enable or disable the editing feature.

Edit cell

You can start editing by one of the following ways,

  • Double click a cell to start the edit mode.
  • Press F2 key to edit the active cell.
  • Use formula bar to perform editing.
  • Use BACKSPACE or SPACE key to clear the cell content and start the edit mode.
  • Using the startEdit method.

Save cell

If the cell is in editable state, you can save the edited cell by one of the following ways,

  • Perform mouse click on any other cell rather than the current editing cell.
  • Press Enter or Tab keys to save the edited cell content.
  • Using the endEdit method.

Cancel editing

To cancel the editing without saving the changes, you can use one of the following ways,

  • Press ESCAPE key, this will remove the editable state and update the unchanged cell content.
  • Using the closeEdit method.

The following code example shows the editing operation in spreadsheet.

Source
Preview
app.ts
index.html
datasource.ts
import { Spreadsheet, SheetModel, ColumnModel, RowModel } from '@syncfusion/ej2-spreadsheet';
import { data } from './datasource.ts';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

let columns: ColumnModel[] = [{ width: 120 }, { width: 180 }, { width: 100 }, { width: 120 }, { width: 120 }];

let rows: RowModel[] = [{
    index: 10, cells: [{ index: 3, value: 'Total Amount:', style: { fontWeight: 'bold' } }, { formula: '=SUM(E2:E10)' }]
}];

let sheets: SheetModel[] = [{ ranges: [{ dataSource: data }], columns: columns, selectedRange: 'E11', rows: rows }];

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: sheets,
    created: (): void => {
        spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:E1');
        spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A10');
        spreadsheet.cellFormat({ textAlign: 'center' }, 'C2:C10');
        spreadsheet.numberFormat('$#,##0.00', 'D2:D10');
        spreadsheet.numberFormat('$#,##0.00', 'E2:E11');
    },
    // Triggers before going to the editing mode.
    cellEdit: (args: CellEditEventArgs): void => {
        // Preventing the editing in 5th(Amount) column.
        if (args.address.includes('E')) { args.cancel = true; }
    },
    // Trigger before saving the edited cell content.
    beforeCellSave: (args: CellEditEventArgs): void => {
        // Prevent saving the edited changes in 4th(Rate) column.
        if (args.address.includes('D')) {
            args.cancel = true;
            // Manually removes the editable state without saving the changes. Use `endEdit` method if you want to save the changes.
            spreadsheet.closeEdit();
        }
    },
    showSheetTabs: false, showRibbon: false
});

spreadsheet.appendTo('#spreadsheet');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>EJ2 SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
        <script src="system.config.js"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <!--Element which is going to render-->
        <div id='loader'>Loading....</div>
        <div id='container'>
                <div id="spreadsheet"></div>
        </div>
</body>

</html>
/**
 * Editing data source
 */
export let data: Object[] = [
    {
        'Item Code': 'I231',
        'Item Name': 'Chinese Combo Noodle',
        'Quantity': 2,
        'Rate': 125,
        'Amount': '=PRODUCT(C2,D2)'
    },
    {
        'Item Code': 'I245',
        'Item Name': 'Chinese Combo Rice',
        'Quantity': 3,
        'Rate': 125,
        'Amount': '=PRODUCT(C3,D3)'
    },
    {
        'Item Code': 'I237',
        'Item Name': 'Amritsari Chola',
        'Quantity': 2,
        'Rate': 225,
        'Amount': '=PRODUCT(C4,D4)'
    },
    {
        'Item Code': 'I291',
        'Item Name': 'Asian Mixed Entree Platt',
        'Quantity': 3,
        'Rate': 165,
        'Amount': '=PRODUCT(C5,D5)'
    },
    {
        'Item Code': 'I268',
        'Item Name': 'Chinese Combo Chicken',
        'Quantity': 3,
        'Rate': 125,
        'Amount': '=PRODUCT(C6,D6)'
    },
    {
        'Item Code': 'I251',
        'Item Name': 'Chivas Regal',
        'Quantity': 1,
        'Rate': 325,
        'Amount': '=PRODUCT(C7,D7)'
    },
    {
        'Item Code': 'I256',
        'Item Name': 'Chicken Drumsticks',
        'Quantity': 2,
        'Rate': 180,
        'Amount': '=PRODUCT(C8,D8)'
    },
    {
        'Item Code': 'I232',
        'Item Name': 'Manchow Soup',
        'Quantity': 2,
        'Rate': 160,
        'Amount': '=PRODUCT(C9,D9)'
    },
    {
        'Item Code': 'I290',
        'Item Name': 'Schezuan Chicken',
        'Quantity': 3,
        'Rate': 180,
        'Amount': '=PRODUCT(C10,D10)'
    }
];

See Also