Filtering Overview in TreeView Component

When you have large tree structure containing thousands of items, it may be hard to find specific items that you are looking for. For this purpose, it is better if you could filter the tree structure so that only those items that match the filter criteria are displayed.

IntegralUI TreeView component includes an option to filter the tree hierarchy using multiple different conditions with and/or combinations. There are many string and numeric operators to choose from, or you can create your own custom filter operations. You fill find sample code that shows how to filter tree data in JavaScript, Angular, React and Vue, in following sections below.

In this article, you will learn how to use IntegralUI DropDownFilter, a web component that displays a dropdown list of all filter operations available for specific filter value: string, number or date. Using this component, you can filter the tree structure on demand by selecting the filter operation from the dropdown list and apply a filter value.

In this example, you can filter the tree view using strings as filter value. To select a filtering operation, click on the icon in drop down filter. By selecting an operation from the dropdown filter and specifying matching value, you can filter the TreeView so that only those items that match the specified condition are shown.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Available DropDown Filter Operations

Initially, TreeView is not filtered, which can also be shown by pressing the Reset option from dropdown filter. As it is presented in above demo, we are using string operations to filter the tree structure. You can choose one of the following filter operations for string values:

• equals - determines whether item text matches exactly with provided value
• does not equal - determines whether item text does not matches exactly with provided value
• begins with - determines whether item text begins with provided value
• ends with - determines whether item text ends with provided value
• contains - determines whether item text contains the provided value
• does not contain - determines whether item text does not contain the provided value
• reset - clears all filter conditions are resets the filter value

These conditions are part of IntegralUI Filter service, which provides many ways to set string, numeric, date or custom filtering using conditions with multiple AND / OR combinations. You can also create a custom filtering operation, but you would need to create a function in your code and apply it to the callback field of filtering parameter.

When the filter value changes or a new filter operation is selected from the dropdown list, the following events are fired:

• change - occurs when a value in input field changes
• operationChanged - occurs when filter operations is selected from dropdown list
• valueChanged - occurs when filter value changes by pressing the ENTER key in the input field

You can handle these events in your code and save the event data in local variables that you will use to create parameters for filtering of tree structure.

• JavaScript
• Angular
• React
• Vue

How to Filter Tree Data

Depending on currently selected filter operation and value, you can create the filter parameters that you will apply to the TreeView's filter method. This method based on current filtering parameters, will filter the tree data accordingly.

By default, filtering is executed using the item's value field to match the specified criteria. If this field value is empty, then the value of item's text field is used. If parent item has children that pass the filter conditions, then parent item also fulfills the filter conditions. This is determined from allowParent field in filter parameters.

• JavaScript
• Angular
• React
• Vue

In current example, whenever filter button is clicked or a new filter operation is selected from the dropdown list, the TreeView will filter its content. At the end, if you are not happy with the result, you can select the Reset option from the dropdown list. This will calls the filter method, but now without parameters, and bring back the original content in the TreeView, showing all items.

Conclusion

In order to filter the tree data, you can use the IntegralUI DropDownFilter component that comes with options to choose a filtering operation for different types of values: string, number or date. This component uses methods from IntegralUI Filter Service, which provides ways to create complex conditions with multiple AND/OR combinations using custom formulas.

With use of this component, you can easily apply a filter on demand and filter the data in TreeView component. Based on selected filter operation and matching value, the tree data is filtered. In addition, filter parameters allow you to select whether comparison is case sensitive for string values and whether it allows parent nodes to appear in the result, when they have child nodes that pass the filtering criteria.

A sample code is available in JavaScript, Angular, React and Vue that shows how to filter tree hierarchy. The TreeView is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.