# Data Binding

Learn how to databind Wijmo's TreeView in this tutorial

## Content


To bind the TreeView control to data, the following three properties needs to be set:

1. __itemsSource__: Defines the array that contains the hierarchical data. Each item in the array contains information about a node and (optionally) an array of child nodes.
2. __displayMemberPath__: Defines the name of the property in the items that contains the text to be displayed in the tree nodes. By default, this property is set to the string 'header'.
3. __childItemsPath__: Defines the name of the property in the items that contains the array of child nodes. By default, this property is set to the string 'items'.

By default, the TreeView expands the first node at each level and collapses all others when it is bound to some data. This behavior can be customized by handling the __loadedItems__ event which occurs after the tree items have been generated.

You can select an item when the tree loads by setting the __selectedItem__ property. The TreeView control automatically ensures that the selected node is visible, by expanding or scrolling the tree as needed.

Alternatively, you can collapse or expand all the nodes to a given level by using the __collapseToLevel__ method.

##### HTML
```html
 <div id="theTree"></div>
```
##### Javascript
```javascript
import * as wjNav from '@mescius/wijmo.nav';

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

// get the tree data
function getData() {
	return [
		{ header: 'Electronics', img: 'resources/electronics.png', items: [
			{ header: 'Trimmers/Shavers' },
			{ header: 'Tablets' },
			{ header: 'Phones', img: 'resources/phones.png', items: [
				{ header: 'Apple' },
				{ header: 'Motorola', newItem: true },
				{ header: 'Nokia' },
				{ header: 'Samsung' }]
			},
			{ header: 'Speakers', newItem: true },
			{ header: 'Monitors' }]
		},
		{ header: 'Toys', img: 'resources/toys.png', items: [
			{ header: 'Shopkins' },
			{ header: 'Train Sets' },
			{ header: 'Science Kit', newItem: true },
			{ header: 'Play-Doh' },
			{ header: 'Crayola' } ]
		},
		{ header: 'Home', img: 'resources/home.png', items: [
			{ header: 'Coffeee Maker' },
			{ header: 'Breadmaker', newItem: true },
			{ header: 'Solar Panel', newItem: true },
			{ header: 'Work Table' },
			{ header: 'Propane Grill' }]
		}
	];
}
```
## Hetrogeneous Data

In most of the TreeView applications, the __displayMemberPath__ and __childItemsPath__ properties are set to strings that define the name of the property that should be displayed on the nodes and the name of the property that contains child items. 

In some applications, however, the names of these binding properties depend on the hierarchical level of the data. In such cases, you can use an array of names for these properties.

The example below uses an array for the __displayMemberPath__ and __childItemsPath__ properties, instead of strings.

##### HTML
```html
<div id="theTree"></div>
```
##### Javascript
```javascript
onload = function() {

	// create the tree
  var tree = new wijmo.nav.TreeView('#theTree', {
  	itemsSource: getData(),
      displayMemberPath: 'continent,country,city'.split(','),
      childItemsPath: 'countries,cities'.split(',')
	});
  
  // get the data
  function getData() {
    return [
	    { continent: 'Africa', countries: [
		    { country: 'Algeria', cities: [
			    { city: 'Algiers' },
			    { city: 'Oran' },
			    { city: 'Constantine' }
		    ]},
		    { country: 'Angola', cities: [
			    { city: 'Luanda' },
			    { city: 'Ambriz' },
			    { city: 'Bailundo' }
		    ]},
		    { country: 'Benin', cities: [
			    { city: 'Porto Novo' },
			    { city: 'Cotonou' },
			    { city: 'Parakou' }
		    ]},
		    { country: 'Botswana', cities: [
			    { city: 'Gaborone' },
			    { city: 'Francistown' },
			    { city: 'Molepolole' }
		    ]},
	    ]},
	    { continent: 'Asia', countries: [
		    { country: 'Afghanistan', cities: [
			    { city: 'Kabul' },
			    { city: 'Kandahar' },
			    { city: 'Herat' }
		    ]},
		    { country: 'Armenia', cities: [
			    { city: 'Yerevan' },
			    { city: 'Gyumri' },
			    { city: 'Vanadzor' }
		    ]},
		    { country: 'Azerbaijan', cities: [
			    { city: 'Baku' },
			    { city: 'Agjabadi' },
			    { city: 'Astara' }
		    ]},
		    { country: 'Bahrain', cities: [
			    { city: 'Manama' },
			    { city: 'Riffa' },
			    { city: 'Sitra' }
		    ]},
	    ]},
	    { continent: 'Europe', countries: [
		    { country: 'Albania', cities: [
			    { city: 'Tirana' },
			    { city: 'Elbasan' },
			    { city: 'Fier' }
		    ]},
		    { country: 'Andorra', cities: [
			    { city: 'Andorra la Vieja' },
			    { city: 'Canillo' },
			    { city: 'Encamp' }
		    ]},
		    { country: 'Austria', cities: [
			    { city: 'Vienna' },
			    { city: 'Salzburg' },
			    { city: 'Graz' }
		    ]},
		    { country: 'Belarus', cities: [
			    { city: 'Minsk' },
			    { city: 'Barysaw' },
			    { city: 'Slutsk' }
		    ]},
	    ]},
	    { continent: 'America', countries: [
		    { country: 'Canada', cities: [
			    { city: 'Ottawa' },
			    { city: 'Toronto' },
			    { city: 'Vancouver' }
		    ]},
    		{ country: 'United States', cities: [
    			{ city: 'Washington' },
    			{ city: 'New York' },
    			{ city: 'Pittsburgh' }
    		]},
    		{ country: 'Mexico', cities: [
    			{ city: 'Mexico City' },
    			{ city: 'Acapulco' },
    			{ city: 'San Jose' }
    		]},
    		{ country: 'Belize', cities: [
    			{ city: 'Belmopan' },
    			{ city: 'Dangriga' },
    			{ city: 'Belize City' }
    		]},
	    ]},
	    { continent: 'Ocenania', countries: [
		    { country: 'Australia', cities: [
			    { city: 'Canberra' },
			    { city: 'Sydney' },
			    { city: 'Melbourne' }
		    ]},
		    { country: 'New Zealand', cities: [
			    { city: 'Wellington' },
			    { city: 'Christchurch' },
			    { city: 'Auckland' }
		    ]},
		    { country: 'Fiji', cities: [
			    { city: 'Suva' },
			    { city: 'Labasa' },
			    { city: 'Nasinu' }
		    ]},
		    { country: 'Vanuatu', cities: [
			    { city: 'Port Vila' },
			    { city: 'Forari' },
			    { city: 'Etate' }
		    ]},
	    ]},
    ];
  }
}
```