How to Select Multiple Items in TreeView Component

There are different ways to select multiple items or nodes in IntegralUI TreeView component, which you can use in Angular, React or Vue. You can select items using mouse and/or keyboard using the CTRL or SHIFT keys. In addition, you can also select items from code.

In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows different ways to select multiple items in TreeView.

In above demo you can choose one of four selection options available. Depending on chosen option, the way tree items are selected changes. Whenever an item is selected, the list on the right will show all currently selected items.

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

Multiple Selections in TreeView Component

There are four different options to select multiple items in TreeView component:

• None - selection is disabled
• One - only one node is selectable, default option
• MultiSimple - you can select multiple nodes using just mouse clicks or touch
• MultiExtended - you can select multiple nodes using CTRL or SHIFT keys

If you want to prevent selection for all nodes or items, the best option is to disable it by setting the selectionMode property value to None. In cases of multiple selections, the best is to use the MultiExtended mode, because it allows you to select nodes using SHIFT key from the first clicked node to the last. With MultiSimple mode you can select nodes using only the mouse or with touch, keyboard is not required.

• JavaScript
• Angular
• React
• Vue

During selection, beforeSelect, afterSelect and selectionChanged events are fired, which you can handle in your code and add your own custom actions.

TreeView Multi Select using CTRL or SHIFT Keys

When selectionMode property value is set to either MultiSimple or MultiExtended, you can select multiple items or nodes.

In MultiSimple mode, you can select multiple items using only the mouse or with touch. You can still use the CTRL key, but it is not required.

On the other hand, with MultiExtended mode in order to select items, you need to press and hold CTRL or SHIFT key and click on items. When SHIFT key is pressed, you can select all items between the first and the last clicked item.

How to Display Selected Items in a Separate List

Whenever selection changes the selectionChanged event is fired. You can handle this event in your code and use it to display the list of currently selected items. A list of selected items is internally stored in the TreeView. To retrieve this list, use the getList method with 'selected' parameter. Like in this example, this method is used to update the list on the right, to show all currently selected items in the TreeView component.

• JavaScript
• Angular
• React
• Vue

Manually Select Multiple Nodes or Items

In some cases, you may need to select multiple items from code. For this purpose, the selectItems method is available. At first, you need to create an array of items that you want to select, and then apply it to the method, like this:

• JavaScript
• Angular
• React
• Vue

The items that you want to select manually must be present in the tree hierarchy.

Conclusion

There are different options to select multiple items in TreeView component for JavaScript, Angular, React and Vue. Depending on chosen option, you can disable selection completely, select one or multiple nodes or items. This process accompanies events that you can handle in your code and further extend this functionality. When required, you can also select multiple nodes manually from code.

TreeView is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.