How to Lazy Load dropdownedit dataSource

[Ervin van der Merwe]

I use a dropdown list column when adding new rows in a grid. I then use the [edit]='expDateParams' property binding to populate the dropdownlist dataSource. The dropdown list's data comes from Observable, but no data is showing in the dropdownlist. When the data is hard-coded on the component, only then it displays.

 field='expDate' editType='dropdownedit' [edit]='expDatParams' headerText='Exp Date' width=85>

expDateParams: IEditCell;

this.expDateParams = { 

      params: { dataSource: this.expDates, 

      query: new Query()}

}

[Dhivya Rajendran]

Hi Ervin, 

Greetings from Syncfusion support 

Query : How to Lazy Load dropdownedit dataSource 

We have validated your query and provided code snippet and we found that you are missing the field property in params to change the datasource for dropdown. We suggest to add the fields to the params by the following way to achieve your requirement. For more information please refer the below documentation. 

App.component.ts 

this.countryParams = { 

            params: { 

                dataSource: new DataManager(this.country), 

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

                query: new Query(), 

           } 

Documentation link : https://ej2.syncfusion.com/angular/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/ 

Please get back to us if you need further assistance 

Regards 

R.Dhivya 

[Ervin van der Merwe]

Hi, thanks for the reply.

Unfortunately that still does not work. Note that my datasource comes from a back-end API, so it is fed from an observable. When I create a static datasource in ngOnInit, only then it works. 

Works:

expDates: string[] = ['Feb04', 'Jan12'];

ngOnInit() {

    

    this.expDateParams = { 

      params: { dataSource: this.expDates, 

      query: new Query()

    }}

} 

Does NOT Work:

this._tradingDatesService.GetAllTradingExpDates()

    .subscribe(expDates => {

      this.expDateParams = { 

        params: { dataSource: expDates, 

        query: new Query()

  }}

});

[Ervin van der Merwe]

Ok, I got it working. 

expDates: string[] = [];

ngOnInit() {

    this.expDateParams = { 

      params: { dataSource: this.expDates, 

        query: new Query()

    }}

  } 

this._tradingDatesService.GetAllTradingExpDates()

    .pipe(takeUntil(this._unsubscriber))

    .subscribe(expDates => {

      expDates.forEach(a => {

        this.expDates.push(a.expdate);

      })

    });

[Dhivya Rajendran]

Hi Ervin, 

Thanks for your update. 

We are happy to hear that the reported problem has been resolved. Please get back to us if you require further assistance.  

Regards, 

R.Dhivya