Selected Value is not shown in control, if data source and query is set after some time of initialization of control

Question

Team,I have a scenario where the control gets initialized immediately. As query params, I need to send some data which I have to fetch from another API. (This data is needed to send correct data source list in first time)How can I achieve this?If I initialize data source after some time (put under setTimeOut() in demo),binded value is not shown.In case data source is initialized in beginning, wrong data will be received since complete query params were not present. (this data is received by an API call)Could you please provide how to achieve this?ThanksTuariqAttachment: DataSource_in_TimeOut_fa93b377.zip

Sureshkumar P · Accepted Answer

Hi Tuariq, 
 
If we load the data source with some delay to the component, we could not set the value on initial loading. Since, at that time data source will not be updated. So, we will check the provided value with data source and if it’s not present, we make the value as null (since bind the value property as two-way binding). So, we suggest setting the value after the date source loaded inside the setTimeOut function to the component for triggering the actionComplete event and set the required value in the actionComplete event to achieve your requirement.  
 




  ngOnInit(): void { 
    //Setting query and data source after some time, since some data need to fetched from api calls 
    setTimeout(() => { 
      this.query= new Query().select(['FirstName', 'EmployeeID']).take(5).requiresCount(); 
      this.data= new DataManager({ 
      url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', 
      adaptor: new WebApiAdaptor, 
      crossDomain: true 
    }) 
    this.value = this._val; 
    }, 100); 
  } 
  //This method gets called when ever remote data fetching gets completed by dropdown control 
  public actionComplete(e: any): void { 
    // initially result contains 6 items 
    console.log("Before modified the result: ", e.result); 
    this.value = this._val; 
} 
 
Please find the sample from the below link. 
 
Modified sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/focus2080403215  
 
Regards, 
Sureshkumar P