Enable/Disable dropdown column when checkbox column is checked/unchecked

[Jazzy Marie]

I have an angular ejs-grid with the e-columns "internetbanking" editType booleanEdit and "internetbankinglimit" editType dropdownedit. I want the internetbankinglimit only to be available(enabled) when the internetbanking checkbox is checked. This has to happen dynamically when I check/uncheck the checkbox.

[Pavithra Subramaniyam]

Hi Jazzy Marie,

Thanks for contacting Syncfusion support.

You can achieve your requirement by using the “Edit Params” feature using which you can bind the “change” event for the Boolean edit column and while checking/unchecking the checkbox you can set the “enabled” property of the DropDownList component dynamically. You can set the enabled property initially based on the row data inside the “actionComplete” event. Please refer to the below code example, API, and sample link for more information.

// dynamically enable/disable

this.checkEditParams = {

  params: {

    change: (e) => {

      (

        document.querySelector(

          '#' + this.grid.element.id + 'ShipCountry'

        ) as any

      ).ej2_instances[0].enabled = e.checked;

    },

  },

};

 

//enable/disable initially

actionComplete(args: any): void {

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

  var dropDownList = (

    args.form.querySelector(

      '#' + this.grid.element.id + 'ShipCountry'

    ) as any

  ).ej2_instances[0];

  dropDownList.enabled = args.rowData['Verified'];

  dropDownList.dataBind();

}

  }

 

Documentation : https://helpej2.syncfusion.com/angular/documentation/grid/editing/edit-types#customize-editors-using-params


              https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete

             
            

https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#enabled

  https://ej2.syncfusion.com/angular/documentation/api/check-box/#change

Sample                : https://stackblitz.com/edit/angular-9eyne3?file=src%2Fapp.component.ts

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

Regards,

Pavithra S

[Jazzy Marie]

Thanks for this, it solved the problem.

But this is part of another problem I have.

I have created several ejs-grids like this by looping through an array with *ngfor

How can I make the checkbox enable/disable the dropdownlist within its own ejsgrid.

Because with the current code you have given me, when I check the checkbox of any grid, it enables/disables the

first dropdownlist.

I see that this is because checkEditParams points to the first dropdownlist:

document.querySelector(

'#' + this.grid.element.id + 'ShipCountry'

) as any

How can I change this dynamically to point to the corresponding dropdownlist in its own ejs-grid?

[Pavithra Subramaniyam]

Hi Jazzy Marie,

The reported scenario occurs because we are getting the grid id from the instance “this.grid” which probably might be the first Grid in your application. To overcome this, we suggest getting the id from the event argument as in the below code example.

change: (e) => {

  var gridID = parentsUntil(e.event.target, 'e-grid').id;

  (

    document.querySelector('#' + gridID + 'ShipCountry') as any

  ).ej2_instances[0].enabled = e.checked;

},

 

 

actionComplete(args: any): void {

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

  var gridID = parentsUntil(args.form, 'e-grid').id;

  var dropDownList = (

    args.form.querySelector('#' + gridID + 'ShipCountry') as any

  ).ej2_instances[0];

  dropDownList.enabled = args.rowData['Verified'];

  dropDownList.dataBind();

}

  }

 

https://stackblitz.com/edit/angular-9eyne3-a2cwwt?file=src%2Fapp.component.ts

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

[Jazzy Marie]

Thank you, this helped me

[Suganya Gopinath]

Hi Jazzy, 

We are glad that the provided solution helped to solve the issue. 

We are marking this thread as solved. 

[Bhavika Chauhan]

To enable or disable a dropdown column based on the state of a checkbox, you can use JavaScript or a framework like Angular, React, or jQuery.

<table>

  <tr>

    <td>

      <input type="checkbox" id="toggleCheckbox" onchange="toggleDropdown(this)" /> Enable/Disable

    </td>

    <td>

      <select id="dropdownColumn" disabled>

        <option value="Option1">Option 1</option>

        <option value="Option2">Option 2</option>

      </select>

    </td>

  </tr>

</table>

JavaScript:

function toggleDropdown(checkbox) {

  var dropdown = document.getElementById('dropdownColumn');

  dropdown.disabled = !checkbox.checked;

}

1. HTML: There's a checkbox and a dropdown in the same row. The dropdown is initially disabled.
2. JavaScript: The toggleDropdown function checks if the checkbox is checked or unchecked and enables or disables the dropdown accordingly.

When the checkbox is checked, the dropdown will be enabled, and when it's unchecked, it will be disabled. You can adapt this approach to your specific needs, whether you're using a different framework or library.