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

Multi checkboxes

Thread ID:

Created:

Updated:

Platform:

Replies:

149492 Nov 27,2019 03:35 PM UTC Dec 12,2019 07:12 AM UTC Vue 5
loading
Tags: Data Grid
William Morgenweck
Asked On November 27, 2019 03:35 PM UTC

I need to have 3 checkboxes in a grid - one that says Mine one that says Not mine and one that says Cancer Related.   I;ve tried to put it together with

        <e-column
                      field="Mine"
                      type="checkbox"
                      width="150"
                      textAlign="Center"
                      headerTemplate="<span>Mine</span>"
                    ></e-column>

                    <e-column
                      field="NotMine"
                      type="checkbox"
                      width="150"
                      textAlign="Center"
                      headerTemplate="<span>Not Mine</span>"
                    ></e-column>

                      <e-column
                      field="CancerRelated"
                      type="checkbox"
                      width="150"
                      textAlign="Center"
                      headerTemplate="<span>Cancer</span>"
                    ></e-column
But this  does not allow me to select anything other than the first checkbox.  Your help is appreciated. Thanks.


Pavithra Subramaniyam [Syncfusion]
Replied On November 28, 2019 11:29 AM UTC

Hi William, 
 
Thanks for contacting Syncfusion support. 
 
By default checkbox type columns are used for selecting the row. So while clicking on the row it will check the first checkbox in the row which is the default behavior of Grid. So we suggest you to use the “column.displayAsCheckBox” property to show the checkbox for the corresponding fields.  
 
And you can change the state inside the click event of Grid element. Also you can update the changes in the Grid dataSource also. For that you need to enable editing.  Please refer to the below code example, documentation link and sample link for more information. 
 
[App.Vue] 
<template> 
  <div id="app"> 
    <ejs-grid id="Grid" ref="grid" :dataSource="data" :editSettings="editSettings" :allowPaging="true" 
      :created="created"> 
      <e-columns> 
        <e-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="90"></e-column> 
        <e-column field="CustomerID" headerText="Customer ID" format="C2" width="90"></e-column> 
        <e-column field="Mine" headerText="Check1" width="70" displayAsCheckBox="true" textAlign="Center"> 
        </e-column> 
        <e-column field="NotMine" headerText="Check2" width="70" displayAsCheckBox="true" textAlign="Center"> 
        </e-column> 
        <e-column field="CancerRelated" headerText="Check3" width="70" displayAsCheckBox="true" 
          textAlign="Center"></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
 
<script> 
 
export default { 
  data() { 
    return { 
      data: data, 
      editSettings: { 
        allowEditing: true 
      } 
    }; 
  }, 
  provide: { 
    grid: [PageEdit] 
  }, 
  methods: { 
    created(e) { 
      // binding click event 
      this.$refs.grid.ej2Instances.element.addEventListener( 
        "click", 
        this.click 
      ); 
    }, 
    click(e) { 
      // for normal ediitng 
      if ( 
        e.target.classList.contains("e-rowcell") && 
        e.target.querySelector(".e-checkbox-wrapper") 
      ) { 
        if (this.$refs.grid.ej2Instances.isEdit) 
          this.$refs.grid.ej2Instances.endEdit(); 
        var index = parseInt(e.target.getAttribute("Index"), 10); // row index 
        var rowData = this.$refs.grid.ej2Instances.currentViewData[index]; // row data 
        var column = this.$refs.grid.ej2Instances.columns[ 
          parseInt(e.target.getAttribute("aria-colindex"), 10) 
        ].field; // field name 
        var checkValue = !rowData[column]; 
        // for toggling the other columns 
        rowData.Mine = false; 
        rowData.NotMine = false; 
        rowData.CancerRelated = false; 
 
        rowData[column] = checkValue; 
 
        // Update the row with the modified data 
        this.$refs.grid.ej2Instances.updateRow(index, rowData); 
      } 
    } 
  } 
}; 
</script> 
<style> 
      .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check, 
      .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check { 
        background-color: #e3165b; 
        border-color: transparent; 
        color: #fff; 
      } 
    </style> 
 
 
                              https://ej2.syncfusion.com/vue/documentation/api/grid/#updaterow 
                              https://ej2.syncfusion.com/vue/documentation/grid/edit/ 
 
Sample               : https://codesandbox.io/s/vue-checkbox-toggle-m7xh5 
 
Please get back to us if you have any concern. 
 
Regards, 
Pavithra S. 


William Morgenweck
Replied On November 30, 2019 10:13 PM UTC

This is fantastic-- Thanks

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 2, 2019 06:25 AM UTC

Hi William,
 
Thanks for the update.

We are happy to hear that your issue has been resolved.

Regards,  
Seeni Sakthi Kumar S 


William Morgenweck
Replied On December 11, 2019 02:21 PM UTC

Sorry I need to reopen this.

The solution works 95% of the time but if the row is double clicked it goes into edit mode and shows an unformulated version of the row.  In my case it actually lock up my screen because of other code. Is there a way to prevent this?

You can see it on the demo you included below.

I think I got it to work-

I changed the 

  editSettings: {
        allowAdding: true
      },

Pavithra Subramaniyam [Syncfusion]
Replied On December 12, 2019 07:12 AM UTC

Hi William, 
  
Thanks for your update. 

We are happy to hear that you have resolved the issue. 

Please get back to us if you need any further assistance on this. 

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