Row selection in Vue Grid component
20 Sep 202424 minutes to read
Row selection in the Grid component allows you to interactively select specific rows or ranges of rows 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 row within the Grid.
To enable row selection, you should set the selectionSettings.mode property to either Row or Both. This property determines the selection mode of the grid.
Single row selection
Single row selection allows you to select a single row at a time within the Grid. This feature is useful when you want to focus on specific rows or perform actions on the data within a particular row.
To enable single row selection, set the selectionSettings.mode property to Row and the selectionSettings.type property to Single. This configuration allows you to select a only one row at a time within the grid.
Here’s an example of how to enable single row selection using properties:
<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: 'Row', 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: "Row", 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 row selection
Multiple row selection allows you to select multiple rows within the Grid. This feature is valuable when you need to perform actions on several rows simultaneously or focus on specific data areas.
To enable multiple row selection, set the selectionSettings.mode property to Row and the selectionSettings.type property to Multiple. This configuration allows you to select a multiple rows at a time within the grid.
Here’s an example of how to enable multiple rows selection using properties:
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" :allowPaging="true" :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 { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
const selectionOptions = { mode: "Row", type: "Multiple" };
provide('grid', [Page]);
</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" :allowPaging="true" :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, Page } 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: "Row", type: "Multiple" },
};
},
provide: {
grid: [Page]
},
};
</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 row at initial rendering
You have the ability to select a specific row during the initial rendering of the Grid component. This feature is particularly useful when you want to highlight or pre-select a specific row in the grid. To achieve this, you can utilize the selectedRowIndex property provided by the Grid component.
In the following example, it demonstrates how to select a row at initial rendering:
<template>
<div id="app">
<ejs-grid :dataSource='data' :selectedRowIndex=1 :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 setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
const selectionOptions = { type: "Multiple", mode: "Row" };
provide('grid', [Page]);
</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 :dataSource='data' :selectedRowIndex=1 :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 { GridComponent, ColumnsDirective, ColumnDirective, Page } 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: { type: "Multiple", mode: "Row" },
};
},
provide: {
grid: [Page]
},
};
</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 rows in any page based on index value
The Grid allows you to select rows in any page based on their index value. This feature is useful when you want to perform specific actions on rows, such as highlighting, applying styles, or executing operations, regardless of their location across multiple pages within the grid.
To achieve this, you can utilize the selectRow method and the goToPage method of the Grid control. By handling the change event of DropDownList
component, you can implement the logic to navigate to the desired page and select the row based on the index value.
Additionally, by handling the actionComplete event of the Grid, you can maintain the selection of the desired row after completing the paging action.
The following example demonstrates how to select rows in any page based on index value using actionComplete
and change
event:
<template>
<div id="app">
<div style="display: inline-block">
<label style="padding: 30px 20px 0 0" > Select Row :</label>
<ejs-dropdownlist index='0' width='220' :dataSource='dropdownData' :change='valueChange' >
</ejs-dropdownlist>
</div>
<div style="padding: 20px 17px 0 0">
<ejs-grid ref="grid" :dataSource='data' :actionComplete='actioncomplete' allowPaging='true'
height=365 :pageSettings='initialPage'>
<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 field='OrderDate' headerText='Order Date' width='130'
format="yMd" type="date" textAlign='Right'></e-column>
<e-column field='Freight' headerText='Freight' width='120'
format='C2' textAlign='Right'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='170'>
</e-column>
</e-columns>
</ejs-grid>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page } 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 value = ref(1);
const mod = ref(0);
const dropdownData = [
{ text: "Select row index" },
{ text: "1", value: "1" },
{ text: "2", value: "2" },
{ text: "30", value: "30" },
{ text: "80", value: "80" },
{ text: "110", value: "110" },
{ text: "120", value: "120" },
{ text: "210", value: "210" },
{ text: "310", value: "310" },
{ text: "410", value: "410" },
{ text: "230", value: "230" },
];
const initialPage = { pageSize: 10 };
const actioncomplete = function () {
grid.value.ej2Instances.selectRow(mod.value);
};
const valueChange = function (args) {
value.value = +args.value;
mod.value = (value.value - 1) % 10;
const page = Math.ceil(value.value / 10);
if (page === 1) {
if (grid.value.ej2Instances.pagerModule.pagerObj.currentPage != 1) {
grid.value.ej2Instances.pagerModule.goToPage(1);
}
grid.value.selectRow(mod.value);
} else {
grid.value.ej2Instances.pagerModule.goToPage(page);
if (grid.value.ej2Instances.pagerModule.pagerObj.currentPage == page) {
grid.value.selectRow(mod.value);
}
}
};
provide('grid', [Page]);
</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 20px 0 0" > Select Row :</label>
<ejs-dropdownlist index='0' width='220' :dataSource='dropdownData' :change='valueChange' >
</ejs-dropdownlist>
</div>
<div style="padding: 20px 17px 0 0">
<ejs-grid ref="grid" :dataSource='data' :actionComplete='actioncomplete' allowPaging='true'
height=365 :pageSettings='initialPage'>
<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 field='OrderDate' type="date" 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 field='ShipCountry' headerText='Ship Country' width='170'></e-column>
</e-columns>
</ejs-grid>
</div>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Page } 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: "Select row index" },
{ text: "1", value: "1" },
{ text: "2", value: "2" },
{ text: "30", value: "30" },
{ text: "80", value: "80" },
{ text: "110", value: "110" },
{ text: "120", value: "120" },
{ text: "210", value: "210" },
{ text: "310", value: "310" },
{ text: "410", value: "410" },
{ text: "230", value: "230" },
],
initialPage: { pageSize: 10 },
};
},
methods: {
actioncomplete: function () {
this.$refs.grid.ej2Instances.selectRow(this.mod);
},
valueChange: function (args) {
this.value = +args.value;
this.mod = (this.value - 1) % 10;
const page = Math.ceil(this.value / 10);
if (page === 1) {
if (this.$refs.grid.ej2Instances.pagerModule.pagerObj.currentPage != 1 ) {
this.$refs.grid.ej2Instances.pagerModule.goToPage(1);
}
this.$refs.grid.ej2Instances.selectRow(this.mod);
} else {
this.$refs.grid.ej2Instances.pagerModule.goToPage(page);
if ( this.$refs.grid.ej2Instances.pagerModule.pagerObj.currentPage == page) {
this.$refs.grid.ej2Instances.selectRow(this.mod);
}
}
}
},
provide: {
grid: [Page]
}
};
</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 row selection by single click on row
The Grid component allows you to perform multiple row selection by simply clicking on rows one by one without pressing CTRL or SHIFT keys. This means that when you click on a row, it will be selected, and clicking on another row will add it to the selection without unselecting the previously selected rows. To deselect a previously selected row, you can click on the row again, and it will be unselected.
To enable the simple multiple row selection, you need to set the selectionSettings.enableSimpleMultiRowSelection property to true.
The following example demonstrates how to enable multiple row selection with a single click on the Grid row using enableSimpleMultiRowSelection
property:
<template>
<div id="app">
<div style="padding: 0px 0px 20px 0px; display:flex">
<label style="padding: 0px 20px 0px 0px;font-weight: bold">Enable/Disable simple multiple row selection</label>
<ejs-switch :change="toggleRowSelection"></ejs-switch>
</div>
<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>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { SwitchComponent as EjsSwitch } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
import { ref } from "vue";
const grid = ref(null);
const selectionOptions = { type: "Multiple" };
const toggleRowSelection = function (args) {
grid.value.ej2Instances.selectionSettings.enableSimpleMultiRowSelection = args.checked ? true : false;
};
</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; display:flex">
<label style="padding: 0px 20px 0px 0px; font-weight: bold">Enable/Disable simple multiple row selection</label>
<ejs-switch :change="toggleRowSelection"></ejs-switch>
</div>
<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>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { SwitchComponent } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-switch":SwitchComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
selectionOptions: { type: "Multiple" },
};
},
methods: {
toggleRowSelection: function (args) {
this.$refs.grid.ej2Instances.selectionSettings.enableSimpleMultiRowSelection = args.checked ? true : false;
}
}
};
</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 rows externally
You can perform single row selection, multiple row selection, and range of row selection externally in a Grid using built-in methods. This feature allows you to interact with specific rows within the Grid. The following topic demonstrates how you can achieve these selections using methods.
Single row selection
Single row selection allows you to select a single row at a time within the Grid. This feature is useful when you want to focus on specific rows or perform actions on the data within a particular row.
To achieve single row selection, you can use the selectRow method. This method allows you to programmatically select a specific row within the Grid by specifying its index.
The following example demonstrates how to select a single row within the Grid by obtaining the selected row index through a textbox component and passing these row index as argument to the selectRow
method. When the button event is triggered by clicking the Select Row button, a single row is selected within the Grid:
<template>
<div id="app">
<div>
<label style="padding: 30px 17px 0 0">Enter the row index: </label>
<ejs-textbox ref="textbox" required width="220">
</ejs-textbox>
</div>
<div style="padding: 10px 0 0px 150px">
<ejs-button id="button" @click="onClick">Select Row</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 selectionOptions = { type: "Single", mode: "Row" };
const onClick = function () {
const rowIndex = parseInt(textbox.value.ej2Instances.value, 10);
if (!isNaN(rowIndex)) {
grid.value.selectRow(rowIndex);
}
};
</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="220">
</ejs-textbox>
</div>
<div style="padding: 10px 0 0px 150px">
<ejs-button id="button" @click="onClick">Select Row</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: "Row", type: "Single" },
};
},
methods: {
onClick: function () {
const rowIndex = parseInt(this.$refs.textbox.ej2Instances.value, 10);
if (!isNaN(rowIndex)) {
this.$refs.grid.ej2Instances.selectRow(rowIndex);
}
},
}
};
</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 rows selection
The Vue Grid allows you to select multiple rows within the grid simultaneously. This feature is valuable when you need to perform actions or operations on several rows at once or focus on specific areas of your data.
To achieve multiple row selection, you can use the selectRows method. This method allows you to select a collection of rows by specifying their indexes, giving you the ability to interact with multiple rows together.
The following example, demonstrates how to select multiple rows in the Grid by calling the selectRows
method within the button click event and passing an array of row indexes as arguments.
<template>
<div id="app">
<div style="padding: 10px 0px 20px 0px">
<ejs-button @click="selectRows([1, 3])">
select [1, 3] </ejs-button>
<ejs-button @click="selectRows([0, 2])">
select [0, 2]</ejs-button>
<ejs-button @click="selectRows([2, 4])">
select [2, 4] </ejs-button>
<ejs-button @click="selectRows([0,5])">
select [0,5]</ejs-button>
<ejs-button @click="selectRows([1,6])">
select [1,6]</ejs-button>
</div>
<div style="padding: 10px 0px 20px 0px">
<ejs-button @click="selectRows([0,7,8])">
select [0,7,8]</ejs-button>
<ejs-button @click="selectRows([1,9,10])">
select [1,9,10]</ejs-button>
<ejs-button @click="selectRows([4,7,12])">
select [4,7,12]</ejs-button>
<ejs-button @click="selectRows([2,5,6])">
select [2,5,6]</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: 'Row' };
const selectRows = function (rowIndexes) {
grid.value.clearRowSelection();
grid.value.selectRows(rowIndexes);
}
</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: 10px 0px 20px 0px">
<ejs-button @click="selectRows([1, 3])">
select [1, 3] </ejs-button>
<ejs-button @click="selectRows([0, 2])">
select [0, 2]</ejs-button>
<ejs-button @click="selectRows([2, 4])">
select [2, 4] </ejs-button>
<ejs-button @click="selectRows([0,5])">
select [0,5]</ejs-button>
<ejs-button @click="selectRows([1,6])">
select [1,6]</ejs-button>
</div>
<div style="padding: 10px 0px 20px 0px">
<ejs-button @click="selectRows([0,7,8])">
select [0,7,8]</ejs-button>
<ejs-button @click="selectRows([1,9,10])">
select [1,9,10]</ejs-button>
<ejs-button @click="selectRows([4,7,12])">
select [4,7,12]</ejs-button>
<ejs-button @click="selectRows([2,5,6])">
select [2,5,6]</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: 'Row' },
};
},
methods: {
selectRows: function (rowIndexes) {
this.$refs.grid.ej2Instances.clearRowSelection();
this.$refs.grid.ej2Instances.selectRows(rowIndexes);
}
}
}
</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>
Range of rows selection
Range of row selection in the Grid enables you to select a continuous range of rows within the grid. This feature is particularly useful when you want to perform actions on multiple rows simultaneously or focus on a specific range of data.
To achieve range of row selection, you can use the selectRowsByRange method. This method selects a range of rows from start and end row indexes.
The following example, demonstrates how to select a range of rows within the Grid by obtaining the selected rows start index and end index through textbox components. Then, pass these start index and end index as arguments to the selectRowsByRange
method. When you trigger the button event by clicking the Select Rows button, a range of rows is selected within the Grid.
<template>
<div id="app">
<div>
<label style="padding: 30px 17px 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 0 0">Enter the end row index: </label>
<ejs-textbox ref="textbox1" required width="120"></ejs-textbox>
</div>
<div style="padding: 10px 0 0px 180px">
<ejs-button id="button" @click="onClick">Select rows</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 selectionOptions = { type: 'Multiple', mode: 'Row' };
const onClick = function () {
let startIndex = parseInt(textbox.value.ej2Instances.value, 10);
let endIndex = parseInt(textbox1.value.ej2Instances.value, 10);
grid.value.clearRowSelection();
if (!isNaN(startIndex) && !isNaN(endIndex)) {
grid.value.selectRowsByRange(startIndex, endIndex);
}
}
</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 start 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 end row index: </label>
<ejs-textbox ref="textbox1" required width="120"></ejs-textbox>
</div>
<div style="padding: 10px 0 0px 180px">
<ejs-button id="button" @click="onClick">Select rows</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: 'Row' },
pageOptions : { pageSize: 5 },
};
},
methods: {
onClick: function () {
let startIndex = parseInt(this.$refs.textbox.ej2Instances.value, 10);
let endIndex = parseInt(this.$refs.textbox1.ej2Instances.value, 10);
this.$refs.grid.ej2Instances.clearRowSelection();
if (!isNaN(startIndex) && !isNaN(endIndex)) {
this.$refs.grid.ej2Instances.selectRowsByRange(startIndex, endIndex);
}
}
}
}
</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 grid rows based on certain condition
You can programmatically select specific rows in the Vue Grid component based on a certain condition. This feature is particularly useful when you need to dynamically highlight or manipulate specific rows in the grid based on custom conditions. This functionality can be achieved using the selectRows method in the dataBound event of Grid and rowDataBound along with obtaining the index value based on the condition.
In the below demo, we have selected the grid rows only when EmployeeID column value greater than 3.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" allowPaging="true" :selectionSettings="selectionOptions" :rowDataBound="rowDataBound" :dataBound="dataBound"
height="273px">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="100"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="120"></e-column>
<e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns,Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
import { provide, ref } from "vue";
const grid = ref(null);
const selectionOptions = { type: "Multiple", mode: "Row" };
let selIndex = [];
const rowDataBound = function (args) {
if (args.data.CustomerID > 3) {
selIndex.push(parseInt(args.row.getAttribute("data-rowindex"), 10));
}
};
const dataBound = function () {
if (selIndex.length) {
grid.value.selectRows(selIndex);
selIndex = [];
}
};
provide('grid', [Page]);
</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" allowPaging="true" :selectionSettings="selectionOptions" :rowDataBound="rowDataBound" :dataBound="dataBound"
height="273px">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="100"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="120"></e-column>
<e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective,Page } 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: { type: "Multiple", mode: "Row" },
pageOptions: { pageSize: 5 },
selIndex: [],
};
},
methods: {
rowDataBound: function (args) {
if (args.data.CustomerID > 3) {
this.selIndex.push(
parseInt(args.row.getAttribute("data-rowindex"), 10)
);
}
},
dataBound: function () {
if (this.selIndex.length) {
this.$refs.grid.ej2Instances.selectRows(this.selIndex);
this.selIndex = [];
}
},
},
provide:{
grid:[Page]
}
};
</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 indexes
You can retrieve the indexes of the currently selected rows in the Grid component. This feature is particularly useful when you need to perform actions or operations specifically on the selected rows.
To achieve this, you can leverage the getSelectedRowIndexes method, which returns an array of numbers representing the indexes of the selected rows.
The following example demonstrates how to get selected row indexes using getSelectedRowIndexes
method:
<template>
<div id="app">
<div style="padding: 10px 0px 20px 0px">
<ejs-button class="btn" @click="onClick">Get selected row indexes</ejs-button >
</div>
<p id="message">{{showMessage}}</p>
<ejs-grid ref="grid" :dataSource="data" height="315px" :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="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 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 showMessage = ref("");
const selectionOptions = { type: "Multiple", mode: "Row" };
const onClick = function () {
const selectedRowIndexes = grid.value.getSelectedRowIndexes();
if (selectedRowIndexes.length > 0)
showMessage.value = "Selected row indexes:" + selectedRowIndexes.join(", ");
};
</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">
<div style="padding: 10px 0px 20px 0px">
<ejs-button class="btn" @click="onClick">Get selected row indexes</ejs-button >
</div>
<p id="message">{{showMessage}}</p>
<ejs-grid ref="grid" :dataSource="data" height="315px" :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="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 { 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,
showMessage: "",
selectedRowIndexes: [],
selectionOptions: { type: "Multiple" },
};
},
methods: {
onClick: function () {
this.selectedRowIndexes = this.$refs.grid.ej2Instances.getSelectedRowIndexes();
if (this.selectedRowIndexes.length > 0)
this.showMessage ="Selected row indexes:" + this.selectedRowIndexes.join(", ");
},
}
};
</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>
How to get selected records on various pages
The Grid component allows you to retrieve the selected records even when navigating to different pages. This feature is useful when working with large data sets and allows you to perform actions on the selected records across multiple pages.
To persist the selection across pages, you need to enable the persistSelection property. By default, this property is set to false. To enable it, set the value to true in the selectionSettings
property of the Grid component.
To retrieve the selected records from different pages, you can use the getSelectedRecords method. This method returns an array of the selected records.
The following example demonstrates how to retrieve selected records from various pages using the getSelectedRecords
method and display OrderID in a dialog when a button is clicked:
<template>
<div id="app">
<div style="padding: 20px 0px">
<ejs-button @click="showSelectedRecords">Show Selected Records</ejs-button>
</div>
<ejs-grid ref="grid" :dataSource="data" :allowPaging="true" :selectionSettings="selectionOptions" :pageSettings='pageSettings'>
<e-columns>
<e-column type="checkbox" width="50"></e-column>
<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" :visible="false" :header="'Selected Records'" :content="dialogContent" :close="dialogClose" showCloseIcon="true" width="400px" :position="{ X: 300, Y: 100 }">
</ejs-dialog>
</div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns,Page} 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);
const dialogContent = ref("");
let selectedRecords = [];
const pageSettings = { pageSize: 5 };
const selectionOptions = { type: 'Multiple', persistSelection: true };
const showSelectedRecords = () => {
selectedRecords = grid.value.getSelectedRecords();
if (selectedRecords.length > 0) {
let content = "";
selectedRecords.forEach((index) => {
content += "<b>Order ID:</b>" + index.OrderID + "<br>";
});
dialogContent.value = content;
dialogComponent.value.show();
}
}
const dialogClose = () => {
dialogComponent.value.hide();
}
provide('grid', [Page]);
</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 @click="showSelectedRecords">Show Selected Records</ejs-button>
</div>
<ejs-grid ref="grid" :dataSource="data" :allowPaging="true" :selectionSettings="selectionOptions" :pageSettings='pageSettings'>
<e-columns>
<e-column type="checkbox" width="50"></e-column>
<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" :visible="false" :header="'Selected Records'" :content="dialogContent" :close="dialogClose" showCloseIcon="true" width="400px" :position="{ X: 300, Y: 100 }">
</ejs-dialog>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective,Page} 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,
dialogContent: "",
selectedRecords: [],
pageSettings: { pageSize: 5 },
selectionOptions: { type: 'Multiple', persistSelection: true }
};
},
methods: {
showSelectedRecords() {
this.selectedRecords = this.$refs.grid.ej2Instances.getSelectedRecords();
if (this.selectedRecords.length > 0) {
let content = "";
this.selectedRecords.forEach((index) => {
content += "<b>Order ID:</b>" + index.OrderID +"<br>";
});
this.dialogContent = content;
this.$refs.dialogComponent.show();
}
},
dialogClose() {
this.$refs.dialogComponent.hide();
}
},
provide: {
grid: [Page]
}
}
</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>
To persist the grid selection, it is necessary to define any one of the columns as a primary key using the columns property.
How to get selected records
The get selected records allows you to retrieve the data of the selected rows from the Grid component. This can be particularly useful when you need to perform actions on the selected data or display specific information based on the selected rows.
To retrieve the selected records, you can use the getSelectedRecords method. This method allows you to obtain an array of objects representing the selected records.
Here’s an example that displays the selected row count using the getSelectedRecords
method:
<template>
<div id="app">
<div style="padding: 20px 0px">
<ejs-button @click="onClick">Selected Records count</ejs-button>
</div>
<p id="message">{{ showMessage }}</p>
<div class="control-section">
<ejs-grid ref="grid" :dataSource="data" allowPaging="true" :allowSelection="true"
:selectionSettings="selectionOptions">
<e-columns>
<e-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="120"
textAlign="Right"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="100"></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="100" format="C2"
textAlign="Right"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="130" format="yMd" ></e-column>
</e-columns>
</ejs-grid>
</div>
</div>
</template>
<script setup>
import { ref, provide } from 'vue';
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page } from "@syncfusion/ej2-vue-grids";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { data } from './datasource.js';
const grid = ref(null);
const showMessage = ref('');
const selectionOptions = { type: 'Multiple', persistSelection: true };
const onClick = () => {
const selectedRecordscount = grid.value.getSelectedRecords().length;
showMessage.value = "Selected record count: " + selectedRecordscount;
};
provide('grid', [Page]);
</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">
<div style="padding: 20px 0px">
<ejs-button @click="Onclick">Selected Records count</ejs-button>
</div>
<p id="message" > {{ showMessage }}</p>
<div class="control-section">
<ejs-grid ref="grid" :dataSource="data" allowPaging="true" :allowSelection="true"
:selectionSettings="selectionOptions">
<e-columns>
<e-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="120"
textAlign="Right"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="100"></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="100" format="C2"
textAlign="Right"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="130" format="yMd" ></e-column>
</e-columns>
</ejs-grid>
</div>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective,Page } 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,
showMessage :"",
selectionOptions : { type: 'Multiple',persistSelection: true }
};
},
methods: {
Onclick() {
var selectedRecordscount = this.$refs.grid.getSelectedRecords().length;
this.showMessage = "Selected record count:" + selectedRecordscount ;
}
},
provide:{
grid:[Page]
}
}
</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>
Clear row selection programmatically
Clearing row selection programmatically in the Grid component is a useful feature when you want to remove any existing row selections. To achieve this, you can use the clearRowSelection method.
- The
clearRowSelection
method is applicable when the selection type is set to Multiple or Single.
The following example demonstrates how to clear row selection by calling the clearRowSelection method in the button click event.
<template>
<div id="app">
<div style="padding: 20px 0px 0px 0px">
<ejs-button @click='onClick'>clear Row Selection</ejs-button>
</div>
<div style="padding: 20px 0px 0px 0px">
<ejs-grid ref="grid" :dataSource='data' :selectedRowIndex=2 allowPaging=true
:selectionSettings='selectionOptions' :pageSettings='pageOptions'>
<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 { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page } 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: "Row" };
const pageOptions = { pageSize: 5 };
const onClick = function () {
grid.value.clearRowSelection();
};
provide('grid', [Page]);
</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 Row Selection</ejs-button>
</div>
<div style="padding: 20px 0px 0px 0px">
<ejs-grid ref="grid" :dataSource='data' :selectedRowIndex=2 allowPaging=true
:selectionSettings='selectionOptions' :pageSettings='pageOptions'>
<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, Page } 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: { mode: "Row", type: "Multiple" },
pageOptions: { pageSize: 5 },
};
},
methods: {
onClick() {
this.$refs.grid.ej2Instances.clearRowSelection();
},
},
provide: {
grid: [Page]
},
};
</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>
Row selection events
The Grid provides several events related to row selection that allow you to respond to and customize the behavior of row selection. These events give you control over various aspects of row selection. Here are the available row selection events:
rowSelecting: This event is triggered before any row selection occurs. It provides an opportunity to implement custom logic or validation before a row is selected, allowing you to control the selection process.
rowSelected: This event is triggered after a row is successfully selected. You can use this event to perform actions or updates when a row is selected.
rowDeselecting: This event is triggered just before a selected row is deselected. It allows you to perform custom logic or validation to decide whether the row should be deselected or not.
rowDeselected: This event is triggered when a particular selected row is deselected. You can use this event to perform actions or validations when a row is no longer selected.
In the following example, row selection is canceled when the value of CustomerID is equal to VINET within the rowSelecting
event. The background color changes to green when the value of Freight is greater than 10 and less than or equal to 140, triggering the rowDeselected
event. The background color changes to red when the value of Freight is less than or equal to 10 during the rowDeselected
event. Furthermore, the background color changes to yellow when the value of Freight is greater than 140 during the rowDeselected
event. A notification message is displayed to indicate which event was triggered whenever a row is selected.
<template>
<div id="app">
<p id="message">{{message}}</p>
<div style="padding: 20px 0px 0px 0px">
<ejs-grid ref="grid" :enableHover='false' :dataSource="data"
:selectionSettings="selectionOptions" :rowSelected="rowSelected"
:rowSelecting="rowselecting" :rowDeselected="rowDeselected"
:rowDeselecting="rowDeselecting">
<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 { data } from './datasource.js';
const selectionOptions = { mode: 'Row', type: 'Multiple' };
const message = ref("");
const rowselecting = function(args) {
message.value = `Trigger rowSelecting`;
if (args.data.CustomerID == 'VINET')
args.cancel = true;
}
const rowSelected = function(args) {
message.value = ` Trigger rowSelected`;
if (args.data.Freight > 10 || args.data.Freight <= 140)
args.row.style.backgroundColor = 'rgb(96, 158, 101)';
}
const rowDeselecting = function(args) {
message.value = `Trigger rowDeselecting`;
if (args.data.Freight > 140)
args.row.style.backgroundColor = 'yellow';
}
const rowDeselected = function(args) {
message.value = `Trigger rowDeselected`;
if (args.data.Freight <= 10)
args.row.style.backgroundColor = 'red';
}
</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" :enableHover='false' :dataSource="data"
:selectionSettings="selectionOptions" :rowSelected="rowSelected"
:rowSelecting="rowselecting" :rowDeselected="rowDeselected"
:rowDeselecting="rowDeselecting">
<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 : { mode: 'Row', type: 'Multiple' },
};
},
methods: {
rowselecting(args) {
this.message = `Trigger rowSelecting`;
if (args.data.CustomerID == 'VINET')
args.cancel = true;
},
rowSelected(args) {
this.message = ` Trigger rowSelected`;
if (args.data.Freight > 10 || args.data.Freight <= 140)
args.row.style.backgroundColor = 'rgb(96, 158, 101)';
},
rowDeselecting(args) {
this.message = `Trigger rowDeselecting`;
if (args.data.Freight > 140)
args.row.style.backgroundColor = 'yellow';
},
rowDeselected(args) {
this.message = `Trigger rowDeselected`;
if (args.data.Freight <= 10)
args.row.style.backgroundColor = 'red';
}
}
}
</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>