Filtering

The TreeList component comes with built-in filtering that enables you to display only the rows that match specific search criteria.

Getting Started

To enable filtering in TreeList, use the Filterable property.

Razor

    @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("treelist")
        .Filterable() // Enable the Menu filter mode.
        ...

Razor

    <kendo-treelist name="treelist">
        <filterable enabled="true"/> <!-- Enable the Menu filter mode.-->
        ...
    </kendo-treelist>

Filter Modes

TreeList supports the Filter row filter mode. To set the row filter mode, use the Filterable->Mode property:

Razor

    .Filterable(ftb => ftb.Mode("row"))

Razor

    <kendo-treelist name="treelist">
        <filterable enabled="true" mode="row"/>
        ...
    </kendo-treelist>

In this filter mode, the Kendo UI TreeList will analyze the underlying columns' data, and then it will render the following filters in the column headers:

• Kendo UI TextBoxes for string values
• Kendo UI NumericTextBoxes numeric values
• Kendo UI DatePickers for dates

To see the filter row in action, visit the demo page.

See Also

• Filter Rows by the TreeList HtmlHelper for ASP.NET Core (Demo)
• Server-Side API