DataSource data binding does not work when values arrival async

[Anthony Miller]

Hi,

I'm using reactive forms to bind the value to the comboBox.

The values for the ComboBox arrive after the form is bound and the comboBox is not rebound. This all seems to be an issue when allowCustom is set to false. 

I can see the value is still held internally.

This stackBlitz example shows the issue:

https://stackblitz.com/github/codethatstack/sync-combo

Thanks for your help.

[Ponmani Murugaiyan]

Hi Anthony, 

Greetings from Syncfusion support. 

We have validated your reported issue. We would like to inform you that before set the datasource property to component, it will not allow to set the value to the component. Because before set the value it search for datasource to check whether the value is present or not.  

• When allowCustom is true, it allows to set even the vales which is not present is the datasource. So, it is working as expected.
• But allowCustom false, will not allow to set the value, before the datasource bound to component.

This is the control’s intended behavior. So we suggest you to bind the value property to component after the datasource updated or in databound event. 

ngAfterViewInit(): void { 

    this.comboBox.dataSource = this.data; 

    this.comboBox.dataBind(); 

    this.comboBox.value = 'Active'; 

} 

Sample: https://stackblitz.com/edit/github-juwvpy-sntjf9?file=src%2Fapp%2Fapp.component.ts  

 

Regards, 

Ponmani M 

[Anthony Miller]

Hi,

I just saw this response.

Given the asynchronous nature of web development, lookup values may arrive later than the value bound to the control. I would have thought that given the control already has a bounded value, why wouldn't the control refresh its display using the bounding value. I cannot seem to force a rebinding of the datasource with the value that is already stored internally form the formControl databinding.

In angular, most people are using binding values using the Angular Forms module.

Thanks,

Anthony

[Ponmani Murugaiyan]

Hi Anthony, 

Thanks for the update. 

We would like to inform you that you have provided the predefined value in the formBuilder based on your below provided code snippet. But the datasource is loading with some delay in ngAfterViewInit. So, as per your code, the builder is initially triggered and the value is searched in Datasource list items. But we didn't get the data source here because it's not loaded and then search for the property of allowCustom and it is also false. So the value is not set to control. This is the cause for the reported issue and it is control’s intended behaviour as explained in our previous update. 

constructor(formBuilder: FormBuilder) { 

    console.log("Constructor triggered") 

    this.form = formBuilder.group({ 

      statusId: ['Active'] 

    }); 

  } 

 

  ngAfterViewInit(): void { 

    console.log("ngAfterViewInit triggered") 

    setTimeout(() => { 

      this.comboBox.dataSource = this.data; 

      this.comboBox.dataBind(); 

    }, 2000); 

  } 

Reference screenshot: 

 

Also, this can be achieved by setting the allowCustom property true as like below code snippet. 

<div [formGroup]="form" style="max-width: 300px;"> 

<ejs-combobox #comboBox 

  id="statusId" 

  formControlName="statusId" 

  [fields]="localFields" 

  [autofill]="true" 

  [allowCustom]="true"> 

</ejs-combobox> 

</div> 

 

Modified sample: https://stackblitz.com/edit/github-rvjj4y-rvkxwq?file=src%2Fapp%2Fapp.component.html  

 

Regards, 

Ponmani M