Configuring cascading dropdownlist inside a custom grid.

Question

Hi,We have created a custom grid using ejGrid component and used 'editType='dropdownedit' in e-columns component in order to get the dropdowns while editing a row in grid. In our example we have 3 dropdowns in which on selecting the value from first dropdown, the second should populate its corresponding data and similarly on selecting the value from second dropdown, third dropdown should get loaded with data dynamically. When we added a function consisting of getting the data based on selectin and binding the dropdown inside on change of first drop down, the bind function is not working properly. Even if we get the correct data , it is not being bounded properly. Here is our code:html:component.ts

Rajapandiyan Settu · Answer

Hi Kiruthika, 

Greetings from Syncfusion support. 

Based on the query we could understand that your requirement is to render cascading dropdown list (provide a dropdown data source based on selected value from another dropdown) for Grid editing. This can be achieved using cell edit template feature on the dropdown columns and in the first dropdown’s change event, the second dropdown data can be modified(using query property) based on the selected value. 

This is demonstrated in the below sample code where the City dropdown data is modified based on the State dropdown selected value in its change event and the State dropdown data is modified based on the Country dropdown selected value in its change event 

Change event of dropdown: https://ej2.syncfusion.com/documentation/api/drop-down-list/#change 





 
[app.component.ts] 
 
  
   this.countryParams = { 
      --- 
      write: (args) => { 
        this.countryObj = new DropDownList({ 
          dataSource: this.country, 
          fields: { value: 'countryId', text: 'countryName' }, 
          change: () => { 
            // change the query of state dropdown 
            this.stateObj.enabled = true; 
            let tempQuery: Query = new Query().where( 
              'countryId', 
              'equal', 
              this.countryObj.value 
            ); 
            this.stateObj.query = tempQuery; 
            this.stateObj.text = null; 
            this.stateObj.dataBind(); 
          }, 
          placeholder: 'Select a country', 
          floatLabelType: 'Never', 
        }); 
        this.countryObj.appendTo(args.element); 
      }, 
    }; 
    this.stateParams = { 
      --- 
      write: (args) => { 
        this.stateObj = new DropDownList({ 
          dataSource: this.state, 
          fields: { value: 'stateId', text: 'stateName' }, 
          enabled: false, 
          placeholder: 'Select a state', 
          floatLabelType: 'Never', 
          change: () => { 
            // change the query of city dropdown 
            this.cityObj.enabled = true; 
            let tempQuery: Query = new Query().where( 
              'stateId', 
              'equal', 
              this.stateObj.value 
            ); 
            this.cityObj.query = tempQuery; 
            this.cityObj.text = null; 
            this.cityObj.dataBind(); 
          }, 
        }); 
        this.stateObj.appendTo(args.element); 
      }, 
    }; 
    this.cityParams = { 
      --- 
      write: (args) => { 
        this.cityObj = new DropDownList({ 
          dataSource: this.city, 
          fields: { value: 'cityId', text: 'cityName' }, 
          enabled: false, 
          placeholder: 'Select a city', 
          floatLabelType: 'Never', 
        }); 
        this.cityObj.appendTo(args.element); 
      }, 
    }; 
 
 

We have prepared a sample for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/angular-p9ic6c?file=app.component.ts 

More details on rendering cascading dropdown lists in Grid edit can be checked in the below documentation link, 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/example-of-angular-ui-grid-to-edit-a-cell-using-cascading-drop-down-list/  

Please get back to us if you require any further assistance. 

Regards, 
Rajapandiyan S