User Interaction with Nodes

Editing Nodes

The TreeView control provides editing support. Set the isReadOnly property to false and users will be able to edit the content of the nodes by pressing the F2 key.

Edits made to node contents are automatically applied to the items in the itemsSource array using the properties specified by the displayMemberPath property.

You may customize the editing behavior using the following events: nodeEditStarting, nodeEditStarted, nodeEditEnding, and nodeEditEnded.

Example

Editing has been enabled only for nodes that contain no children. To edit, select a node and press F2.

HTML

 <div id="theTree"></div>

Javascript

onload = function() {

	// create the tree
  var tree = new wjNav.TreeView('#theTree', {
  	itemsSource: getData(),
	  displayMemberPath: 'header',
      childItemsPath: 'items',
      isReadOnly: false,
      nodeEditStarting: function (s, e) {
    	if (e.node.hasChildren) {
				e.cancel = true;
			}
		}
	});
	
  // get the tree data
  function getData() {
		return [
    	{ header: 'Electronics', items: [
		   { header: 'Trimmers/Shavers' },
           { header: 'Tablets' },
           { header: 'Phones', items: [
		            { header: 'Apple' },
                    { header: 'Motorola', newItem: true },
                    { header: 'Nokia' },
                    { header: 'Samsung' }]
		    },
            { header: 'Speakers', newItem: true },
            { header: 'Monitors' }]
	   },
       { header: 'Toys', items: [
      	   { header: 'Shopkins' },
             { header: 'Train Sets' },
             { header: 'Science Kit', newItem: true },
             { header: 'Play-Doh' },
             { header: 'Crayola' } ]
	   },
	   { header: 'Home', items: [
      	   { header: 'Coffeee Maker' },
             { header: 'Breadmaker', newItem: true },
             { header: 'Solar Panel', newItem: true },
             { header: 'Work Table' },
             { header: 'Propane Grill' }]
		}
	  ];
	}
}

Disabling Nodes

You can disable nodes using the TreeNode's isDisabled property.

Disabled nodes cannot be selected using the mouse or keyboard.

Example

Depicts how to disable the selected node on button click.

Javascript

document.getElementById('btDisable').addEventListener('click', function(e) {
		//Get the currently selected node
		var nd = tree.selectedNode;
		if (nd) {
		    //Disable the node
			nd.isDisabled = true;
		}
  });

Showing and Selecting Nodes

The TreeNode class has an ensureVisible method that ensures the node is visible by expanding parent nodes as needed and scrolling the node into view if necessary. It also has a select method that shows the node and selects it.

Example

Depicts methods to show and select "Work Table" node.

onload = function() {

  // find a node to show or to select and show
  var theItem = findItem(tree.itemsSource, 'Work Table');
  var theNode = tree.getNode(theItem);

  // show the node when the user clicks the button
  document.getElementById('btnShow').addEventListener('click', function()   {
  	theNode.ensureVisible();
  });

  //show and select the node when the user clicks the button
  document.getElementById('btnSelect').addEventListener('click', function()   {
  	theNode.select();
  });

  //Find the treeview item to be shown or selected
  function findItem(items, text) {
  	var node = null;
    for (var i = 0; i < items.length; i++) {
    	var item = items[i];
    	if (item.header == text) {
  			return item;
      }
      if (item.items) {
      	item = findItem(item.items, text);
        if (item) {
        	return item;
        }
      }
    }
   return null; //  not found
  }
}