How to refresh listbox automatically when its datasource get updated?

[Huifei Rao]

I have a listbox as shown below

<ejs-listbox [dataSource]="this.data" height='250'></ejs-listbox>

Array 'data' is declared in the typescript code:

public data = ["item1", "item2", "item3"];

There is a button in the page. When clicking it, a new item is added into data.

onButtonClick() {

     this.data.push("item4");

}

The problem is: my listbox does not refresh automatically to reflect the update of its data source. I have to switch to another page and switch back in order to see the change.

What is the correct way to achieve the automatic refresh of listbox? Thanks.

[Aravinthan Seetharaman]

Hi Huifei, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your reported query, and we can achieve the automatic refresh of listbox by using refresh() method as like below. 

 

 

onButtonClick() { 

    this.data.push("item4"); 

    this.listObj.refresh(); 

  } 

 

 

And we have AddItems() method for add Items to listbox, please refer the below link. 

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/list-box/#additems 

 

Sample: https://stackblitz.com/edit/angular-9ptdke-ctdm6e?file=index.html 

 

Could you please check whether the details are fulfilling your requirement, and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S 

[Huifei Rao]

Thanks. It (the refresh method) works as expected!

[Aravinthan Seetharaman]

Hi Huifei, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been resolved. Please feel free to contact us, if you need any further assistance on this. 

 

Regards, 

Aravinthan S