# Filtering

The TreeView provides a mechanism for rendering a filter input as well as built-in filter handling through the [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective) and [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective) directives.

> The TreeView does not support server-side data filtering.

## Built-in Filter Input Element

To show the default built-in filter input element, set the [`filterable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterable) prop of your TreeView to `true`. It is set to `false` by default. Once [`filterable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterable) is set to `true`, the TreeView will start emitting a [`filterChange`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterchange) event. You could then either use one of the data-binding directives, or handle the [`filterChange`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterchange) event manually.

## Built-in Filtering

You could use the [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective) or the [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective) directive to take advantage of their built-in filtering. This could be done in one of two ways:

* Just set [`filterable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterable) to `true` as described above and filtering will work out of the box.
* Pass a [`filter`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filter) prop to the [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective) or the [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective) directive. This works even when the built-in input is not shown (`filterable` = `false`).

### Filtering Using the Hierarchy Binding Directive

Using the [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective) directive with [`filterable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterable) set to `true`:

The following example demonstrates filtering with the built-in input and the `kendoTreeViewHierarchyBinding` directive, which automatically handles the `filterChange` event.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/hierarchy/source.txt)

Using the [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective) filtering by passing it a [`filter`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filter) prop from an external source:

The following example demonstrates how to drive filtering from an external input element by passing a `filter` value directly to the `kendoTreeViewHierarchyBinding` directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/hierarchy/external/source.txt)

### Filtering Using the Flat Binding Directive

Using the [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective) directive with [`filterable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterable) set to `true`:

The following example demonstrates filtering with the built-in input and the `kendoTreeViewFlatDataBinding` directive, which automatically filters flat data using the configured parent-child relation.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/flat/source.txt)

Using the [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective) filtering by passing it a [`filter`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filter) prop from an external source:

The following example demonstrates how to drive filtering from an external input element by passing a `filter` value directly to the `kendoTreeViewFlatDataBinding` directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/flat/external/source.txt)

### Filter Settings

The built-in filtering can be fine-tuned by passing a [`filterSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective#filtersettings) input to whichever data-binding directive you have used.

The following example uses both the `ignoreCase` and the `operator` settings.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/filter-settings/source.txt)

### Setting an Initial Filter

Passing a [`filter`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filter) prop to a TreeView which *both* uses one of our data-binding directives, *and* has its [`filterable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterable) prop set to `true`, will result in an initial filtration being applied as soon as the component loads.

> Passing a [`filter`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filter) prop to a TreeView which *does not* use [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective) or [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective) will just set an initial value to the built-in input element, but no filtering will be performed automatically.

The following example demonstrates how to set an initial filter value that is applied as soon as the TreeView loads, pre-filtering the visible nodes on render.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/hierarchy/initial/source.txt)

## Auto-Expanding Nodes While Filtering

The TreeView lets you control the expanded state of its nodes while filtering.
To enable it, please use the following configuration:

* Use either [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/hierarchybindingdirective) or [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective).
* Use the [`ExpandDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/expanddirective).
* Pass an [`expandOnFilter`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/expanddirective#expandonfilter) input to the component (received by the [`ExpandDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/expanddirective) to handle the expanded state).

The following examples demonstrate each of the available settings for [`expandOnFilter`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/expanddirective#expandonfilter). You can also pass `true` to this input, which will result in the default value for each setting.

### maxAutoExpandResults

This is the max amount of nodes to be auto-expanded on filter. If the number of filter results exceeds this value, the expanded state will be reverted according to the [expandedOnClear](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/filterexpandsettings#expandedonclear) setting.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/max-auto-expand/source.txt)

### expandMatches

Expand the matching nodes in order to display their children too. Only applicable in lenient mode, as in strict mode, children of matched nodes are not shown.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/expand-matches/source.txt)

### expandedOnClear

Sets which nodes should be left expanded when the filter is cleared, or when the filter results exceed the [maxAutoExpandResults](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/filterexpandsettings#maxautoexpandresults).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/expanded-on-clear/source.txt)

## Manual Filtering

To manually filter the TreeView component in combination with [`children`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#children) and [`hasChildren`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#haschildren) functions, first set its [`filterable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterable) prop to `true`. Once that's done, the TreeView will start emitting a [`filterChange`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#filterchange) event, which is a `string` containing the filter term.

The following example demonstrates a manual search function which filters the data passed to the TreeView.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/filtering/manual/source.txt)

## Suggested Links

* [Angular TreeView Homepage](https://www.telerik.com/kendo-angular-ui/treeview)
* [API Reference of the Angular TreeView](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api)
* [`filterSettings` of the `FlatDataBindingDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/flatdatabindingdirective#filtersettings)