Boolean edit column, capture the click event of the checkbox when editing the row to enable/disable other edit controls on the row

[Barna Wesley]

I am using the grid control with default editing mode and have defined columns with booleanedit types, dropdownlist controls etc. in multiple columns.  We need the ability to capture the click/change event of the booleanedit edit control to enable/disable other editable controls on the row.  We are using version 24.1.47. Do you have an example?  Below is an example of the grid columns.  We need to capture when the checkbox is clicked on the  EmployeeAction_EmployeeLegalEntityChange column, if it is checked, then enable the  EmployeeAction_EmployeeLegalEntityNameNew dropdownlist control in edit mode, otherwise disable the control.  The same would be for the  EmployeeAction_BusinessOrgChange and the  EmployeeAction_BusinessOrgNew dropdownlist control which is defined for that column.

                    <e-grid-column field="EmployeeAction_EmployeeLegalEntityChange" headerText="Legal entity change?" width="150" visible="true" editType="booleanedit" displayAsCheckBox="true" allowEditing="true"></e-grid-column>

                    <e-grid-column field="EmployeeAction_EmployeeLegalEntityNameNew" headerText="New legal entity" width="530" minWidth="280" visible="true"

                                   edit="@(new {create = "employeeSearchGridLegalEntityNewCreate", read = "employeeSearchGridLegalEntityNewRead", destroy = "employeeSearchGridLegalEntityNewDestroy", write = "employeeSearchGridLegalEntityNewWrite"})"

                                   customAttributes=@(new { @class="e-removewrap" } ) clipMode="EllipsisWithTooltip">

                    </e-grid-column>

                    <e-grid-column field="EmployeeAction_BusinessOrgChange" headerText="Business org change?" width="150" visible="true" editType="booleanedit" displayAsCheckBox="true" allowEditing="true"></e-grid-column>

                    <e-grid-column field="EmployeeAction_BusinessOrgNew" headerText="New business org" width="550" visible="true" allowEditing="true" clipMode="EllipsisWithTooltip"

                                   edit="@(new {create = "employeeSearchGridBusinessOrgNewCreate", read = "employeeSearchGridBusinessOrgNewRead", destroy = "employeeSearchGridBusinessOrgNewDestroy", write = "employeeSearchGridBusinessOrgNewWrite"})"

                                   customAttributes=@(new { @class="e-removewrap" } ) clipMode="EllipsisWithTooltip">

                    </e-grid-column>

[Rajapandi Ravi]

Hi Barna,

Greetings from Syncfusion support

After reviewing your query, we could see that in the edit mode based on checkbox check/uncheck you like to enable/disable the dropdownlist control. Based on your query we have prepared a sample and achieved your requirement in the actionComplete event of Grid. In this event, we can access the form elements in the arguments and bind the change event to the Checkbox control and based on the check/uncheck we have enable/disable the dropdownlist control by using enabled property of dropdownlist control. Please refer the below code example and sample for more information.

 

<script>

    function actionComplete(args) {

       

        if (args.requestType === 'beginEdit') {                  //bind the change event to the checkbox control

            args.form.querySelector('#GridVerified').ej2_instances[0].change = function (e) {

                if (e.checked) {

                    document.getElementsByClassName('e-gridform')[0].querySelector('#GridShipCountry').ej2_instances[0].enabled = true; //enabled property of dropdown control

                }

                else {

                    document.getElementsByClassName('e-gridform')[0].querySelector('#GridShipCountry').ej2_instances[0].enabled = false;

                }

            }

        }

    }

</script>

 

Sample:

Regards,

Rajapandi R

Attachment: 186428sample_fbc8ea06.zip