Checkbox

William Morgenweck

Asked On November 13, 2019 07:46 PM UTC

The action of the checkbox is very confusing.

https://ej2.syncfusion.com/vue/documentation/grid/selection/#checkbox-selection

based upon 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.

and that works great but if a person clicks the checkbox then multiple rows are selected even if

selectOptions: {

type: "Single",

mode: "Row",

checkboxMode: "ResetOnRowClick"

Is there a mode to only allow one checkbox at a time?

Also if you double click the row the checkbox toggles. I need to double click the row to call a dialog box to show additional data and I would like the row checked until another row is selected. Is that possible?

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On November 14, 2019 01:14 PM UTC

Hi William,

Greetings from Syncfusion support.

Query 1 : Is there a mode to only allow one checkbox at a time?

No, by default checkbox works with multiple selection. You can achieve your requirement by calling clearSelection method in the rowSelecting event.

Query 2 : I need to double click the row to call a dialog box to show additional data and I would like the row checked until another row is selected. Is that possible?

Yes, we have created the sample according to your requirement. In that sample, when you double click the on records it will trigger the recordDoubleClick event. Here we selected the target row and show the custom dialog box. Please refer the below code example and sample for information.

App.Vue

<div>

<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>

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>

Sample : https://codesandbox.io/s/vue-template-83zp0

UG : https://ej2.syncfusion.com/documentation/api/grid/#recorddoubleclick

https://ej2.syncfusion.com/documentation/api/grid/#rowselecting

https://ej2.syncfusion.com/vue/documentation/api/dialog

Regards,

Thavasianand S.

Reply | Reply with quote

William Morgenweck

Replied On November 14, 2019 01:43 PM UTC

I appreciate the sample and the this.$refs.grid.clearSelection(); helps a lot. However; when the selected row is doubled clicked the checkbox becomes uncheck and then checked again. Is there a way to prevent it from toggling?

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On November 15, 2019 09:42 AM UTC

Hi William,

You can disable the enableToggle property in the grid’s selectionSettings api to achieve your requirement. Disabling this property will prevent toggling for the selected row.

// Grid’s SelectionSettings property

selectionOptions: {

enableToggle: false,

checkboxMode: "ResetOnRowClick"

}

We have modified the previously provided sample based on this. You can find it below,

Sample: https://codesandbox.io/s/vue-template-8j4gn

Let us know if you have any concerns.

Regards,

Pavithra S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149081	Nov 13,2019 07:41 PM UTC	Nov 15,2019 09:42 AM UTC	Vue	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US