MultiSelectTree

MultiSelectTree Overview

The MultiSelectTree component is a versatile UI element that allows users to select multiple items from a popup with hierarchical tree structure. Each option within the hierarchy is presented with a checkbox, allowing for easy selection. Once selected, the chosen items are displayed as chips, providing a clear visual representation of the user's selections. The MultiSelectTree component is commonly used in scenarios where users need to make multiple selections from a complex and structured data set, such as organizing files or selecting categories for a product.

Live Demo

Appearance

MultiSelectTrees provide built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI MultiSelectTree, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI MultiSelectTree can acquire the following states which you can set by using the following classes:

• A MultiSelectTree in its normal state is fully active, but the user is not interacting with it. This is the default state of the component. It can display an explanatory placeholder text or the currently selected items as separate chips.
• k-hover—Тhe hover state of a MultiSelectTree is applied after the user hovers over the component. In its hover state, the component is interactive and the user can click on it to open the popup with the tree list.
• k-focus—The focus state is triggered after the user clicks or tabs into the MultiSelectTree. In its focus state, the component is active, ready to receive user selection, and renders a visual indicator, for example, a highlighted border.
• k-invalid—The invalid state of the MultiSelectTree is triggered when there is an error with the user's selection. In this state, the component displays a red border and a validation icon to indicate the issue.
• k-invalid k-focus—The invalid focus state of a MultiSelectTree is a result of spotlighting a MultiSelectTree whose selection does not pass the validation requirements.
• k-disabled—The disabled state indicates that a MultiSelectTree is temporarily unclickable and users cannot interact with it. To indicate that they are unavailable, MultiSelectTrees in their disabled state are faded and slightly out of focus.

Anatomy

The anatomy of the MultiSelectTree summarizes the elements of the component.

The next image shows the anatomy of a MultiSelectTree and includes the following elements:

1. Input field
2. Label (optional in Form components)
3. Hint text (optional in Form components)
4. Placeholder
5. Clear icon
6. Chip
7. Selected items
8. Popup with tree list

Size

The MultiSelectTree provides the size configuration option that enables you to control how big or small the rendered MultiSelectTree will be. MultiSelectTrees also provide options for size customization.

size provides the following available options:

• small—Renders small MultiSelectTrees, which are suitable for compact components, such as Toolbars, where the available space is limited.
• medium (default)—Renders a medium MultiSelectTree.
• large—Renders large MultiSelectTrees, which are suitable for adaptive designs.
• none—Does not set a size and allows you to add your own, custom value.

1. Small
2. Medium (default)
3. Large

Fill Mode

The MultiSelectTree provides the fillMode configuration option that enables you to control the way in which color is applied to the rendered MultiSelectTree. MultiSelectTrees also provide options for fill-mode customization.

fillMode provides the following available options:

• solid(default)—A solid MultiSelectTree puts stronger emphasis on the action it indicates and draws the user's attention. Also, the solid fill mode is the traditional and common style that is widely used.
• outline—An outline MultiSelectTree provides a minimalist look, and can be a good choice when you want the component to blend in with the background or other UI elements.
• flat—A flat MultiSelectTree provides a very minimalist and clean look, and can be a good choice when you want the component to be unobtrusive.

1. Solid (default)
2. Outline
3. Flat

Border Radius

The MultiSelectTree provides the rounded option that enables you to control the border radius. The defined value for the border radius significantly affects the look-and-feel of the UI. MultiSelectTrees also provide options for border-radius customization.

rounded provides the following available options:

• small—Renders a border radius of 2 px.
• medium (default)—Renders a border radius of 4 px.
• large—Renders a border radius of 6 px.
• full—Renders a border radius of 9999 px.
• none—Does not set a rounded and allows you to add your own, custom value.

1. Small
2. Medium (default)
3. Large
4. Full

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular MultiSelectTreeFind more information about the Kendo UI for Angular MultiSelectTree in the official product documentation of the component.

KendoReact MultiSelectTreeFind more information about the KendoReact MultiSelectTree in the official product documentation of the component.

Kendo UI for Vue MultiSelectTreeFind more information about the Kendo UI for Vue MultiSelectTree in the official product documentation of the component.