Telerik UI for ASP.NET MVC TreeView Overview

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Change Theme
    default
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Ocean Blue A11Y accessibility
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Bootstrap 3
    • Bootstrap 3 Dark
    • Main Dark
    • Nordic
    • Turquoise
    • Turquoise Dark
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Green
    • Green Dark
    • Lavender
    • Lavender Dark
    • Main Dark
    • Metro
    • Metro Dark
    • Moonlight
    • Opal
    • Opal Dark
    • Silver
    • Silver Dark
    • Uniform
    Fluent Theme
    • Main
    Launch Theme Builder
index.cshtml
IndexController.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API
devcraft ninja image

The TreeView component is part of Telerik UI for ASP.NET MVC, 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.

Download Free Trial

Description

The Telerik UI for ASP.NET MVC 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 MVC TreeView control is part of Telerik UI for ASP.NET MVC, 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 comes in the form of an HtmlHelper.

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.
  • Draggin 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 a unique collection of hundreds of ASP.NET MVC demos, with which you can see all Telerik ASP.NET MVC 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 the ThemeBuilder.

Support & Learning Resources

Additional Resources