# User Interaction with Nodes

Learn about user interaction with nodes of Wijmo's TreeView in this documentation topic

## Content


## 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
```html
 <div id="theTree"></div>
```
##### Javascript

```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

```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.

```javascript
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
  }
}
```