THEMES
THEME SETTINGS

Navigation and Layout - TreeView Overview

  • Collapse
    Music
    • Expand
      Andy McKee
      • Rylynn
      • Drifting
    • Expand
      Antoine Dufour
      • Reality
  • Expand
    Video
    • Inception - Official trailer
    • MythBusters Top 25 Moments
    • Richard Feynman - Ode on a Flower
  • Collapse
    Pictures
    • Desert
    • Me & Kate
    • Party 03.08
About the TreeView

The DevExpress ASP.NET MVC TreeView extension assists web navigation by displaying a hierarchical list of items (nodes) such as folders. Nodes in a TreeView can be expanded and collapsed to display other sub-items.

To add a tree-like menu to your web application, add the TreeView extension to the View, and add the required tree nodes and their respective child nodes:

View code:

@Html.DevExpress().TreeView(settings => {
    settings.Name = "tvOverview";
    settings.Nodes.Add(node => {
        node.Text = "Music";
        node.Expanded = true;
        node.Image.Url = "~/Images/music.png";
        node.Nodes.Add(subNode => {
            subNode.Text = "Andy McKee";
            subNode.Nodes.Add("Rylynn");
            subNode.Nodes.Add("Drifting");
        });
    });
    // And other nodes
}).GetHtml()

Key Features
  • Binding to Data
    You can bind a TreeView to a data source so that your tree structure is retrieved from an XML file, a SiteMap or a hierarchical list.
  • AJAX Support
    TreeView supports AJAX technology by implementing the ability to load child nodes from the server via a callback when the node is expanded.
  • Virtual Mode
    In this mode, a tree is created on demand (i.e., child nodes are created and initialized when their parent node is expanded).
  • Template Technology
    Templates are fully supported. For each element within TreeView, you can customize the appearance or layout using any HTML content.
  • Rich Client-Side Functionality
    A comprehensive client-side API is available for TreeView. This functionality, coupled with the ability to handle events on the client side, gives you full control over the TreeView behavior on the client side.
Version: v2017 vol 1.5
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at info@devexpress.com or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.