• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Default Filtering in ASP.NET Core Tree Grid Control

This sample demonstrates the default filterbar in TreeGrid. In this sample, type the value in the filterbar and press enter to filter particular column. The filtering is based on hierarchy mode.

DEMO
SOURCE
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. A filter bar row will be rendered next to header which allows the end-users to filter data by entering text within its cells.

Filterbar uses two modes which specifies how to start filtering. They are,

  • OnEnter - Enabled by default, filter will be initiated after pressing Enter key.
  • Immediate - Filter will start after user ends typing. This uses a time delay of 1500ms to initiate filter after use stops typing. It can be overridden using the filterSettings->immediateModeDelay property.

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

  • Parent - This is the default filter hierarchy mode in TreeGrid. 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, you can type the value in the filterbar and press enter to filter particular column or select the value from filterbar template of Duration column.


More information on the data binding can be found in this documentation section.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab