# 노드와의 사용자 상호작용 

## Content

## 노드 편집 

TreeView 컨트롤은 편집 기능을 제공합니다. **isReadOnly** 속성을 false 로 설정하면 사용자가 F2 키를 눌러 노드의 콘텐츠를 편집할 수 있습니다.
노드 내용에 대한 편집은 자동으로 **displayMemberPath**속성에 지정된 속성을 사용하여 **itemsSource** 배열의 항목에 적용됩니다.
편집 동작은 다음 이벤트들을 사용하여 사용자 정의할 수 있습니다: **nodeEditStarting**, **nodeEditStarted**, **nodeEditEnding**, **nodeEditEnded**.

### 예제

편집은 자식이 없는 노드에 대해서만 활성화되었습니다. 편집하려면 노드를 선택하고 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' }]
		}
	  ];
	}
}
```

## 노드 비활성

TreeNode의 **isDisabled** 속성을 사용하여 노드를 비활성화할 수 있습니다.

비활성화된 노드는 마우스나 키보드를 사용하여 선택할 수 없습니다.

### 예제

버튼 클릭 시 선택된 노드를 비활성화하는 방법을 보여줍니다.

##### 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;
		}
  });
```

## 노드 표시 및 선택

**TreeNode** 클래스에는 **ensureVisible** 메서드가 있어 부모 노드를 필요에 따라 확장하고, 필요한 경우 노드를 화면에 표시하여 해당 노드가 보이도록 합니다. 또한 **select** 메서드를 사용하면 노드를 표시하고 선택할 수 있습니다.

### 예제

"Work Table" 노드를 표시하고 선택하는 방법을 보여줍니다.

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