Data Binding

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

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

Javascript

import * as wjNav from '@grapecity/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

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

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' }
		    ]},
	    ]},
    ];
  }
}