suggestionCount is not working with custom filter

[Matthieu]

Hi,

I have a problem when using custom filtering on large dataset. 

the suggestionCount parameter is working only on first popup opening.

After I start filter, the parameter is not used anymore, so if I remove the filter text and I click on the popupOpen button, the component tries to load all the data and my app freezes.

Here is a stackblitz reproducing the problem: https://stackblitz.com/edit/angular-owb16z?file=app.component.ts,app.component.html

Thanks,

Regards,

Matt

[Sureshkumar P]

Hi Matthieu,

The suggestionCount property only supports the default component filtering actions. When we use the customer filtering to the component using filtering event handler method then you can use the query property to achieve your requirement.

Find the code example here:

[component.html]

 <ejs-autocomplete

          id="icons"

          [showPopupButton]="true"

          [dataSource]="socialMediaData"

          [placeholder]="iconWaterMark"

          [fields]="iconFields"

          [query]="query"

          (filtering)="onFiltering($event)"

        ></ejs-autocomplete>

 

[sample.ts]

 public query: Query = new Query().take(4);

 

Find the modified sample here: https://stackblitz.com/edit/angular-owb16z-2817gj?file=app.component.ts

Regards,

Sureshkumar P

[Matthieu]

Hi,

Thanks for the reply. 

If you look at the sample I've given to you on the first post, you'll see the take(4) property is already there and is working if you start filtering. 

The problem arise when you clear your filter and open again the suggestion popup.

I've found a possible solution: in your file ej2-dropdowns.es5.js, in the method 

AutoComplete.prototype.getQuery (around line 8375 in version 20.3.48):

I have changed the tests order for this one:

    AutoComplete.prototype.getQuery = function (query) {
        var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
        var filterType = (this.queryString === '' && !isNullOrUndefined(this.value)) ? 'equal' : this.filterType;
        var queryString = (this.queryString === '' && !isNullOrUndefined(this.value)) ? this.value : this.queryString;
// EDIT INNOVATIONCRM -------------------------------------------
        if (!isNullOrUndefined(this.suggestionCount)) {
            // Since defualt value of suggestioncount is 20, checked the condition
            if (this.suggestionCount !== 20) {
                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
                    if (filterQuery.queries[queryElements].fn === 'onTake') {
                        filterQuery.queries.splice(queryElements, 1);
                    }
                }
            }
            filterQuery.take(this.suggestionCount);
        }
// EDIT INNOVATIONCRM -------------------------------------------
        if (this.isFiltered) {
            return filterQuery;
        }
        if (this.queryString !== null && this.queryString !== '') {
            var dataType = this.typeOfData(this.dataSource).typeof;
            if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
            }
            else {
                var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';
                filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
            }
        }
        return filterQuery;
    };

It corrects the behaviour and I've not seen a side effect so far.

Hopes it helps.

Regards,

Matt



[Shereen Shajahan]

Matthieu, glad to know the issue has been solved at your end. Please get back to us for further assistance.