1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cascading dropdownedit in grid not loading data | Angular

Cascading dropdownedit in grid not loading data | Angular

I am following the example from here:
https://ej2.syncfusion.com/angular/documentation/grid/how-to/#cascading-dropdownlist-with-grid-editing

The problem is that when cascading the dropdown, then the second dropdown (commodity_ddList) does not refresh it's data. My datasource is from a server.

Please assist...

this.bidTypeParams = {     
      params: {
        dataSource: new DataManager(this.bidTypes),
        fields: {value: 'id', text: 'bidType1'},
        query: new Query(),
        change: (a:any) => { 
          const commQuery: Query = new Query();
          const url = `myURL/${a.itemData.id}`;
          new DataManager({url: url, adaptor: new ODataAdaptor})
          .executeQuery(commQuery)
          .then((a:ReturnOption) => {
            this.commodities = <ICommodityMaterial[]> a.result;
            this.commodity_ddList.text = null;
            this.commodity_ddList.query = commQuery;
            this.commodity_ddList.enabled = true;
            this.commodity_ddList.dataBind();
          });
        } 
      }
    }

this.commodityParams = {
      create:() => {
        console.log('create');
        this.commodity_element = document.createElement('input');
        return this.commodity_element;
      },
      read:() =>{
        console.log('read');
        return this.commodity_ddList.text
      },
      destroy:() =>{
        console.log('destroy');
        this.commodity_ddList.destroy();
      },
      write:() =>{
        console.log('write');
        this.commodity_ddList = new DropDownList({
          dataSource: new DataManager(this.commodities),
          fields: {value: 'commodity', text: 'commodity'},
          enabled: false
        });
        this.commodity_ddList.appendTo(this.commodity_element);
      }
    }

3 Replies
RS Rajapandiyan Settu Syncfusion Team March 2, 2020 12:44 PM UTC

Hi Ervin, 
 
Greetings from syncfusion support. 
 
Query : The problem is that when cascading the dropdown, then the second dropdown (commodity_ddList) does not refresh it's data. My datasource is from a server. 
 
From your query we could see that you need to change the dataSource ( from server ) of the dropdown in another dropdown’s change event. In your code we found that you are changing value of this.commodities but this not affect the dropdown list. To do that we need to directly change the datasource of the  ( stateObj ) dropdown object. Please refer the below code example sample for more information. 
 
 
 
App.component.html 
 
<ejs-grid #grid [dataSource]='data' allowGrouping="true" allowFiltering="true" [editSettings]='editSettings' [toolbar]='toolbar' allowPaging="true" allowSorting="true" height="320"> 
    <e-columns> 
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=100></e-column> 
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
        <e-column field='ShipCountry' headerText='Ship Country' editType='dropdownedit' 
                  [edit]='countryParams' width=150></e-column> 
        <e-column field='ShipCity' headerText='Ship State' editType='dropdownedit' [edit]='stateParams' width=150></e-column> 
    </e-columns> 
</ejs-grid> 
 
App.component.ts 
 
export class FetchDataComponent { 
--------- 
   
    ngOnInit(): void { 
-------- 
        this.countryParams = { 
            create: () => { 
                this.countryElem = document.createElement('input'); 
                return this.countryElem; 
            }, 
            read: () => { 
                return this.countryObj.text; 
            }, 
            destroy: () => { 
                this.countryObj.destroy(); 
            }, 
            write: () => { 
                this.countryObj = new DropDownList({ 
                    dataSource: new DataManager(this.country), 
                    fields: { value: 'countryId', text: 'countryName' }, 
                    change: () => { 
                        const commQuery: Query = new Query(); 
                        new DataManager({ url: "/Home/UrlDatasource", adaptor: new UrlAdaptor }) 
                            .executeQuery(commQuery) 
                            .then((a:any) => { 
                            // change the datasource of the dropwon element 
                               this.stateObj.dataSource = new DataManager (DataUtil.distinct(a.result, "ShipCity", true)), 
                                this.stateObj.query = commQuery; 
                                this.stateObj.enabled = true; 
                                this.stateObj.dataBind(); 
                            }); 
                    }, 
                    placeholder: 'Select a country', 
                    floatLabelType: 'Never' 
                }); 
                this.countryObj.appendTo(this.countryElem); 
            } 
        }; 
        this.stateParams = { 
            create: () => { 
                this.stateElem = document.createElement('input'); 
                return this.stateElem; 
            }, 
            read: () => { 
                return this.stateObj.text; 
            }, 
            destroy: () => { 
                this.stateObj.destroy(); 
            }, 
            write: () => { 
                this.stateObj = new DropDownList({ 
                    dataSource: new DataManager(this.state), 
                    fields: { value: 'ShipCity', text: 'ShipCity' }, 
                    enabled: false, 
                    placeholder: 'Select a state', 
                    floatLabelType: 'Never' 
                }); 
                this.stateObj.appendTo(this.stateElem); 
            } 
        }; 
  } 
 
} 
 
 
 
 
Please get back to us, if you need further assistance on this. 
 
Regards, 
Rajapandiyan S. 


EV Ervin van der Merwe March 3, 2020 06:53 AM UTC

It should've been quite obvious....
Thank you!

RS Rajapandiyan Settu Syncfusion Team March 4, 2020 12:03 PM UTC

Hi Ervin,  

We are glad that the provided solution is working fine at your end.  

Please get back to us if you need further assistance on this.  
  
Regards,  
Rajapandiyan S. 


Loader.
Up arrow icon