We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Checkbox

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?



3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team November 14, 2019 05:14 AM

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



Regards, 
Thavasianand S. 



WM William Morgenweck November 14, 2019 05:43 AM

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? 


PS Pavithra Subramaniyam Syncfusion Team November 15, 2019 01:42 AM

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, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon