TreeView Nodes

In most cases, you can work with a TreeView using only its data-binding and selection properties, and the original data items bound to the tree.

There are a few scenarios where you may need access to properties of the TreeNode objects that make up the actual tree.

You can get the TreeNode that corresponds to a given data item by calling the TreeView's getNode method, or use the nodes property to get the collection of root nodes on the TreeView.

Once you have a node, you can use its properties and methods to inspect or modify the tree. These properties and methods include:

dataItem: Gets the item in the data source that is bound to this node.
element: Gets the HTML element that represents this node.
ensureVisible: Expands parent nodes and scrolls the TreeView as needed to ensure the node is currently visible.
select: Selects the node and ensures it is visible.
parentNode: Gets a reference to the node's parent node.
index: Gets the index of this node in the node collection that contains it.
level: Gets the node's level in the outline structure. Top level nodes have level zero.
nodes: Gets an array containing the node's child nodes.
previous, next, previousSibling, nextSibling: Get references to adjacent nodes on the tree, optionally excluding collapsed or non-sibling nodes.
isChecked, isCollapsed, isDisabled: Get or set values that change the state of the node.

For example, click the button below to scan the visible nodes on the TreeView. Try expanding and collapsing some nodes to see the difference when you click the button:

Electronics

Trimmers/Shavers

Tablets

Phones

Apple

Motorola

Nokia

Samsung

Speakers

Monitors

Toys

Shopkins

Train Sets

Science Kit

Play-Doh

Crayola

Home

Coffeee Maker

Breadmaker

Solar Panel

Work Table

Propane Grill

Scan Visible Nodes

Visible Nodes:

// This file locates: "Scripts/Lesson/C1Nav/Nodes.js".
c1.documentReady(function () {
    var theTree = wijmo.Control.getControl('#theTree');
 
    // scan visible nodes now and when the user clicks the button
    scanNodes(true);
    document.getElementById('scan').addEventListener('click', function (e) {
        scanNodes(true);
    });
 
    // scan nodes and show their information
    function scanNodes(visible) {
        var result = '',
                cnt = 0;
        for (var node = theTree.nodes[0]; node; node = node.next(visible)) {
            cnt++;
            result +=
              wijmo.format('{Header}', node.dataItem) +
              wijmo.format(' <span class="node-info">(level: {level}, index: {index}, isCollapsed: {isCollapsed})</span><br/>', node);
        }
        document.getElementById('scanResult').innerHTML = result;
    }
});

// This file locates: "Content/css/Lesson/C1Nav/Nodes.css".
.node-info {
  font-size: 70%;
  font-style: italic;
}
 
/* default trees on this sample */
.demo-control .wj-treeview {
    font-size: 120%;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Nodes
        public ActionResult Nodes()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}

@model IEnumerable<TreeViewData>
 
<h1>
    @Html.Raw(Resources.C1Nav.Nodes_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.Nodes_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Nodes_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Nodes_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Nodes_Text4)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text7)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text8)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text9)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text10)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text11)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text12)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text13)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Nodes_Text14)
    </li>
</ul>
 
<p>
    @Html.Raw(Resources.C1Nav.Nodes_Text15)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-5">
        @Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")
    </div>
    <div class="col-xs-7">
        <div id="scan" class="btn btn-primary">
            @Html.Raw(Resources.C1Nav.Nodes_Text16)
        </div>
        <h4>
            @Html.Raw(Resources.C1Nav.Nodes_Text17)
        </h4>
        <div id="scanResult"></div>
    </div>
</div>