Gantt Filter Row
One of the filter modes of the Gantt Chart is a row of filter that renders below the column headers.
In this article:
Basics
To enable the filter row set the FilterMode property of the Gantt Chart to Telerik.Blazor.GanttFilterMode.FilterRow.
The Gantt Chart will render a row below the column headers in the Gantt Tree with UI that you can use to fill in the filter criteria. You can type in the input to execute the default operator as you type, or click a button to choose a different filter operator (like "contains", "greater than" and so on). Filters are applied as the user types in the inputs. Once you enter a filter criteria, the clear button will be enabled to allow you to reset the filter state.
Filter Row in Telerik Gantt
Customization
The Gantt allows you to customize the default behavior of the Filter Row in a couple ways:
Debouncing the Filtering
By default, the filtering will be debounced with 150ms. Configure that with the following component parameter:
| Parameter | Type and Default Value | Description |
|---|---|---|
FilterRowDebounceDelay | int ( 150) | Time in milliseconds between the last typed symbol in the input and the actual filtering. Affects how fast the component initiates filtering. Use it to balance between client-side performance and number of database queries. |
Configuring the Filter Row
You can customize the default Filter Row behavior for each Gantt Tree column through the following properties the GanttColumn exposes:
| Parameter | Type and Default Value | Description |
|---|---|---|
DefaultFilterOperator | FilterOperator | Sets the default filter operator in the column it is declared for. Accepts a member of the FilterOperator enum. The selected operator must be applicable for the specific data type. Check the supported options in the Filter Operators article. |
Filterable | bool ( true) | Determines if the column renders allows filtering and renders filtering UI. Use the parameter to disable filtering for specific columns. |
FilterEditorFormat | string | The Format of the filtering component. Works for DateTime and numeric columns. Do not use a placeholder, for example, set "D", not "{0:D}". |
FilterEditorType | enum | The component to render for filtering of DateTime columns (DatePicker or DateTimePicker). |
FilterOperators | List<FilterListOperator> | Specifies the available operators. Must contain only supported filter operators for the specific data type. If not defined, the component will use a default list of available operators based on the field type. |
ShowFilterCellButtons | bool ( true) | controls the visibility of the filter buttons |
Configure the Filter Row