Records not shown with Filtering enabled.

[Ruben]

I am running into some issues when trying to use the filtering on the DropdownList: When I have filtering enabled, when I press to see the dropdownlist, it is populated with the records. But if I toggle it off and on again, the records are not displayed anymore. To be more precise, the dropdown list is displayed, you cna see that there are some records in it, but it is like the binding with the template I have for #itemTemplate is not succesfull. I can scropp through the list in the dropdown list, and if I select one 'item' in the list, it gets selected and I see what I have selected after the dropdown list closes again. 

Maybe the code is self explanatory and it is more usefull:

<ej-dropdownlist #termsOfSale id="termsOfSale"
                 [readonly]="!allowEditing"
                 [dataSource]="termsOfSalesData"
                 [(ngModel)]="salesOrder.termsOfSaleId"
                 [fields]='fieldsTermsOfSales'
                 [popupHeight]='height'
                 [allowFiltering]="allowTermsOfSaleFiltering"
                 (filtering)="termsOfSaleFiltering($event)"
                 (change)="onTermsOfSalesChange($event)"
                 [placeholder]='waterMarkTermsOfSales'>
    <ng-template #headerTemplate>
        <div class="row">
            <div class="col-sm-2">Code</div>
            <div class="col-sm-10">Short description</div>
        </div>
    </ng-template>
    <ng-template #itemTemplate let-data>
        <div class="row">
            <div class="col-sm-2 col-xm-2" [title]="data.code">{{data.code}}</div>
            <div class="col-sm-10 col-xm-10 cut-text" [title]="data.shortDescription"> {{data.shortDescription}} </div>
        </div>
    </ng-template>
    <ng-template #valueTemplate let-data>
        <div class="row" style="padding:5px 0 5px 5px">
            <div class="col-sm-2 col-xm-2" [title]="data.code">{{data.code}}</div>
            <div class="col-sm-10 col-xm-10 cut-text" [title]="data.shortDescription"> {{data.shortDescription}} </div>
        </div>
    </ng-template>
</ej-dropdownlist>

private termsOfSaleFiltering(event: any) {
    let query = new Query();
    let predicate = new Predicate('code', 'contains', event.text, true)
        .or('shortDescription', 'contains', event.text, true)
        .or('description', 'contains', event.text, true);
    if (event.text === '' || event.text == '') {
        event.updateData(this.termsOfSalesData);
    } else {
        event.updateData(this.termsOfSalesData, query.where(predicate));
    }
}

The html looks like this:

<div class="e-content e-dropdownbase" tabindex="0" style="max-height: 190px;">

     <ul class="e-list-parent e-ul" role="listbox" id="customers_options" aria-hidden="false">

          <li class="e-list-item" id="43e7-0" role="option" data-value="2bfb9869-c2e8-41c9-84f0-a88d01713f98">

                <div class="row">

                     <div class="col-sm-2 col-xm-2"></div>

                     <div class="col-sm-6 col-xm-6 cut-text"> </div>

                     <div class="col-sm-4 col-xm-4 cut-text"> </div>

                </div>

So, the  "<li class="e-list-item" id="43e7-0" role="option" data-value="2bfb9869-c2e8-41c9-84f0-a88d01713f98">" gets populated with the correct data-value, but everything under the  "<div class="row">" is not populated. After I select a list item, it is shown as the selected value because it has information about the selected item from <li data-value="....etc..etc..">. 

Thank you for your support.

Attachment: dropdownlist_filtering_incident_f01f5d8a.zip

[Keerthana Rajendran]

Hi Ruben,   

  

Thank you for contacting Syncfusion Support.   

  

We have validated the reported issue at our end. We have considered it as a defect and logged  defect report. The fix for the issue will be included in next patch release on  March 13^th, 2018. We appreciate your patience until then.   

  

Regards,   

Keerthana 

 

[Ruben]

Dear Sir/Madame,

I woukd like to recevie an uodate about the dropdownlist filtering issue. As far as i have understand, on the 13th of March there was released a patch. In order to use the nee wesion, should I just update de syncfusion version in "package.json" and run "npm install"? Thank you!

Kind regards,

Ruben-Laurențiu Grab

[Ilakkiya Baskar]

Hi Ruben,    

Thank you for your patience. 

We have fixed the reported issue (Filtering issue in DropDownList) and rolled out in v16.1.28 release. Now, you can upgrade the ej2-ng-dropdowns npm package on your application.    

 

NPM package: https://www.npmjs.com/package/@syncfusion/ej2-ng-dropdowns 

 

Please only upgrade your ej2-ng-dropdowns package. Please run the below command on your application. 

 

Npm install @syncfusion/ej2-ng-dropdowns @16.1.28-save 

 Please let us know, if you have any other concern, we will happy to assist you.     

 

Regards,    

Ilakkiya B