Editing in Vue Spreadsheet component

28 Jul 202610 minutes to read

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 enter 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 a cell is in edit mode, you can save the edited cell by one of the following ways:

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

Cancel editing

To cancel 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 sample shows how to prevent the editing and cell save. Here E column prevent the editing by using cancel argument as true in cellEdit event. In D column, prevent saving the edited changes by using cancel argument as true in beforeCellSave and use closeEdit method in spreadsheet.

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :showFormulaBar="false" :cellEdit="cellEdit"
    :beforeCellSave="beforeCellSave">
    <e-sheets>
      <e-sheet selectedRange="E11">
        <e-ranges>
          <e-range :dataSource="dataSource"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=120></e-column>
          <e-column :width=180></e-column>
          <e-column :width=100></e-column>
          <e-column :width=120></e-column>
          <e-column :width=120></e-column>
        </e-columns>
        <e-rows>
          <e-row index="10">
            <e-cells>
              <e-cell index="3" value="Total Amount:" style="fontStyle"></e-cell>
              <e-cell formula="=SUM(E2:E10)"></e-cell>
            </e-cells>
          </e-row>
        </e-rows>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RowsDirective as ERows, RowDirective as ERow, CellsDirective as ECells, CellDirective as ECell, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet } from "@syncfusion/ej2-vue-spreadsheet";
import { data } from './data.js';

const spreadsheet = ref(null);
const dataSource = data;
const fontStyle = { fontWeight: 'bold' };

const created = function () {
  spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:E1');
  spreadsheet.value.cellFormat({ textAlign: 'center' }, 'A2:A10');
  spreadsheet.value.cellFormat({ textAlign: 'center' }, 'C2:C10');
  spreadsheet.value.numberFormat('$#,##0.00', 'D2:D10');
  spreadsheet.value.numberFormat('$#,##0.00', 'E2:E11');
}
const cellEdit = function (args) {
  // Preventing the editing in 5th(Amount) column.
  if (args.address.includes('E')) { args.cancel = true; }
}
const beforeCellSave = function (args) {
  // 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.value.closeEdit();
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css";
</style>
<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :showFormulaBar="false" :cellEdit="cellEdit"
    :beforeCellSave="beforeCellSave">
    <e-sheets>
      <e-sheet selectedRange="E11">
        <e-ranges>
          <e-range :dataSource="dataSource"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=120></e-column>
          <e-column :width=180></e-column>
          <e-column :width=100></e-column>
          <e-column :width=120></e-column>
          <e-column :width=120></e-column>
        </e-columns>
        <e-rows>
          <e-row index="10">
            <e-cells>
              <e-cell index="3" value="Total Amount:" style="fontStyle"></e-cell>
              <e-cell formula="=SUM(E2:E10)"></e-cell>
            </e-cells>
          </e-row>
        </e-rows>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>

import { SpreadsheetComponent, ColumnsDirective, ColumnDirective, RowsDirective, RowDirective, CellsDirective, CellDirective, RangesDirective, RangeDirective, SheetsDirective, SheetDirective } from "@syncfusion/ej2-vue-spreadsheet";
import { data } from './data.js';

export default {
  name: "App",
  components: {
    "ejs-spreadsheet": SpreadsheetComponent,
    "e-sheets": SheetsDirective,
    "e-sheet": SheetDirective,
    "e-ranges": RangesDirective,
    "e-range": RangeDirective,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective,
    "e-rows": RowsDirective,
    "e-row": RowDirective,
    "e-cells": CellsDirective,
    "e-cell": CellDirective
  },

  data: () => {
    return {
      dataSource: data,
      fontStyle: { fontWeight: 'bold' }
    }
  },
  methods: {
    created: function () {
      let spreadsheet = this.$refs.spreadsheet;
      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');
    },
    cellEdit: function (args) {
      // Preventing the editing in 5th(Amount) column.
      if (args.address.includes('E')) { args.cancel = true; }
    },
    beforeCellSave: function (args) {
      let spreadsheet = this.$refs.spreadsheet;
      // 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();
      }
    }
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css";
</style>

Limitations

  • Text overflow in cells is not supported in Editing.

Note

You can refer to our Vue Spreadsheet Editor feature tour page for its groundbreaking feature representations.

See Also