When I rebind the data source in my code (for example because an item was removed from the array and I want the DropDownList to be updated)
the list contains the correct number of entries but they are empty.
It looks like there is an issue with the interpolation in the item template since the html code of the template is present.
Through testing I found that item data is displayed when I use filter the list but I when clear the filter the items are empty again.
The problem also does not occurre when the rebind of the data source happens before the drop down list is opened for first time or when filtering is not enabled.
It also seems to be irrelevant if an item was removed from the array or not. Simply rebinding the data source is enough.
I created some simple example code for you to reproduce the issue:
<ejs-dropdownlist id='dropdownlist' #dropdownlist [itemTemplate]="itemTemplate" [(dataSource)]="items"
(filtering)='onItemFiltering($event)' [allowFiltering]='true'>
<ng-template #itemTemplate let-item="">
<div>{{item.id}}div>
ng-template>
ejs-dropdownlist>
export class AppComponent {
@ViewChild("dropdownlist")
dropdownlist: DropDownListComponent;
items: string[] = [];
constructor(private cdr: ChangeDetectorRef) {
this.items.push("One");
this.items.push("Two");
this.items.push("Three");
}
removeAndRebind(): void {
//this.dropdownlist.value = null;
//this.items.splice(0,1);
this.dropdownlist.dataSource = null;
this.dropdownlist.dataSource = this.items;
}
onItemFiltering: EmitType = (e: FilteringEventArgs) => {
let query: Query = new Query();
if (e.text !== "") {
let predicate = new Predicate("id", "startswith", e.text, true);
query.where(predicate);
}
e.updateData(this.hardwareModels, query);
}
}
I've found threads describing similar problems with answers stating that these are bugs that should be fixed with newer version of the npm package but I was able to replicate the behavior with current version 16.4.54.
