Multi checkboxes

[William Morgenweck]

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]

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: [Page, Edit] 

  }, 

  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> 

 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#created 

                              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]

This is fantastic-- Thanks

[Seeni Sakthi Kumar Seeni Raj]

Hi William,
 

Thanks for the update.

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

Regards,  

Seeni Sakthi Kumar S 

[William Morgenweck]

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]

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