Checkbox

[William Morgenweck]

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?

[Thavasianand Sankaranarayanan]

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 

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

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. 

[William Morgenweck]

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? 

[Pavithra Subramaniyam]

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.