Filter menu in JavaScript Treegrid control

18 Nov 20181 minute to read

You can enable filter menu by setting the filterSettings.type as Menu. The filter menu UI will be rendered based on its column type, which allows you to filter data.
You can filter the records with different operators.

• allowFiltering must be set as true to enable filter menu.
• Setting columns.allowFiltering as false will prevent filter menu rendering for a particular column.

Custom component in filter menu

The column.filter.ui is used to add custom filter components to a particular column. To implement custom filter ui, define the following functions:

• create: Creates custom component.
• write: Wire events for custom component.
• read: Read the filter value from custom component.

In the following sample, dropdown is used as custom component in the duration column.

Enable different filter dialog for a column

You can use both Menu and Excel filter in a same TreeGrid. To do so, set the
column.filter.type as Menu or Excel.

In the following sample menu filter is enabled by default and excel filter is enabled for the Task Name column using the column.filter.type.