New to Telerik UI for Blazor? Download Free 30-day trial

TreeView - Selection

Configurator

Selection Mode

Select one node or more (through Shift or Ctrl).
Selected Items:
Icon:
Title: Implementation
Id: 3
Icon:
Title: site.psd
Id: 4
  • Selection.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Description

Telerik UI for Blazor TreeView allows you to select one or more nodes and exposes an option to configure the selection mode. The selection mode of the TreeView controls how many nodes the user will be able to select. To specify the desired selection mode, use the SelectionMode parameter. It takes a member of the TreeViewSelectionMode enum. The available options are:

  • None - disable the node selection. This is the default setting.
  • Single Selection Mode
  • Multiple Selection Mode

If the Single Selection Mode is enabled, the user will be able to select only one node. That option is useful if you want to restrict the user selection to a single value and the desired output of the Blazor TreeView is just one object instance.

The Multiple Selection Mode allows the user to select multiple random nodes. In this case, you can use the SelectedItems parameter of the Blazor component to get or set the selected nodes collection. It accepts an IEnumerable of object and supports two-way binding.

To extract details for the selection from SelectedItems, you need to cast the collection to the correct model type. That is required because you can bind the Treeview to different model types at each level.

The current demo showcases the different Blazor TreeView selection modes.

This TreeView Selection example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.