Example of Menu Filter in ASP.NET MVC Tree Grid Control

This sample demonstrates the way of filtering Tree Grid columns using menu filter type UI. In this sample, click the filtering icon from column header to show filter UI for a particular column. You can also change the hierarchy mode of filtering from the properties panel.

DEMO

SOURCE

Filter Type
Hierarchy Mode

The filtering feature enables the user to view the reduced amount of records based on filter criteria. It can be enabled by setting AllowFiltering property as true.

Tree Grid supports the following filter types. They are

FilterBar
Menu
Excel

you can change the filter type by setting FilterSettings->Type

Tree Grid provides support for a set of filtering modes with HierarchyMode property. The below are the type of filter mode available in Tree Grid.

Parent - This is the default filter hierarchy mode in Tree Grid. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered record only displayed.
Child - The filtered records are displayed with its child record, if the filtered records do not have any child record then only the filtered records are displayed.
Both - The filtered records are displayed with its both parent and child record. If the filtered records do not have any parent and child record then only the filtered records are displayed.
None - Only the filtered records are displayed.

In this demo, filter menu enabled by default, you can switch to other hierarchy mode of filtering by using dropdown.

More information filter configuration can be found in this documentation sectionopens in a new tab.