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

Multi checkboxes

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.


5 Replies

PS Pavithra Subramaniyam Syncfusion Team 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. 



WM William Morgenweck November 30, 2019 10:13 PM UTC

This is fantastic-- Thanks


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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 



WM William Morgenweck 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
      },


PS Pavithra Subramaniyam Syncfusion Team 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  


Loader.
Live Chat Icon For mobile
Up arrow icon