Which event to know checkbox is selected ot not?

[Shivani]

If bundleid checkbox selected then only amount field enable and can enter.
if budleID checkbbox doesn't select then amount field disabled.
Please give me an example in VUE.js In DATAGRId. 
i am using syncfusion DATAGRID in 

[Joseph Christ Nithin Issack]

Hi Shivani, 

  Greetings from Syncfusion support. 

  Based on your requirement, you want to enable and disable the amount field on edit mode based on the checked state of the checkbox. Before we proceed to the solution we would like you to provide the following details so that we will be able to provide a better solution ASAP. 

• Do you want to dynamically change the input to enable and disable while the grid is in the edit mode based on the selection of the checkbox or do you want to enable or disable the input only while entering into the edit mode.

For further details please get back to us. 

Regards, 

Joseph I. 

[Shivani]

Hello, Joesph

I want to enable and disable the amount field on edit mode based on the checked state of the checkbox.

I  want to dynamically change the input to enable and disable while the grid is in the edit mode based on the selection of the checkbox.

Please give me an example in VUE.js In DATAGRId.

Please give reply ASAP.

[Joseph Christ Nithin Issack]

Hi Shivani, 

Thanks for your update. 

  Based on your requirement, you want to enable and disable the amount field when the grid enters into edit mode based on the checked state of the checkbox and also you want to enable and disable the amount field dynamically when you change the state of the check box when the grid is in the edit mode. 

  Your requirement can be achieved by using the `actionComplete’ event of the EJ2 Grid and the `change` event of the checkbox component. You can define the change event to the checkbox which is in the edit mode of the grid using the `column.edit` property of the EJ2 Grid. 

Please refer the below code example. 

<template> 

    <div id="app"> 

        <ejs-grid id="grid1" 

                  ref="grid1" 

                  height="250" 

                  width="700" 

                  :dataSource="data" 

                  :allowPaging="true" 

                  :editSettings="editSettings" 

                  :toolbar="toolbar" 

                  :actionComplete="actionComplete"> 

            <e-columns> 

                <e-column headerText="BundleID" 

                          field="Check" 

                          width="180" 

                          :template="cTemplate" 

                          editType="booleanedit" 

                          :edit="boolParams"></e-column> 

                <e-column field="EmployeeID" 

                          headerText="EmployeeID" 

                          width="180" 

                          headerTextAlign="center"></e-column> 

                <e-column field="OrderID" 

                          headerText="ID" 

                          width="180" 

                          isPrimaryKey="true" 

                          headerTextAlign="center"></e-column> 

                <e-column field="CustomerID" 

                          headerText="CustomerID" 

                          width="180" 

                          headerTextAlign="center"></e-column> 

                <e-column field="ShipCountry" 

                          headerText="ShipCountry" 

                          width="180" 

                          headerTextAlign="center"></e-column> 

                <e-column field="ShipCity" headerText="ShipCity" width="180"></e-column> 

            </e-columns> 

        </ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Freeze, 

  Edit, 

  Toolbar, 

  Page, 

  Filter, 

  ColumnChooser, 

  ContextMenu, 

} from "@syncfusion/ej2-vue-grids"; 

import { gridData } from "./data"; 

import { ButtonPlugin, CheckBoxPlugin } from "@syncfusion/ej2-vue-buttons"; 

 

Vue.use(CheckBoxPlugin); 

Vue.use(ButtonPlugin); 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: gridData, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

      }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 

 

      boolParams: { 

        params: { change: this.checkBoxChange }, // define up the change event to the check box in edit mode. 

      }, 

 

      cTemplate: function () { 

        return { 

          template: Vue.component("columnTemplate", { 

            template: `<div class="template_checkbox" > 

                <ejs-checkbox  :checked="checkedState"></ejs-checkbox> 

            </div>`, 

            data: function () { 

              return { 

                data: {}, 

              }; 

            }, 

            computed: { 

              checkedState: function () { 

                return this.data.Check; // define the checked state of the template checkbox 

              }, 

            }, 

            methods: {}, 

          }), 

        }; 

      }, 

    }; 

  }, 

  computed: {}, 

  methods: { 

    actionComplete: function (args) { 

      if (args.requestType === "beginEdit") { 

        var checkBox = args.form[0].ej2_instances[0]; // get the instance of the checkbox from form element. 

        var emPloyeeIdInput = args.form[1].ej2_instances[0]; // get the instance of the input element from form element. 

        emPloyeeIdInput.enabled = checkBox.checked; // assaign enable disable to textbox. 

      } 

    }, 

    checkBoxChange(args) { 

      var formObj = args.event.target.closest(".e-gridform").ej2_instances[0]; 

      var emPloyeeIdInput = formObj.element[1].ej2_instances[0]; // get the instance of the input element from form element. 

      emPloyeeIdInput.enabled = args.checked; // assaign enable disable to textbox. 

    }, 

  }, 

  provide: { 

    grid: [ContextMenu, Freeze, Edit, Toolbar, Page, Filter, ColumnChooser], 

  }, 

}; 

</script> 

Sample: https://codesandbox.io/s/vue-template-forked-3zu1c?file=/src/App.vue 

Please find the attached sample and revert for more queries. 

Regards, 

Joseph I.