We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Dropdownlist - Item template empty after data source rebind

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.


8 Replies

PO Prince Oliver Syncfusion Team February 28, 2019 10:09 AM UTC

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 



PR Philip Roelofs March 1, 2019 09:32 AM UTC

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


PO Prince Oliver Syncfusion Team March 4, 2019 05:14 AM UTC

Hi Philip, 

Most Welcome. We are glad to help you. 

Regards, 
Prince 



PO Prince Oliver Syncfusion Team April 17, 2019 05:55 AM UTC

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    



DJ Deepak Jain June 13, 2020 02:06 PM UTC

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


SP Sureshkumar P Syncfusion Team June 15, 2020 11:13 AM UTC

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. 
 
 
 
Regards, 
Sureshkumar P 



PU Puneet June 17, 2020 01:26 PM UTC

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


SP Sureshkumar P Syncfusion Team June 18, 2020 07:57 AM UTC

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. 
 
 
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 
 


Loader.
Live Chat Icon For mobile
Up arrow icon