Maximize productivity with
30% off* for a limited time
using BOOSTDEV30.
Includes 3- and 5-packs.
*Some exclusions may apply.New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.ResetOnRowClick
: In ResetOnRowClick mode, when user clicks on a row it will reset previously selected row. Also you can perform multiple-selection in this mode by press and hold CTRL key and click the desired rows. To select range of rows, press and hold the SHIFT key and click the rows.
App.Vue
<template>
<div>
<div class="control-section" id="app">
<ejs-grid
ref="grid"
:dataSource="data"
:selectionSettings="selectionOptions"
:recordDoubleClick="recordDoubleClick"
:rowSelecting=" rowSelecting "
height="315px"
>
</ejs-grid>
</div>
<ejs-dialog
:buttons="alertDlgButtons"
ref="alertDialog"
v-bind:visible="false"
:animationSettings="animationSettings"
:content="alertContent"
:showCloseIcon="showCloseIcon"
:target="target"
:width="alertWidth"
></ejs-dialog>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
import { DialogPlugin } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { isNullOrUndefined } from "@syncfusion/ej2-base";
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);
Vue.use(GridPlugin);
export default {
data() {
return {
alertContent: "hii",
showCloseIcon: false,
target: ".control-section",
alertWidth: "300px",
animationSettings: { effect: "None" },
alertDlgButtons: [
{
click: this.alertDlgBtnClick,
buttonModel: { content: "OK", isPrimary: true }
}
],
data: data,
selectionOptions: {
checkboxMode: "ResetOnRowClick"
}
};
},
methods: {
rowSelecting: function(args) {
this.$refs.grid.clearSelection();
},
alertDlgBtnClick: function() {
this.$refs.alertDialog.hide();
},
recordDoubleClick: function(args) {
this.$refs.grid.selectRow(args.rowIndex);
this.$refs.alertDialog.show();
this.$refs.alertDialog.isModal = true;
}
}
};
</script>
<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
</style>
|
// Grid’s SelectionSettings property
selectionOptions: {
enableToggle: false,
checkboxMode: "ResetOnRowClick"
} |