Removing Nodes

To remove nodes from a TreeView control, remove the data item from the tree's itemsSource array, 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

// This file locates: "Scripts/Lesson/C1Nav/Removing.js".
c1.documentReady(function () {
    var theTree = wijmo.Control.getControl('#theTree');
    theTree.itemsSource = getData();
    theTree.displayMemberPath = 'header';
    theTree.childItemsPath = 'items';
 
    // update button state
    theTree.selectedItemChanged.addHandler(function (s, e) {
        var btn = document.getElementById('btnRemove');
        wijmo.setAttribute(btn, 'disabled', theTree.selectedItem ? null : 'disabled');
    });
    theTree.selectedItem = theTree.itemsSource[0];
 
    // handle buttons
    document.getElementById('btnRemove').addEventListener('click', function () {
        if (theTree.selectedItem) {
 
            // find the array where the new item should be added
            var parent = theTree.selectedNode.parentNode;
            var arr = parent
              ? parent.dataItem[theTree.childItemsPath]
              : theTree.itemsSource;
 
            // remove the item from the parent collection
            var index = arr.indexOf(theTree.selectedItem);
            arr.splice(index, 1);
 
            // refresh the tree
            theTree.loadTree();
        }
    });
 
    // 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/Removing.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);
}

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

<h1>
    @Html.Raw(Resources.C1Nav.Removing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.Removing_Text1)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-4">
        @Html.C1().TreeView().Id("theTree")
    </div>
    <div class="col-xs-8">
        <button id="btnRemove" class="btn btn-default">
            @Html.Raw(Resources.C1Nav.Removing_Text2)
        </button>
    </div>
</div>