Selection in Vue Spreadsheet component

28 Oct 202424 minutes to read

Selection provides interactive support to highlight the cell, row, or column that you select. Selection can be done through Mouse, Touch, or Keyboard interaction. To enable selection, set mode as Single Multiple in selectionSettings. If you set mode to None, it disables the UI selection.
  • The default value for mode in selectionSettings is Multiple.

You have the following options in Selection,

  • Cell selection
  • Row selection
  • Column selection

Cell selection

Cell selection is used to select a single or multiple cells. It can be performed using the selectRange method.

User Interface:

  • Click on a cell to select it (or) use the arrow keys to navigate to it and select it.
  • To select a range, select a cell, then use the left mouse button to select and drag over to other cells (or) use the Shift + arrow keys to select the range.
  • To select non-adjacent cells and cell ranges, hold Ctrl and select the cells.

You can quickly locate and select specific cells or ranges by entering their names or cell references in the Name box, which is located to the left of the formula bar, and also select named or unnamed cells or ranges by using the Go To (Ctrl+G) command.

Row selection

Row selection is used to select a single or multiple rows.

User Interface:

You can perform row selection in any of the following ways,

  • By clicking the row header.
  • To select multiple rows, select a row header with the left mouse button and drag over to other row headers (or) use the Shift + arrow keys to select multiple rows.
  • To select non-adjacent rows, hold Ctrl and select the row header.
  • You can also use the selectRange method for row selection.

The following sample shows the row selection in the spreadsheet, here selecting the 5th row using the selectRange method.

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :selectionSettings="selectionSettings">
    <e-sheets>
      <e-sheet name="Price Details">
        <e-ranges>
          <e-range :dataSource="dataSource1"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet, getRangeAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } from './data.js';

const spreadsheet = ref(null);
const selectionSettings = { mode: 'Multiple' };
const dataSource1 = priceData;
const created = function () {
  spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
  let colCount = spreadsheet.value.ej2Instances.getActiveSheet().colCount;
  spreadsheet.value.selectRange(getRangeAddress([4, 0, 4, colCount]));
}

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
</style>
<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :selectionSettings="selectionSettings">
    <e-sheets>
      <e-sheet name="Price Details">
        <e-ranges>
          <e-range :dataSource="dataSource1"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>
import { SpreadsheetComponent, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective, SheetsDirective, SheetDirective, getRangeAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } 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
  },
  data: () => {
    return {
      selectionSettings: { mode: 'Multiple' },
      dataSource1: priceData
    }
  },
  methods: {
    created: function () {
      let spreadsheet = this.$refs.spreadsheet;
      spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
      let colCount = spreadsheet.ej2Instances.getActiveSheet().colCount;
      spreadsheet.selectRange(getRangeAddress([4, 0, 4, colCount]));
    }
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
</style>

Column selection

Column selection is used to select a single or multiple columns.

User Interface:

You can perform column selection in any of the following ways,

  • By clicking the column header.
  • To select multiple columns, select a column header with the left mouse button and drag over to other column headers (or) use the Shift + arrow keys to select the multiple columns.
  • To select non-adjacent columns, hold Ctrl and select the column header.
  • You can also use the selectRange method for row selection.

The following sample shows the column selection in the spreadsheet, here selecting the 3rd column using the selectRange method.

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :selectionSettings="selectionSettings">
    <e-sheets>
      <e-sheet name="Price Details">
        <e-ranges>
          <e-range :dataSource="dataSource1"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet, getRangeAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } from './data.js';

const spreadsheet = ref(null);
const selectionSettings = { mode: 'Multiple' };
const dataSource1 = priceData;
const created = function () {
  spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
  let rowCount = spreadsheet.value.ej2Instances.getActiveSheet().rowCount;
  spreadsheet.value.selectRange(getRangeAddress([0, 2, rowCount, 2]));
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
</style>
<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :selectionSettings="selectionSettings">
    <e-sheets>
      <e-sheet name="Price Details">
        <e-ranges>
          <e-range :dataSource="dataSource1"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>
import { SpreadsheetComponent, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective, SheetsDirective, SheetDirective, getRangeAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } 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
  },
  data: () => {
    return {
      selectionSettings: { mode: 'Multiple' },
      dataSource1: priceData
    }
  },
  methods: {
    created: function () {
      let spreadsheet = this.$refs.spreadsheet;
      spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
      let rowCount = spreadsheet.ej2Instances.getActiveSheet().rowCount;
      spreadsheet.selectRange(getRangeAddress([0, 2, rowCount, 2]));
    }
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
</style>

Get selected cell values

You can select single or multiple cells, rows, or columns using mouse and keyboard interactions. You can also programmatically perform selections using the selectRange method. This selection behavior is controlled by the selectionSettings property. Finally, you can retrieve the selected cell values as a collection using the getData method.

Below is a code example demonstrating how to retrieve the selected cell values as a collection programmatically:

<template>
    <div>
      <ejs-button class="e-btn custom-btn" @click="getSelectedCellValues">Get Selected Cell Values</ejs-button>
      <ejs-spreadsheet ref="spreadsheet" :created="created">
        <e-sheets>
          <e-sheet>
            <e-ranges>
              <e-range :dataSource="dataSource"></e-range>
            </e-ranges>
            <e-columns>
              <e-column :width="width1"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width1"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width3"></e-column>
            </e-columns>
          </e-sheet>
        </e-sheets></ejs-spreadsheet>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet, getRangeIndexes, getSwapRange, getRangeAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { defaultData } from './data.js';

const spreadsheet = ref(null);
const dataSource = defaultData;
const width1 = 180;
const width2 = 130;
const width3 = 120;

const created= function () {
  var spreadsheet = this.$refs.spreadsheet;
  spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
}
    
const getSelectedCellValues = function () {
  var spreadsheet = this.$refs.spreadsheet;
  var sheet = spreadsheet.ej2Instances.getActiveSheet();
  var selectedRange = sheet.selectedRange;
  var index = getRangeIndexes(selectedRange);
  var cellRange = getSwapRange(index);
  var swappedRange = getRangeAddress(cellRange);
  var valueObject = [];
  var range = sheet.name + '!' + swappedRange;
  // Get the collection of selected cell values by using the getData() method.
  spreadsheet.getData(range).then((cells) => {
    cells.forEach((cell) => {
      valueObject.push(isNullOrUndefined(cell.value) ? '' : cell.value);
    });
    console.log("Collection of selected cell values:", valueObject);
  });
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
.custom-btn {
  margin: 0 0 10px 0;
}
</style>
<template>
  <div>
    <ejs-button class="e-btn custom-btn" @click="getSelectedCellValues">Get Selected Cell Values</ejs-button>
    <ejs-spreadsheet ref="spreadsheet" :created="created">
      <e-sheets>
        <e-sheet>
          <e-ranges>
            <e-range :dataSource="dataSource"></e-range>
          </e-ranges>
          <e-columns>
            <e-column :width="width1"></e-column>
            <e-column :width="width2"></e-column>
            <e-column :width="width2"></e-column>
            <e-column :width="width1"></e-column>
            <e-column :width="width2"></e-column>
            <e-column :width="width3"></e-column>
          </e-columns>
        </e-sheet>
      </e-sheets></ejs-spreadsheet>
  </div>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin, getRangeIndexes, getSwapRange, getRangeAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { defaultData } from './data.js';
Vue.use(SpreadsheetPlugin);
export default {
  data: () => {
    return {
      dataSource: defaultData,
      width1: 180,
      width2: 130,
      width3: 120,
    }
  },
  methods: {
    created: function () {
      var spreadsheet = this.$refs.spreadsheet;
      spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
    },
    getSelectedCellValues: function () {
      var spreadsheet = this.$refs.spreadsheet;
      var sheet = spreadsheet.ej2Instances.getActiveSheet();
      var selectedRange = sheet.selectedRange;
      var index = getRangeIndexes(selectedRange);
      var cellRange = getSwapRange(index);
      var swappedRange = getRangeAddress(cellRange);
      var valueObject = [];
      var range = sheet.name + '!' + swappedRange;
      // Get the collection of selected cell values by using the getData() method.
      spreadsheet.getData(range).then((cells) => {
        cells.forEach((cell) => {
          valueObject.push(isNullOrUndefined(cell.value) ? '' : cell.value);
        });
        console.log("Collection of selected cell values:", valueObject);
      });
    },
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
.custom-btn {
  margin: 0 0 10px 0;
}
</style>

Remove Selection

The following sample shows, how to remove the selection in the spreadsheet. Here changing the mode as None in selectionSettings to disable’s the UI selection.

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :cellEdit="cellEdit" :selectionSettings="selectionSettings">
    <e-sheets>
      <e-sheet name="Price Details">
        <e-ranges>
          <e-range :dataSource="dataSource1"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet, getRangeAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } from './data.js';

const spreadsheet = ref(null);
const selectionSettings = { mode: 'None' };
const dataSource1 = priceData;

const created = function () {
  spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
}
const cellEdit = function (args) {
  args.cancel = true;
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
</style>
<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :cellEdit="cellEdit" :selectionSettings="selectionSettings">
    <e-sheets>
      <e-sheet name="Price Details">
        <e-ranges>
          <e-range :dataSource="dataSource1"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>
import { SpreadsheetComponent, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective, SheetsDirective, SheetDirective, getRangeAddress } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } 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
  },
  data: () => {
    return {
      selectionSettings: { mode: 'None' },
      dataSource1: priceData
    }
  },
  methods: {
    created: function () {
      let spreadsheet = this.$refs.spreadsheet;
      spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
    },
    cellEdit: function (args) {
      args.cancel = true;
    }
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
</style>

Limitations

  • We have a limitation while performing the Select All(ctrl + A). You can do this only by clicking the Select All button at the top left corner.

Note

You can refer to our Vue Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our Vue Spreadsheet example to knows how to present and manipulate data.