Refreshing Nodes

To refresh nodes after making changes to the items in the itemsSource array, you may call the TreeView's loadTree method. This will update the tree and will ensure the currently selected node is visible.

If you want to refresh the content of a single node, however, it may be more efficient to change the node element directly without reloading the whole tree.

The buttons below show both approaches:

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/Changing.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('btnTree').addEventListener('click', function () {
        var item = changeItem();
        theTree.loadTree();
        theTree.getNode(item).element.textContent = item.header;
    });
    document.getElementById('btnNode').addEventListener('click', function () {
        var item = changeItem();
        theTree.getNode(item).element.textContent = item.header;
    });
 
    // change an item on the list and return the changed item
    function changeItem() {
        var index = Date.now() % theTree.itemsSource.length,
                item = theTree.itemsSource[index];
        item.header = wijmo.format('Changed at {now:hh:mm:ss}', {
            now: new Date()
        });
        return item;
    }
 
    // 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/Changing.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: Changing
        public ActionResult Changing()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.Changing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.Changing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Changing_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Changing_Text3)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        @Html.C1().TreeView().Id("theTree")
    </div>
    <div class="col-xs-6">
        <button id="btnTree" class="btn btn-default">
            @Html.Raw(Resources.C1Nav.Changing_Text4)
        </button>
        <button id="btnNode" class="btn btn-default">
            @Html.Raw(Resources.C1Nav.Changing_Text5)
        </button>
    </div>
</div>