TreeView
TreeView
Overview
This view shows basic features of TreeView for ASP.NET MVC.
Features
Sample
Settings
Description
The TreeView control displays a hierarchical list which may contain text, checkboxes, images, or arbitrary HTML content. A TreeView is typically used to display the headings in a document, the entries in an index, the files and directories on a disk, or any other kind of information that might usefully be displayed as a hierarchy.
To create trees, you will normally have to set three properties:
- Source It is an array that contains the hierarchical data. Each item in the array contains information about a node and (optionally) an array of child nodes.
- DisplayMemberPath It defines the name of the property in the items that contains the text to be displayed in the tree nodes. By default, this property is set to the string 'header'.
- ChildItemsPath It defines the name of the property in the items that contains the array of child nodes. By default, this property is set to the string 'items'.
Source
IndexController.cs
using MvcExplorer.Models;
using System.Web.Mvc;
using System.Collections.Generic;
namespace MvcExplorer.Controllers
{
public partial class TreeViewController : Controller
{
// GET: Index
public ActionResult Index(FormCollection collection)
{
IValueProvider data = collection;
_treeViewDataModel.LoadPostData(data);
ViewBag.DemoOptions = _treeViewDataModel;
return View(Property.GetData(Url));
}
private readonly ControlOptions _treeViewDataModel = new ControlOptions
{
Options = new OptionDictionary
{
{"IsAnimated",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}},
{"AutoCollapse", new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}},
{"ExpandOnClick",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}},
{"ExpandOnLoad",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}}
}
};
}
}
Index.cshtml
@model Property[]
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
}
@(Html.C1().TreeView()
.Bind(Model)
.DisplayMemberPath("Header")
.ChildItemsPath("Items")
.IsAnimated(Convert.ToBoolean(optionsModel.Options["IsAnimated"].CurrentValue))
.AutoCollapse(Convert.ToBoolean(optionsModel.Options["AutoCollapse"].CurrentValue))
.ExpandOnClick(Convert.ToBoolean(optionsModel.Options["ExpandOnClick"].CurrentValue))
.ExpandOnLoad(Convert.ToBoolean(optionsModel.Options["ExpandOnLoad"].CurrentValue)))
@section Settings{
@Html.Partial("_OptionsMenu", optionsModel)
}
@section Summary{
<p>@Html.Raw(Resources.TreeView.Index_Text0)</p>
}
@section Description{
<p>@Html.Raw(Resources.TreeView.Index_Text1)</p>
<p>@Html.Raw(Resources.TreeView.Index_Text2)</p>
}
Documentation