Selection in Vue Grid component

28 Mar 20235 minutes to read

Selection provides an option to highlight a row or cell or column. Selection can be done through simple Mouse down or Arrow keys. To disable selection in the Grid, set the allowSelection to false.

The grid supports two types of selection that can be set by using the selectionSettings.type.They are:

  • Single - The Single value is set by default. Allows you to select only a single row or cell or column.
  • Multiple - Allows you to select multiple rows or cells or columns. To perform the multi-selection, press and hold CTRL key and click the desired rows or cells or columns. To select range of rows or cells or columns, press and hold the SHIFT key and click the rows or cells or columns.

To get start quickly with Selection Options, you can check on this video:

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :selectionSettings='selectionOptions' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      selectionOptions: { type: 'Multiple' }
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Selection mode

Grid supports three types of selection mode which can be set by using selectionSettings.mode. They are:

  • Row - The row value is set by default. Allows you to select rows only.
  • Cell - Allows you to select cells only.
  • Both - Allows you to select rows and cells at the same time.
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :selectionSettings='selectionOptions' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      selectionOptions: { mode: 'Both' }
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Touch interaction

When you tap Grid row on touch screen devices, then the tapped row is selected. Also, it will show a popup Selection for multi-row-selection. To select multiple rows or cells, tap the popupMulti Selection and then tap the desired rows or cells.

For multi-selection, It requires the selection type to be Multiple.

The following screenshot represents a Grid touch selection in the device.

Touch Interaction

See Also