Dynamic update of the dataSource of a ComboBox when selecting a value in the popup of another ComboBox

[Alfredo]

Hello

I am using ComboBox in a reactive form.

I need to modify the dataSource (eg resources: string [];) of the ComboBox when I change some values in the form (for example when I select an item from the popup list of another ComboBox). Viewing (with the console.log ()), the values assumed by the dataSource (resources: string [];), it seems that everything works according to expectations, but in reality the list of values displayed in the popup does not always update. Maybe the data binding is not always guaranteed? Could I have an example of how to guarantee the updating of the dataSource when selecting the popup of another ComboBox present in the same form?

Thanks in advance

N.B.

From further tests I have done, I have noticed that I cannot update the dataSource when it is emptied (resources: string [] = [];)

[Ponmani Murugaiyan]

Hi Alfredo, 

Greetings from Syncfusion support. 

As per your requirement “Dynamically updating the dataSource of a ComboBox when selecting a value in the popup of another ComboBox” requires the datasource type as Object. Because, the both ComboBox component datasource must contain the similar fields like countryId as like below highlighted code. The value of one ComboBox depends upon another’s value, this can be configured by using the change event of the parent ComboBox. Within that change event handler, data has to be loaded to the child ComboBox based on the selected value of the parent ComboBox. 

Please find the documentation link below for reference. 

Documentation: https://ej2.syncfusion.com/angular/documentation/combo-box/how-to/cascading/ 

//define the state ComboBox countrydata 

public countryData: { [key: string]: Object }[] = [ 

    { CountryName: 'Australia', CountryId: '2' }, 

    { CountryName: 'United States', CountryId: '1' } 

]; 

//define the state ComboBox statedata 

public stateData: { [key: string]: Object }[] = [ 

    { StateName: 'New York', CountryId: '1', StateId: '101' }, 

    { StateName: 'Virginia ', CountryId: '1', StateId: '102' }, 

    { StateName: 'Tasmania ', CountryId: '2', StateId: '105' } 

]; 

[app.component.html] 

<form [formGroup]="skillForm" novalidate id="formId"> 

<div class="form-group"> 

  <ejs-combobox #country formControlName="skillname" name="skillname" allowCustom="false" [dataSource]="countryData" [fields]="countryFields" (change)="countryChange()" [placeholder]="countryWatermark"> 

  </ejs-combobox> 

  <div *ngIf="skillForm.controls.skillname.invalid && skillForm.controls.skillname.touched" class="alert alert-danger"> 

    <div *ngIf="skillForm.controls.skillname.errors.required"> 

      Country is required. 

    </div> 

  </div> 

</div> 

 

<div class="form-group"> 

  <ejs-combobox #state formControlName="skillname1" name="skillname1" allowCustom="false" [dataSource]="stateData" [fields]="stateFields" [placeholder]="stateWatermark"> 

  </ejs-combobox> 

  <div *ngIf="skillForm.controls.skillname1.invalid && skillForm.controls.skillname1.touched" class="alert alert-danger"> 

    <div *ngIf="skillForm.controls.skillname1.errors.required"> 

      State is required. 

    </div> 

  </div> 

</div> 

[app.component.ts] 

public countryData: { [key: string]: Object }[] = [ 

    { CountryName: "Australia", CountryId: "2" }, 

    { CountryName: "United States", CountryId: "1" } 

  ]; 

  public stateData: { [key: string]: Object }[] = [ 

    { StateName: "New York", CountryId: "1", StateId: "101" }, 

    { StateName: "Virginia ", CountryId: "1", StateId: "102" }, 

    { StateName: "Tasmania ", CountryId: "2", StateId: "105" } 

  ]; 

  public countryFields: Object = { text: "CountryName", value: "CountryId" }; 

  public stateFields: Object = { text: "StateName", value: "StateId" }; 

  public countryWatermark: string = "Select a country"; 

  public stateWatermark: string = "Select a state"; 

  @ViewChild("country") 

  public countryObj: ComboBoxComponent; 

  @ViewChild("state") 

  public stateObj: ComboBoxComponent; 

  skillForm: FormGroup; 

  public countryChange(): void { 

    let tempQuery: Query = new Query().where( 

      "CountryId", 

      "equal", 

      this.countryObj.value 

    ); 

    this.stateObj.query = tempQuery; 

    this.stateObj.text = null; 

    this.stateObj.dataBind(); 

  } 

  constructor(private fb: FormBuilder) { 

    this.createForm(); 

  } 

  createForm(): void { 

    this.skillForm = this.fb.group({ 

      skillname: ["", Validators.required], 

      skillname1: ["", Validators.required] 

    }); 

  } 

Sample: https://stackblitz.com/edit/angular-yinrxu-cnkwl9?file=app.component.ts 

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Alfredo]

Good morning.

Thanks for your concern, but my need is slightly different from the one you submitted to me. I need the dataSource to be an array of strings (modifying the one I have already developed would be too invasive, given the heavy use of ComboBox in my application). Furthermore, the update of the dataSource, does not necessarily have to be triggered by the selection in another ComboBox, but it must be able to be triggered by any event that occurs in the (reactive) form in which I am working (even the simple press of a key) . I therefore ask that, at any event that may occur, I can update the dataSource (string []) and then, by selecting the ComboBox, I am presented with the updated list of choices (including the possibility of completely emptying the dataSource).

As always, thank you for your cooperation.

[Ponmani Murugaiyan]

Hi Alfredo, 

Thanks for the update. 

We couldn't able to get your reported query. Could you please share the below details? It will be helpful for us to understand your requirement better and provide you the solution ASAP.  

1. Share the video demonstration or pictorial representation of expected requirement.
2. Elaborate more on your requested requirement with ComboBox component.
3. If possible share any simple sample.

 

Regards, 

Ponmani M 

[Alfredo]

Hello and thanks for the update. Unfortunately due to the tight deadlines for updating the project, I came up with an alternative for solving my problem. Anyway, thank you for your cooperation. Should I encounter this problem again in the future, I will not hesitate to contact you and provide you with the information you requested. Thanks again for your cooperation

[Ponmani Murugaiyan]

Hi Alfredo, 

Thanks for the update. If you need further assistance in future, please get back us. We will be happy to assist you. 

Regards, 

Ponmani M