Telerik UI for ASP.NET Core TreeView Overview

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Telerik REPL
HtmlHelper
TagHelper
Files:
index.cshtml
IndexController.cs
Index_TagHelper.cshtml

Also available for:

CLIENT-SIDE API SERVER-SIDE API
devcraft ninja image

The TreeView component is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Description

The Telerik UI for ASP.NET Core TreeView represents hierarchical data in a tree structure. It enables the users to navigate across the application pages, perform a single or multiple selections of items, and drag and drop elements within the TreeView or between multiple TreeView components. The TreeView offers built-in checkbox support, keyboard navigation, and RTL support, and provides templates for complete customization of each node. You can bind the TreeView to various data sources, take advantage of its load on demand feature, and request data only when a node is expanded.

As an expandable component, the TreeView supports >animation effects when the nodes are expanded or collapsed through user interactions.

The current demo shows two TreeViews with three levels of hierarchy. Their nodes can be selected, checked, or dragged and dropped between different parents in the same Treeview or between both component instances. The default items content is customized through a shared Kendo UI Template.

The ASP.NET Core TreeView control is part of Telerik UI for ASP.NET Core, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The TreeView is a server-side wrapper for the Kendo UI for jQuery TreeView component and supports an HtmlHelper and a TagHelper mode.

Functionality and Features

  • Data binding—Declare all TreeView nodes within the helper declaration or use remote or local data binding.
  • Items—Apply a variety of properties to the TreeView nodes.
  • Dragging and dropping—Drag and drop the nodes of the TreeView across all levels.
  • Checkboxes—Enable the checkbox functionality of the TreeView to facilitate user interaction.
  • Templates—Customize the layout of the TreeView nodes.
  • Events—Subscribe to the TreeView events to implement any custom logic when a specified item is selected, expanded, collapsed, or else.
  • API functions—Take advantage of the available client-side API methods of the TreeView component.
  • Accessibility and keyboard navigation—The TreeView is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
  • RTL support—The TreeView component also enables you to render it in a right-to-left direction.

Additional Apps

This TreeView example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core 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 ASP.NET Core or ThemeBuilder.

Support & Learning Resources

Additional Resources