New to Kendo UI for AngularStart a free 30-day trial

Angular TreeList Filtering Basics

The TreeList filtering feature enables you to display only those TreeList records that meet specific filter criteria.

You can enable the filtering feature by using two methods:

Using the Built-in Directives

Тhe kendoTreeListFlatBinding directive performs filtering automatically. To enable the built-in TreeList filtering, set the TreeList filterable option to true.

To use the built-in filtering functionality of the TreeList with hierarchical data, use the kendoTreeListHierarchyBinding directive and set the TreeList filterable option to true.

html
<kendo-treelist
    [kendoTreeListFlatBinding]="data"
    [filterable]="true"
    ...
>
    ...
</kendo-treelist>

To learn more about the data binding directives and to understand how it works under the hood, see the data operations with the DataBinding directives article.

The following example demonstrates how to enable filtering using kendoTreeListFlatBinding directive.

Change Theme
Theme
Loading ...

Filter Modes

The TreeList supports three filtering modes that display different filtering UIs.

ModeSetupDescription
Filter row (default)Set the filterable option to true or 'row'Filter controls are rendered below each column header cell. The data is filtered automatically once the user stops typing.
Filter menuSet the filterable option to 'menu'.A filter icon appears inside the column header. The data is filtered when the user clicks the Filter button.
Filter menu-rowSet the filterable option to 'menu, row'.A combination of a filter menu and filter row.

The following example demonstrates the available filter modes of the TreeList.

Change Theme
Theme
Loading ...

Filter Data Types

In its column filters, the TreeList provides a built-in filtering UI for all basic data types (string, number, Date, boolean). You can set the filtering UI type through the filter input property of each column.

Text Filter

The text filter is the default filter type. Its UI is a TextBox component.

Change Theme
Theme
Loading ...

Numeric Filter

The numeric filtering UI is a NumericTextBox component.

Change Theme
Theme
Loading ...

Date Filter

The date filtering UI is the DatePicker component.

Change Theme
Theme
Loading ...

Boolean Filter

The boolean filtering UI utilizes the DropDownList component.

Change Theme
Theme
Loading ...