Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
New to Kendo UI for Angular? Start a free 30-day trial

FilterDirective

Implements an event handler for the filterChange event of a DropDowns component which performs simple data filtering.

@Component({
selector: 'my-app',
template: `
 <kendo-autocomplete
     [data]="data"
     kendoDropDownFilter
     placeholder="e.g. Andorra"
 >
 </kendo-autocomplete>
`
})
class AppComponent {
    public data: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
}

Currently, the built-in filtering does not work with grouped data.

Selector

[kendoDropDownFilter]

Inputs

kendoDropDownFilter

string | DropDownFilterSettings

The configuration object which sets the behavior of the kendoDropDownFilter directive. If no DropDownFilterSettings object is provided to this input, the directive will use the default interface settings.

data

any[]

The initial data that will be used as a source array for the filtering operations.

In this article

Not finding the help you need?