• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
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

NameTypeDefaultDescription

data

any[]

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

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.

In this article

Not finding the help you need?