Cell Selection in Vue Grid component

3 Sep 202424 minutes to read

Cell selection in the Grid component allows you to interactively select specific cells or ranges of cells within the grid. This selection can be done effortlessly through mouse clicks or arrow keys (up, down, left, and right). This feature is useful when you want to highlight, manipulate, or perform actions on specific cell within the Grid.

To enable cell selection, you should set the selectionSettings.mode property to either Cell or Both. This property determines the selection mode of the grid.

Single cell selection

Single cell selection allows you to select a single cell within a Grid. This feature is useful when you want to focus on a specific cell or perform actions on individual cells within the grid.

To enable single cell selection, set the selectionSettings.mode property to Cell and the selectionSettings.type property to Single. This configuration allows you to select a single cell at a time within the grid.

In the following example demonstrates how to enable single cell selection using property:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150"></e-column>
        <e-column type="Date" field="OrderDate" headerText="Order Date" width="130" format="yMd" 
        textAlign="Right"></e-column>
        <e-column field="Freight" headerText="Freight" width="120" format="C2" 
        textAlign="Right"></e-column>
        <e-column type="Date" field="ShippedDate" headerText="Shipped Date" width="130" 
        format="yMd" textAlign="Right"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="150">
        </e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const selectionOptions = { mode: 'Cell', type: 'Single' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150"></e-column>
        <e-column type="Date" field="OrderDate" headerText="Order Date" width="130" format="yMd" 
        textAlign="Right"></e-column>
        <e-column field="Freight" headerText="Freight" width="120" format="C2" 
        textAlign="Right"></e-column>
        <e-column type="Date" field="ShippedDate" headerText="Shipped Date" width="130" 
        format="yMd" textAlign="Right"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="150">
        </e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
  name: "App",
  components: {
    "ejs-grid": GridComponent,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective,
  },
  data() {
    return {
      data: data,
      selectionOptions: { mode: "Cell", type: "Single" },
    };
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Multiple cell selection

Multiple cell selection allows you to select multiple cells within a Grid. This feature is beneficial when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data.

To enable multiple cell selection, set the selectionSettings.mode property to Cell and the selectionSettings.type property to Multiple. This configuration allows you to select and interact with multiple cells within the grid.

In the following example demonstrates how to enable multiple cell selection using property:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right">
        </e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150">
        </e-column>
        <e-column type="Date" field="OrderDate" headerText="Order Date" width="130" format="yMd"
          textAlign="Right"></e-column>
        <e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column>
        <e-column type="Date" field="ShippedDate" headerText="Shipped Date" width="130" format="yMd"
          textAlign="Right"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="150">
        </e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const selectionOptions = { mode: 'Cell', type: 'Multiple' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="120" textAlign="Right">
        </e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="150">
        </e-column>
        <e-column type="Date" field="OrderDate" headerText="Order Date" width="130" format="yMd" 
        textAlign="Right"></e-column>
        <e-column field="Freight" headerText="Freight" width="120" format="C2" 
        textAlign="Right"></e-column>
        <e-column type="Date" field="ShippedDate" headerText="Shipped Date" width="130" 
        format="yMd" textAlign="Right"></e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="150">
        </e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      selectionOptions :{ mode: 'Cell', type: 'Multiple' },
    };
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Cell selection mode

The cell selection mode allows you to interactively select specific cells or ranges of cells within the grid. This feature is particularly useful when you want to perform actions on specific cells or obtain data from selected cells.

The grid supports three types of cell selection mode which can be set by using selectionSettings.cellSelectionMode. These modes are:

Flow - This is the default mode. It allows you to select a range of cells between the start index and end index, including all cells in between the rows. It provides a continuous flow of cell selection.
Box - In this mode, you can select a range of cells within the start and end column indexes, including all cells in between the rows within the specified range. This mode is useful when you need to select cells within specific columns.
BoxWithBorder: This mode is similar to the Box mode, but it adds borders to the selected range of cells. This visual distinction makes it easy to identify the selected cells within the grid.

Cell Selection requires the selectionSettings.mode to be Cell or Both and type should be Multiple.

In the following example demonstrates how to dynamically enable and change the cellSelectionMode using the DropDownList component:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <div style="display: inline-block">
      <label style="padding: 30px 17px 0 0">Choose cell selection mode :</label>
      <ejs-dropdownlist index="0" width="150" :dataSource="dropdownData" :change="valueChange">
      </ejs-dropdownlist>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="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>
  </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent as EjsDropdownlist } from '@syncfusion/ej2-vue-dropdowns';
import { data } from "./datasource.js";
import { ref } from 'vue';
const grid = ref(null);
const dropdownData = [
  { text: 'Flow', value: 'Flow' },
  { text: 'Box', value: 'Box' },
  { text: 'BoxWithBorder', value: 'BoxWithBorder' },
];
const selectionOptions = { mode: 'Cell', type: 'Multiple' };
const valueChange = function (args) {
  grid.value.ej2Instances.selectionSettings.cellSelectionMode = args.value;
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div style="display: inline-block">
      <label style="padding: 30px 17px 0 0" >Choose cell selection mode  :</label>
      <ejs-dropdownlist  index="0" width="150" :dataSource=" dropdownData" :change="valueChange">
      </ejs-dropdownlist>
    </div>
    <div style="padding: 20px 0px 0px 0px">
    <ejs-grid ref="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>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-dropdownlist":DropDownListComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      dropdownData:[
        { text: 'Flow', value: 'Flow' },
        { text: 'Box', value: 'Box' },
        { text: 'BoxWithBorder', value: 'BoxWithBorder' },
      ],
      selectionOptions :{ mode: 'Cell', type: 'Multiple' },
    };
  },
 methods: {
    valueChange: function (args) {
        this.$refs.grid.ej2Instances.selectionSettings.cellSelectionMode= args.value;
    }
 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Select cells externally

You can perform single cell selection, multiple cell selection, and range of cell selection externally in a Grid using built-in methods. This feature allows you to interact with specific cells within the Grid. The following topic demonstrates how you can achieve these selections using methods.

Single cell selection

The Vue Grid allows you to select a single cell within a grid. This feature is useful when you want to focus on a specific cell or perform actions on individual cells within the grid.

To achieve single cell selection, you can use the selectCell method. This method selects a cell based on the given index.

The following example demonstrates how to select a single cell within the Grid by obtaining the selected row index and cell index through a textbox component and passing these row and cell indexes as arguments to the selectCell method. When the button event is triggered by clicking the Select cell button, a single cell is selected within the Grid:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <div>
      <label style="padding: 30px 17px 0 0">Enter the row index: </label>
      <ejs-textbox ref="textbox" required width="120"></ejs-textbox>
    </div>
    <div style="padding-top: 10px ">
      <label style="padding: 30px 17px 0 0">Enter the cell index: </label>
      <ejs-textbox ref="textbox1" required width="120"></ejs-textbox>
      <ejs-button @click="onClick">Select Cell</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
          </e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { TextBoxComponent as EjsTextbox } from '@syncfusion/ej2-vue-inputs';
import { data } from './datasource.js';
import { ref } from 'vue';
const grid = ref(null);
const textbox = ref(null);
const textbox1 = ref(null);
let rowIndex;
let cellIndex;
const selectionOptions = { mode: 'Cell', type: 'Single' };
const onClick = function () {
  rowIndex = parseInt(textbox.value.$el.value, 10);
  cellIndex = parseInt(textbox1.value.$el.value, 10);
  if (!isNaN(rowIndex) && !isNaN(cellIndex))
    grid.value.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex });
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div>
      <label style="padding: 30px 17px 0 0">Enter the row index: </label>
      <ejs-textbox ref="textbox" required width="120"></ejs-textbox>
    </div>
    <div style="padding-top: 10px ">
      <label style="padding: 30px 17px 0 0">Enter the cell index: </label>
      <ejs-textbox ref="textbox1" required width="120"></ejs-textbox>
      <ejs-button @click="onClick">Select Cell</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120">
          </e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div> 
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-textbox":TextBoxComponent,
"ejs-button":ButtonComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      selectionOptions :{ mode: 'Cell', type: 'Single' },
      rowIndex:0,
      cellIndex:0
    };
  },
 methods: {
    onClick: function () {
        this.rowIndex = parseInt(this.$refs.textbox.ej2Instances.value, 10);
        this.cellIndex = parseInt(this.$refs.textbox1.ej2Instances.value, 10);
        if (!isNaN(this.rowIndex) && !isNaN(this.cellIndex))
           this.$refs.grid.ej2Instances.selectCell({ rowIndex: this.rowIndex, cellIndex: this.cellIndex });
    }
 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Multiple cell selection

To achieve multiple cell selection, you can use the selectCells method. This method allows you to select a collection of cells based on their row and column indexes.

In the following example, it demonstrates how to select multiple cells in the Grid by calling the selectCells method within the button click event and passing an collection of row and column indexes as arguments.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <div style="padding: 0px 0px 20px 0px">
      <ejs-button class="btn" @click="buttonClick(1, 3)">
        Select [1, 3]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(2, 2)">
        Select [2, 2]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(0, 0)">
        Select [0, 0]</ejs-button>
    </div>
    <div style="padding: 0px 0px 20px 0px">
      <ejs-button class="btn" @click="buttonClick(4, 2)">
        Select [4, 2]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(5, 1)">
        Select [5, 1]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(3, 3)">
        Select [3, 3]</ejs-button>
    </div>
    <div style="padding: 0px 0px 20px 0px">
      <ejs-button class="btn" @click="buttonClick(0, 3)">
        Select [0, 3]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(8, 1)">
        Select [8, 1]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(8, 2)">
        Select [8, 2]</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120">
          </e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130">
          </e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { data } from './datasource.js';
const selectionOptions = { type: 'Multiple', mode: 'Cell' };
const grid=ref(null);
const buttonClick = function (rowIndex, columnIndex) {
  grid.value.selectCells([{ rowIndex: rowIndex, cellIndexes: [columnIndex] }]);
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div style="padding: 0px 0px 20px 0px">
      <ejs-button class="btn" @click="buttonClick(1, 3)">
      Select [1, 3]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(2, 2)">
      Select [2, 2]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(0, 0)">
      Select [0, 0]</ejs-button>
    </div>
    <div style="padding: 0px 0px 20px 0px">
      <ejs-button class="btn" @click="buttonClick(4, 2)">
      Select [4, 2]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(5, 1)">
      Select [5, 1]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(3, 3)">
      Select [3, 3]</ejs-button>
    </div>
    <div style="padding: 0px 0px 20px 0px">
      <ejs-button class="btn" @click="buttonClick(0, 3)">
      Select [0, 3]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(8, 1)">
      Select [8, 1]</ejs-button>
      <ejs-button class="btn" @click="buttonClick(8, 2)">
      Select [8, 2]</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
          width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120">
          </e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130">
          </e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div> 
  </div>
</template>

<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      selectionOptions :{ type: 'Multiple', mode: 'Cell' },
    };
  },
 methods: {
    buttonClick: function (rowIndex, columnIndex) {
        this.$refs.grid.ej2Instances.selectCells([{ rowIndex: rowIndex, cellIndexes: [columnIndex] }]);
    }
 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Cell Selection requires the selectionSettings.mode to be Cell or Both and type should be Multiple.

Range of cell selection

Range of cell selection in the Grid allows you to select multiple cells in a continuous range. This capability is particularly useful when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data.

To achieve range of cell selection, you can use the selectCellsByRange method. This method selects a range of cells based on the specified start and end indexes.

Range cell selection allows you to select multiple cells in box mode when cellSelectionMode is set to Box. However, if you set cellSelectionMode to Flow, it will select the range of cells between the start and end indexes, including other cells of the selected rows.

Cell Selection requires the selectionSettings.mode to be Cell or Both and type should be Multiple.

The following example demonstrates how to select a range of cells within the Grid by obtaining the selected cells start index and end index through textbox components. Then, pass these row and cell indexes as arguments to the selectCellsByRange method. When you trigger the button event by clicking the Select Cells button, a range of cells is selected within the Grid.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <div>
      <label style="padding: 30px 40px 0 0">Enter the start row index: </label>
      <ejs-textbox ref="textbox" required width="120"></ejs-textbox>
    </div>
    <div style="padding-top: 10px">
      <label style="padding: 30px 17px 0px 0px">Enter the start column index: </label>
      <ejs-textbox ref="textbox1" required width="120"></ejs-textbox>
    </div>
    <div style="padding-top: 10px">
      <label style="padding: 30px 40px 0 0">Enter the end row index: </label>
      <ejs-textbox ref="textbox2" required width="120"></ejs-textbox>
    </div>
    <div style="padding-top: 10px">
      <label style="padding: 30px 19px 0 0px">Enter the end column index: </label>
      <ejs-textbox ref="textbox3" required width="120"></ejs-textbox>
      <ejs-button id="button" @click="onClick">Select range of Cell</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { TextBoxComponent as EjsTextbox } from "@syncfusion/ej2-vue-inputs";
import { data } from "./datasource.js";
import { ref } from "vue";
const grid = ref(null);
const textbox = ref(null);
const textbox1 = ref(null);
const textbox2 = ref(null);
const textbox3 = ref(null);


const selectionOptions = { type: "Multiple", mode: "Cell" };
const onClick = function () {
  let startRowIndex = parseInt(textbox.value.ej2Instances.value, 10);
  let startColumnIndex = parseInt(textbox1.value.ej2Instances.value, 10);
  let endRowIndex = parseInt(textbox2.value.ej2Instances.value, 10);
  let endColumnIndex = parseInt(textbox3.value.ej2Instances.value, 10);
  grid.value.clearCellSelection();
  if (!isNaN(startRowIndex) &&!isNaN(startColumnIndex) && !isNaN(endRowIndex) && !isNaN(endColumnIndex))
    grid.value.selectCellsByRange(
      { rowIndex: startRowIndex, cellIndex: startColumnIndex },
      { rowIndex: endRowIndex, cellIndex: endColumnIndex }
    );
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
      <div>
        <label style="padding: 30px 40px 0 0">Enter the start row index: </label>
        <ejs-textbox ref="textbox" required width="120"></ejs-textbox>
      </div>
      <div style="padding-top: 10px">
        <label style="padding: 30px 17px 0px 0px">Enter the start column index: </label>
        <ejs-textbox ref="textbox1" required width="120"></ejs-textbox>
      </div>
      <div style="padding-top: 10px">
        <label style="padding: 30px 40px 0 0">Enter the end row index: </label>
        <ejs-textbox ref="textbox2" required width="120"></ejs-textbox>
      </div>  
      <div style="padding-top: 10px">
        <label style="padding: 30px 19px 0 0px">Enter the end column index: </label>
        <ejs-textbox ref="textbox3" required width="120"></ejs-textbox>
        <ejs-button id="button" @click="onClick">Select range of Cell</ejs-button >
      </div>
      <div style="padding: 20px 0px 0px 0px">
        <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
          <e-columns>
            <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
            width="120"></e-column>
            <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
            <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
            <e-column field="Freight" headerText="Freight" format="C2" width="100">
            </e-column>
          </e-columns>
        </ejs-grid>
      </div>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { TextBoxComponent } from "@syncfusion/ej2-vue-inputs";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-textbox":TextBoxComponent,
"ejs-button":ButtonComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      selectionOptions: { type: "Multiple", mode: "Cell" }
    };
  },
  methods: {
    onClick: function () {
      let startRowIndex = parseInt(this.$refs.textbox.ej2Instances.value, 10);
      let startColumnIndex = parseInt(this.$refs.textbox1.ej2Instances.value, 10);
      let endRowIndex = parseInt(this.$refs.textbox2.ej2Instances.value, 10);
      let endColumnIndex = parseInt(this.$refs.textbox3.ej2Instances.value, 10);
      this.$refs.grid.ej2Instances.clearCellSelection();
      if (!isNaN(startRowIndex) &&!isNaN(startColumnIndex) &&!isNaN(endRowIndex) && !isNaN(endColumnIndex))
        this.$refs.grid.ej2Instances.selectCellsByRange(
          { rowIndex: startRowIndex, cellIndex: startColumnIndex },
          { rowIndex: endRowIndex, cellIndex: endColumnIndex }
        );
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

How to get selected row cell indexes

You can retrieve the collection of selected row and cell indexes of the currently selected cells in the Grid component. This is useful for performing various actions or manipulations on the selected cells within the grid. To achieve this, you can utilize the getSelectedRowCellIndexes method.

The following example demonstrates how to obtain the selected row cell indexes using the getSelectedRowCellIndexes method and display them in a dialog when a button is clicked:

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <div style="padding: 20px 0px">
      <ejs-button class="sample" @click="showSelectedIndexes">
        Show Selected Cell Indexes</ejs-button>
    </div>
    <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120">
        </e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="130">
        </e-column>
        <e-column field="Freight" headerText="Freight" format="C2" width="100">
        </e-column>
      </e-columns>
    </ejs-grid>
    <ejs-dialog ref="dialogComponent" :header="'Selected Cell Indexes'" :content="dialogContent" :visible="false"
      :close="dialogClose" showCloseIcon="true" width="350px" :position='{ X: 300, Y: 100 }'>
    </ejs-dialog>
  </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { DialogComponent as EjsDialog } from "@syncfusion/ej2-vue-popups";
import { data } from "./datasource.js";
import { ref } from "vue";
const grid = ref(null);
const dialogComponent = ref(null);
let selectedCellIndexes = [];
const dialogContent = ref("");
const selectionOptions = { mode: "Cell", type: "Multiple",persistSelection: true };
const showSelectedIndexes = () => {
  selectedCellIndexes = grid.value.getSelectedRowCellIndexes();
  if (selectedCellIndexes.length > 0) {
    let content = "";
    selectedCellIndexes.forEach((index) => {
      content += `Row: ${index.rowIndex}, CellIndex: ${index.cellIndexes}<br>`;
    });
    dialogContent.value = content;
    dialogComponent.value.show();
  }
}
  const dialogClose = () => {
  dialogComponent.value.hide();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div style="padding: 20px 0px">
      <ejs-button class="sample" @click="showSelectedIndexes">
      Show Selected Cell Indexes</ejs-button>
    </div>
    <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions" >
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" 
        textAlign="Right" width="120"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120">
        </e-column>
        <e-column field="ShipCountry" headerText="Ship Country" width="130">
        </e-column>
        <e-column field="Freight" headerText="Freight" format="C2" width="100">
        </e-column>
      </e-columns>
    </ejs-grid>
    <ejs-dialog ref="dialogComponent" :header="'Selected Cell Indexes'" :content="dialogContent"
    :visible="false" :close="dialogClose" showCloseIcon="true" width="350px" :position='{ X: 300, Y: 100 }'>
    </ejs-dialog>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { DialogComponent } from "@syncfusion/ej2-vue-popups";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"ejs-dialog":DialogComponent
},
  data() {
    return {
      data: data,
      selectedCellIndexes: [],
      dialogContent: "",
      selectionOptions: { mode: "Cell", type: "Multiple", persistSelection: true }
    };
  },
  methods: {
    showSelectedIndexes() {
      this.selectedCellIndexes = this.$refs.grid.ej2Instances.getSelectedRowCellIndexes();
      if (this.selectedCellIndexes.length > 0) {
        let content = "";
        this.selectedCellIndexes.forEach((index) => {
          content += `Row: ${index.rowIndex}, CellIndex: ${index.cellIndexes}<br>`;
        });
        this.dialogContent = content;
        this.$refs.dialogComponent.show();
      }
    },
    dialogClose() {
      this.$refs.dialogComponent.hide();
    },
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Clear cell selection programmatically

Clearing cell selection programmatically in the Grid component is a useful feature when you want to remove any existing cell selections. To achieve this, you can use the clearCellSelection method.

The clearCellSelection method is applicable when the selection type is set to Multiple or Single.

The following example demonstrates how to clear cell selection by calling the clearCellSelection method in the button click event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <div style="padding: 20px 0px 0px 0px">
      <ejs-button @click='onClick'>Clear cell selection</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource='data' :selectionSettings='selectionOptions'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
          <e-column field='CustomerID' headerText='Customer ID' width=120>
          </e-column>
          <e-column field='ShipCountry' headerText='Ship Country' width=130>
          </e-column>
          <e-column field='Freight' headerText='Freight' format='C2' width=100>
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { data } from './datasource.js';
import { ref } from 'vue';
const grid = ref(null);
const selectionOptions = { type: 'Multiple', mode: 'Cell' };
const onClick = function () {
  grid.value.clearCellSelection();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
    <div style="padding: 20px 0px 0px 0px">
      <ejs-button @click='onClick'>Clear cell selection</ejs-button>
    </div>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource='data' :selectionSettings='selectionOptions'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
          width=120></e-column>
          <e-column field='CustomerID' headerText='Customer ID' width=120>
          </e-column>
          <e-column field='ShipCountry' headerText='Ship Country' width=130>
          </e-column>
          <e-column field='Freight' headerText='Freight' format= 'C2' width=100>
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>

<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      selectionOptions :{ type: 'Multiple', mode: 'Cell' },
    };
  },
 methods: {
    onClick: function () {
        this.$refs.grid.ej2Instances.clearCellSelection();
    }
 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Cell selection events

The Grid provides several events related to cell selection, allowing you to respond to and customize the behavior of cell selection. Here are the available cell selection events:

cellSelecting: This event is triggered before any cell selection occurs. It provides an opportunity to implement custom logic or validation before a cell is selected, allowing you to control the selection process.

cellSelected: This event is triggered after a cell is successfully selected. You can use this event to perform actions or updates when a cell is selected.

cellDeselecting: This event is triggered just before a selected cell is deselected. It allows you to perform custom logic or validation to decide whether the cell should be deselected or not.

cellDeselected: This event is triggered when a particular selected cell is deselected. You can use this event to perform actions or validations when a cell is no longer selected.

In the following example, cell selection is canceled when the value of ShipCountry is equal to France within the cellSelecting event. The background color changes to green when the cellSelected event is triggered, and it changes to red when the cellDeselecting event is triggered. Furthermore, the text color switches to white when the cellDeselected event is triggered. A notification message is displayed to indicate which event was triggered whenever a cell is selected.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <p id="message">{{ message }}</p>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions" :cellSelected="cellSelected"
        :cellSelecting="cellselecting" :cellDeselected="cellDeselected" :cellDeselecting="cellDeselecting">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const message = "";
const selectionOptions = { type: 'Multiple', mode: 'Cell' };
const cellSelected = function (args) {
  this.message = ` Trigger cellSelected`;
  args.currentCell.style.backgroundColor = 'rgb(96, 158, 101)';
};
const cellselecting = function (args) {
  this.message = `Trigger cellSelecting`;
  if (args.data.ShipCountry == 'France')
    args.cancel = true;
}
const cellDeselected = function (args) {
  this.message = `Trigger cellDeselected`;
  if (args.cells && args.cells.length > 0) {
    args.cells[0].style.backgroundColor = 'rgb(245, 69, 69)';
  }
}
const cellDeselecting = function (args) {
  this.message = `Trigger cellDeselecting`;
  if (args.cells && args.cells.length > 0) {
    args.cells[0].style.color = 'rgb(253, 253, 253)';
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";

#message {
  color: red;
  text-align: center;
  padding: 0px 0px 10px 0px;
}
</style>
<template>
  <div id="app">
    <p id="message">{{message}}</p>
    <div style="padding: 20px 0px 0px 0px">
      <ejs-grid ref="grid" :dataSource="data" :selectionSettings="selectionOptions"
      :cellSelected="cellSelected" :cellSelecting="cellselecting"
      :cellDeselected="cellDeselected" :cellDeselecting="cellDeselecting">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" 
          width="120"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
          <e-column field="ShipCountry" headerText="Ship Country" width="130"></e-column>
          <e-column field="Freight" headerText="Freight" format="C2" width="100">
          </e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      message:"",
      selectionOptions :{ type: 'Multiple', mode: 'Cell' },
    };
  },
 methods: {
  cellSelected: function (args) {
    this.message = ` Trigger cellSelected`;
    args.currentCell.style.backgroundColor = 'rgb(96, 158, 101)';
  },
  cellselecting: function (args) {
    this.message = `Trigger cellSelecting`;
    if (args.data.ShipCountry == 'France')
      args.cancel = true;
  },
  cellDeselected: function (args) {
    this.message = `Trigger cellDeselected`;
    if (args.cells && args.cells.length > 0) {
      args.cells[0].style.backgroundColor = 'rgb(245, 69, 69)';
    }
  },
  cellDeselecting: function (args) {
    this.message = `Trigger cellDeselecting`;
    if (args.cells && args.cells.length > 0) {
      args.cells[0].style.color = 'rgb(253, 253, 253)';
    }  
  }
 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
#message {
    color: red;
    text-align: center;
    padding: 0px 0px 10px 0px;
  }
</style>