Dropdownlist - Item template empty after data source rebind

[Philip Roelofs]

I've encountered a problem with the DropDownList component in my Angular application.

The control has an array of objects as its data source, filtering is enabled and it uses a custom item template.

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.

[Prince Oliver]

Hi Philip, 

Thank you for contacting Syncfusion support. 

We have validated the reported issue and we are considering this as a defect in our EJ2 DropDownList control. The fix for the reported issue will be included in our upcoming 2019 Volume 1 main release which is scheduled to be rolled on March 2019. Meanwhile you can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/4979/    

Regards, 

Prince 

[Philip Roelofs]

Hi Prince,

thank you for your feedback. 

I'm happy to hear that this bug will get fixed soon. I'm looking forward to next release.

Regards,

Philip

[Prince Oliver]

Hi Philip, 

Most Welcome. We are glad to help you. 

Regards, 

Prince 

[Prince Oliver]

Hello Philip,      

Thank you for being patient.   

We have fixed the reported “Item template not loaded” issue with the EJ2 DropDownList control. The fix is included in the version v17.1.41, Kindly refer to the following release notes section: https://ej2.syncfusion.com/documentation/release-notes/17.1.41/#dropdownlist  

We suggest you upgrade to the latest version to resolve the issue. Let us know if you need any further assistance on this.  

Regards,      

Prince    

[Deepak Jain]

Hello Team,

Still getting the template error in Combobox

updating data source and also using additem method in scrolling

 "@syncfusion/ej2-angular-dropdowns": "^17.4.43"

Attachment: itemtemplate_57e43c93.rar

[Sureshkumar P]

Hi Deepak, 

 

Thanks for your update. 

 

Based on your shared information, we have created the sample and could not replicate the issue from our end. please find the sample below with version 17.4.43. if still you have facing the issue, then please revert us with issue replicate sample with detailed issue replication procedure that will help us to provide exact solution as earlier as possible. 

 

Sample link: https://stackblitz.com/edit/angular-cwplnk-b7h43x?file=package.json  

 

 

Regards, 

Sureshkumar P 

[Puneet]

Hi,

I am facing the same problem with ejs-combobox. and the given example in stackblitz link is of dropdownlist. Can you please check if this issue is with combobox too ?

Regards,

Puneet

[Sureshkumar P]

Hi Puneet, 

 

Thanks for your update. 

 

We have modified the previous given stackblitz dropdownlist component sample into comobox. But we cannot replicate the issue from our end. please check the modified sample. 

 

Modified sample link: https://stackblitz.com/edit/angular-cwplnk-zq1iar?file=template.component.ts  

 

If still you have facing the issue, then please revert us with above sample and detailed issue replication procedure that will help us to provide exact solution as earlier as possible. 

 

Regards, 

Sureshkumar P