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 attributes:
- 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.
- display-member-path 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'.
- child-items-path 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 Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Collections.Generic;
using Microsoft.AspNetCore.Http;
namespace MvcExplorer.Controllers
{
public partial class TreeViewController : Controller
{
// GET: Index
public ActionResult Index(IFormCollection collection)
{
_treeViewDataModel.LoadPostData(collection);
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;
}
<c1-tree-view display-member-path="Header" child-items-path="Items"
source="Model"
is-animated="@Convert.ToBoolean(optionsModel.Options["IsAnimated"].CurrentValue)"
auto-collapse="@Convert.ToBoolean(optionsModel.Options["AutoCollapse"].CurrentValue)"
expand-on-click="@Convert.ToBoolean(optionsModel.Options["ExpandOnClick"].CurrentValue)"
expand-on-load="@Convert.ToBoolean(optionsModel.Options["ExpandOnLoad"].CurrentValue)">
</c1-tree-view>
@section Settings{
@await Html.PartialAsync("_OptionsMenu", optionsModel)
}
@section Summary{
<p>@Html.Raw(TreeViewRes.Index_Text0)</p>
}
@section Description{
<p>@Html.Raw(TreeViewRes.Index_Text1)</p>
<p>@Html.Raw(TreeViewRes.Index_Text2)</p>
}
Documentation