Selected value is not shown in dropdown control when binded value change before data source request get completed

Question

Team,I have a scenario where the syncfusion dropdown control is binded using angular two way binding [(value)]="value", where value is a get set property._val:any;get value(){return _val;}I have a scenario where the value property change its returning values by some conditions. Since it is get set, it is always upto-date.Where as the query and datasource of control is re-initialized when required.The issue here is the binded value is not shown on UI if that value was not available in previous data source. (data source gets updated later)Steps with reference to attached project:1. Initially data source has 5 items and control shown 4th item with EmployeeID=42. Click on "Refresh Remote Data"    - It change the binded EmployeeID=7 (which is not available in data source and can be updated from any where else also)    - Manually update the data source to re-fetch items that should contain binded item.Actual Result: No value shown as binded to control.Expected Result: Since new data source has been retrieved, the binded value must be shown in the control.Could please provide me a solution how to achieve this? I have to use get set since same control value is shown multiple places.ThanksTuariqAttachment: Binded_Value_Not_Shown_After_Data_Source_Change_cb823897.zip

Sevvandhi Nagulan · Accepted Answer

Hi Tuariq, 


Greetings from Syncfusion support. 


We validated the reported requirement. The cause of the issue is that, value property updated to the component before data source has been changed. So, we suggest updating the value in some delay using setTimeOut to get rid of the reported issue. Refer to the code below, 






click() { 
  // this._val = 7; //Changing the binded value of dropdown 
  (this.dropdown as any).isCustomFilter = false; 
  this.query = new Query() 
    .select(["FirstName", "EmployeeID"]) 
    .take(9) 
    .requiresCount(); 
  this.data = new DataManager({ 
    url: 
      "https://ej2services.syncfusion.com/production/web-services/api/Employees", 
    adaptor: new WebApiAdaptor(), 
    crossDomain: true 
  }); 
 
  setTimeout(() => { 
    this._val = 7; 
  }, 10); 
 
  this.dropdown.dataBind(); //Calling data bind 
} 




Please find the sample below, 


Sample link: https://stackblitz.com/edit/angular-paeyqv-qhn6ef?file=app.component.ts 



Please check the above suggestion and get back to us if you need further assistance. 


Regards, 

Sevvandhi N