Kendo-angular: dropdownlist add Defaultfilter for "textField"

[squadwuschel]

It would be nice if there would be a "defaultfilter" for the dropdownlist.

I know there is a way to create a custom filter

http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/filtering/

but I think the filter mostly needed filteroption is that you can just filter for the "textField" and here would be a default Implementation nice e.g. when you don't the "filterChange" event, then just use the defaultfilter for the "textfield"

[valchev]

Hi @squadwuschel and thank you for getting in touch.

By design the component does not modify (filter, sort, etc) its data and always displays all the items that are passed via the data attribute. We choose this behaviour in order to give the developer full control over the data operations.

We will consider to provide a separate directive that will perform basic filtering automatically.

[squadwuschel]

Yes thats great that you can set your own custom Filter. But I think a addional directive like you said would be very nice, because I think for 90% of all usage the default filter for the "textField" is enough an for such a function its too many code I have to write to achieve this goal.

[squadwuschel]

Hi,
I've created my own little directive to solve this Solution.

import { Input, Directive, Host, Self, Optional, OnInit } from '@angular/core';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';

/**
 * Verwendung
 * 
 <kendo-dropdownlist 
        sxpFilterable 
        [data]="listItems">
</kendo-dropdownlist>

<kendo-dropdownlist 
    [sxpFilterable]="'Beschreibung'" 
    [data]="listItemsComplex"
    [textField]="'Text'"
    [valueField]="'Value'">
</kendo-dropdownlist>

<kendo-dropdownlist 
    sxpFilterable 
    [data]="listItemsComplex"
    [textField]="'Text'"
    [valueField]="'Value'">
</kendo-dropdownlist>
* 
*/
@Directive({
selector: '[sxpFilterable]',
})
export class FilterDirective implements OnInit {
    @Input() sxpFilterable: string = null;

    private _data : Array<any>;
    @Input() get data() : Array<any> {
        return this._data;
    }
    set data(v : Array<any>) {
              if (v) {
                this.dropdown.data = v;
                this._data = [...v];
             }
    }

    constructor(@Host() @Self() @Optional() public dropdown : DropDownListComponent) {
        this.dropdown.filterable = true;
    }

    ngOnInit(): void {
        this.dropdown.filterChange.subscribe(entry=> {
            if(this.dropdown.textField) {
                //Wir können das Property übergeben in dem gesucht werden soll
                if(this.sxpFilterable) {
                    this.dropdown.data = this._data.filter(value=> value[this.sxpFilterable].toLowerCase().indexOf(entry.toLowerCase()) !== -1);
                }
                else {
                    //Das Standard Textproperty wird verwendet für die Suche, was in textField angegeben wurde
                    this.dropdown.data = this._data.filter(value=> value[this.dropdown.textField].toLowerCase().indexOf(entry.toLowerCase()) !== -1);
                }
            }
            else {
                //Wenn kein Textfield angegeben wurde, dann handelt es sich um einen String und wir filtern direkt nach diesem.
                this.dropdown.data = this._data.filter((s) => s.toLowerCase().indexOf(entry.toLowerCase()) !== -1);
            }
        });
    }
}

you don't set the Data anymore directly on the "data" attribute you need to use the sxpData to set the data, because there is no dataChanged SubScription on the Kendo DropDown Component I need to solve this with my own sxpData attribute. So its possible to set the data. You can also tell the search function in which property it has to search or it uses the default TextField and in simple lists it uses just the dataListItem.

If you could provide such a directive directly from Kendo it would be very nice

[dimitar-pechev]

The filtering directive feature is added and is available in the Development build of the kendo-anuglar-dropdowns package v3.2.0-dev.201810111406.

[dimitar-pechev]

The filtering directive is shipped in v3.2.0 of the @progress/kendo-angular-dropdowns package.

The kendoDropDownFilter directive can be used with each one of the four currently available dropdown controls.

The docs have also been updated with examples on how to use it in your code. You can find the samples in the Filtering section of the docs for each control.

API reference: filter directive, optional filter settings.