Filter data source of a dropdown list based on the selection of another dropdown list in grid

[Diego]

I have a Grid that has several fields, two of them are emp_id (table of companies) and rol_id (table of roles linked to companies).

Both fields get their data from the database, however, I should not show all the content of rol_id, I need to filter the rol_id data based on emp_id. In the attached image is the example, I have two companies: erpuda and GABI, however, the roles "ADMINISTRADOR" and "CONTADOR" belong to "erpuda" and should only be shown when "erpuda" is selected, and "Contadores" when GABI is selected. How can I do this?

[Rajapandi Ravi]

Hi Diego,

Greetings from Syncfusion support

Based on your query we could see that you like to change the datasource of the dropdown based on another dropdown selection, since your requirement was related to our cascading dropdown feature. You can achieve the Cascading DropDownList with grid Editing by using the Cell Edit Template feature. We have already discussed about your requirement in our documentation. Please refer the below documentation for more information.

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/

Regards,

Rajapandi R

[Diego]

Thanks a lot! it worked.

[Rajapandi Ravi]

Hi Diego,

We are happy to hear that our suggestion was helpful to achieve your requirement.

Please get back to us if you need further assistance.

Regards,

Rajapandi R

[Diego]

Hi There. One more question, how can I prevent the selected item in the drop-down list from being deleted when editing?

As soon as I start editing, the selected items in the two drop-down lists are deleted.

On list:

On edit:

[Rajapandi Ravi]

Hi Diego,

Thanks for the update

Based on your query we have prepared a sample and tried to reproduce your reported problem, but it was unsuccessful. Please refer the below code example and sample for more information.

var grid = new ej.grids.Grid({

      dataSource: cascadeData,

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

      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },

      columns: [

           .  .  .  .  .  .  .  .  .  .  .  .

           .  .  .  .  .  .  .  .  .  .  .  .

          {

              field: 'ShipCountry', headerText: 'Ship Country', width: 120, edit: {

                  create: function(){

                      countryElem = document.createElement('input');

                      return countryElem;

                  },

                  read: function(){

                      return countryObj.text;

                  },

                  destroy: function(){

                      countryObj.destroy();

                  },

                  write: function(args){

                      countryObj = new ej.dropdowns.DropDownList({

                          text: args.rowData.ShipCountry,

                          dataSource: country,

                          fields: { value: 'countryId', text: 'countryName' },

                          change: function(){

                              stateObj.enabled = true;

                              var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value);

                              stateObj.query = tempQuery;

                              stateObj.text = null;

                              stateObj.dataBind();

                          },

                          placeholder: 'Select a country',

                          floatLabelType: 'Never'

                      });

                      countryObj.appendTo(countryElem);

                  }

              }

          },

          {

              field: 'ShipState', headerText: 'Ship State', width: 150, edit: {

                  create: function(){

                      stateElem = document.createElement('input');

                      return stateElem;

                  },

                  read: function(){

                      return stateObj.text;

                  },

                  destroy: function(){

                      stateObj.destroy();

                  },

                  write: function(args){

                      stateObj = new ej.dropdowns.DropDownList({

                          text: args.rowData.ShipState,

                          dataSource: state,

                          fields: { value: 'stateId', text: 'stateName' },

                          enabled: false,

                          placeholder: 'Select a state',

                          floatLabelType: 'Never'

                      });

                      stateObj.appendTo(stateElem);

                  }

              }

          }

      ],

      height: 273

  });

  grid.appendTo('#Grid');  

 

Sample: https://stackblitz.com/edit/ajewkh?file=index.js

Screenshot:

If you still face the issue, please share any simple issue reproducible sample or try to reproduce the problem with our above attached sample and also share the problem scenario in video demonstration format.

Regards,

Rajapandi R

[Diego]

Thank you so much!

[Rajapandi Ravi]

Hi Diego,

We are happy to hear that our suggested solution was helpful to resolve the problem.

Please get back to us if you need further assistance.

Regards,

Rajapandi R