Adding Nodes

To add nodes to a TreeView control, add a new data item to the tree's itemsSource array (at the proper position), then refresh the tree by calling the loadTree method:

Parent 1

Child 1.1

Child 1.2

Child 1.3

Parent 2

Child 2.1

Child 2.2

Parent 3

Child 3.1

New Node:

Add Node:

// This file locates: "Scripts/Lesson/C1Nav/Adding.js".
c1.documentReady(function () {
    var theTree = wijmo.Control.getControl('#theTree');
    theTree.itemsSource = getData();
    theTree.displayMemberPath = 'header';
    theTree.childItemsPath = 'items';
    theTree.selectedItem = theTree.itemsSource[0];
 
    // handle buttons
    document.getElementById('btnBefore').addEventListener('click', function () {
        addNode('before');
    });
    document.getElementById('btnAfter').addEventListener('click', function () {
        addNode('after');
    });
    document.getElementById('btnInto').addEventListener('click', function () {
        addNode('into');
    });
 
    // add a node
    function addNode(where) {
        var tree = theTree,
          item = tree.selectedItem;
        if (item) {
 
            // find the array where the new item should be added
            var path = 'items';
            var parent = tree.selectedNode.parentNode;
            var arr = parent ? parent.dataItem[path] : tree.itemsSource;
 
            // add the new item to the data tree
            var index = 0;
            switch (where) {
                case 'before':
                    index = arr.indexOf(item);
                    break;
                case 'after':
                    index = arr.indexOf(item) + 1;
                    break;
                case 'into':
                    arr = item[path];
                    if (!arr) {
                        arr = item[path] = [];
                    }
                    index = arr.length;
                    break;
            }
 
            // create the new item
            var newItem = {
                header: document.getElementById('theInput').value
            }
            arr.splice(index, 0, newItem);
 
            // re-load the tree
            tree.loadTree();
 
            // select the new item
            tree.selectedItem = newItem;
            tree.focus();
        }
    }
 
    // create some data
    function getData() {
        return [
            {
                header: 'Parent 1', items: [
                { header: 'Child 1.1' },
                { header: 'Child 1.2' },
                { header: 'Child 1.3' }]
            },
          {
              header: 'Parent 2', items: [
              { header: 'Child 2.1' },
              { header: 'Child 2.2' }]
          },
          {
              header: 'Parent 3', items: [
              { header: 'Child 3.1' }]
          }
        ];
    }
});

// This file locates: "Content/css/Lesson/C1Nav/Adding.css".
/* 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);
}
 
#theInput {
  font-weight: normal;
  display: inline-block;
  width: 12em;
}

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

<h1>
    @Html.Raw(Resources.C1Nav.Adding_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.Adding_Text1)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-5">
        @Html.C1().TreeView().Id("theTree")
    </div>
    <div class="col-xs-7">
        <p>
            @Html.Raw(Resources.C1Nav.Adding_Text2)
            <input class="form-control" id="theInput" value="My New Node">
        </p>
        <p>
            @Html.Raw(Resources.C1Nav.Adding_Text3)
            <button id="btnBefore" class="btn btn-default">@Html.Raw(Resources.C1Nav.Adding_Text4)</button>
            <button id="btnAfter" class="btn btn-default">@Html.Raw(Resources.C1Nav.Adding_Text5)</button>
            <button id="btnInto" class="btn btn-default">@Html.Raw(Resources.C1Nav.Adding_Text6)</button>
        </p>
    </div>
</div>