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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Checkbox

Thread ID:

Created:

Updated:

Platform:

Replies:

149081 Nov 13,2019 07:41 PM UTC Nov 15,2019 09:42 AM UTC Vue 3
loading
Tags: Data Grid
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?



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 

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


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? 

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon