Manipulating Nodes

Adding Nodes

To add nodes to a tree, call the parent node's addChildNode method. To add nodes at the root level, call the TreeView's addChildNode method.

This is more efficient than adding data items to the tree's itemsSource array and refreshing the tree by calling the loadTree method.

Example: Adds a child node either to an existing node if it is selected or to the root level of tree in case no node is currently selected.

Javascript

import * as wjNav from '@grapecity/wijmo.nav';

// create the tree
var theTree = new wjNav.TreeView('#theTree', {
    itemsSource: getData(),
    displayMemberPath: 'header',
    childItemsPath: 'items'
});

  // handle button click to add a child node
document.getElementById('btnAdd').addEventListener('click', function () {
      var newItem = { header: document.getElementById('theInput').value },
            node = theTree.selectedNode;
        if (node) {
            theTree.selectedNode = node.addChildNode(0, newItem);
        } else {
                theTree.selectedNode = theTree.addChildNode(0, newItem);
        }
    });
}

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:

Example: Removes the currently selected node.

Javascript

document.getElementById('btnRemove').addEventListener('click', function(){
    if (theTree.selectedItem) {

      // find the array that contains the item to be removed
      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();
      }
});

Refreshing Nodes

To refresh a node after its data has changed, call the node's refresh method.

This is more efficient than updating the data and refreshing the tree by calling the loadTree method.

Example: Depicts two approaches, calling the refresh method by passing the new data and updating the node with new data and then invoking the refresh method.

Javascript

// refresh the node with new data
document.getElementById('btnItemData').addEventListener('click', function () {
      theTree.selectedNode.refresh({
        header: 'given itemData ' + Date.now(), items: [
          { header: 'first child' },
        { header: 'second child' },
            ]
        });
    });

  // update the data, refresh the node
  document.getElementById('btnItemsSource').addEventListener('click', function () {
      var node = theTree.selectedNode,
            arr = node.itemsSource;
        arr[node.index] = {
            header: 'updated itemData ' + Date.now(), items: [
                { header: 'first child' },
                { header: 'second child' },
            ]
        };
        node.refresh();
    });