Fancytree

Fancy tree binding handler is a wrapper for excellent JavaScript tree library. This binding handler ensures that tree is in-sync with underlying data. It requires tree to have children property containg sub nodes. Example tree structure is included in this example.

See also drag'n'drop example or even more advanced widget of Tree Grid.

Relevant code used in examples:

<div data-bind="fancytree: binder.model.Tree">
</div>
<div data-bind="
	fancytree: {­
		data: binder.model.Tree, 
		autoExpand: true, 
		options: {­
			checkbox: true
		­}­}">
</div>
<div data-bind="
	fancytree: {­
		data: binder.model.Tree2, 
		options: {­
			checkbox: true
		­}­}">
</div>
<script>
	window.onload = (function () {­
		var nodeId = 0;
		window.addNode = function (data, e) {­
			nodeId++;
			var model = new Maslosoft.Koe.TreeItem;
			model.title = 'New node #' + nodeId;
			binder.model.Tree.children.push(model);
			e.stopPropagation();
			e.preventDefault();
		­};
		window.addSubNode = function (data, e) {­
			nodeId++;
			var model = new Maslosoft.Koe.TreeItem;
			model.title = 'New sub-node #' + nodeId;
			binder.model.Tree.children[0].children.push(model);
			e.stopPropagation();
			e.preventDefault();
		­};


		var data = {­
			title: "Some container",
			_class: 'Maslosoft.Koe.TreeItem',
			children: [{­
					title: "One",
					_class: 'Maslosoft.Koe.TreeItem',
					children: [
						{­
							title: "Two",
							_class: 'Maslosoft.Koe.TreeItem',
					children: []

				­},
				{­
					title: "Three",
					_class: 'Maslosoft.Koe.TreeItem',
					children: [
						{­
							title: "Three-Two",
							_class: 'Maslosoft.Koe.TreeItem',
							children: []

						­},
						{­
							title: "Three-Three",
							_class: 'Maslosoft.Koe.TreeItem',
							children: []

						­}
					]

				­},
				{­
					title: "Four",
					_class: 'Maslosoft.Koe.TreeItem',
					children: []
				­}
			]
			­}]
		­};
		binder.model.Tree = new Maslosoft.Koe.TreeItem(data);
		binder.model.Tree2 = new Maslosoft.Koe.TreeItem(data);
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>