<link rel="stylesheet" type="text/css" href="css/kee-tree.css">
<script type="text/javascript" src="kee-tree.js"></script>
							

							
//where the tree will placed
var cont = document.getElementById("sc-example-basic-usage");

//create a tree, to: is the element to place the tree in
var tree = new kzg.Tree({ to: cont });
//create a top level of node
//tree: the tree object 
//text: the text will show on the node
//iconCls: the class name of the node icon, you also can use property icon to specify a image url
var gNode = new kzg.TreeNode({ tree: tree, text: "demos", icon:'http://nonexists.png' ,iconCls: 'demoicon' });
tree.addNode(tree.root, gNode);

//create 2nd level children under the node demos	
for (var i = 0; i < 10; i++) {
	var node = new kzg.TreeNode({ tree: tree, text: i + '' });
	tree.addNode(gNode, node);
}
//you can access node's children by property children
gNode.children[0].setCaption('change node caption.');
							

							
//showline: another style of tree, default is false								
var tree = new kzg.Tree({ to: cont , showline:true});
							

        
//collapse the node
//the first argument: true/false:expand/collapse 
//the second argument: true/false do/or not the same thing to its children  
gNode.expand(false,false);			
        

							
//create 2nd level children under the node demos	
for (var i = 0; i < 3; i++) {
	var node = new kzg.TreeNode({ tree: tree, text: i + '' });
	tree.addNode(gNode, node);
	for (var k = 0; k < 5; k++) {
		//again. the key must be unique in the whole tree.
		var cn = new kzg.TreeNode({ tree: tree, text: i + '--' + k, key: i + '--' + k});
		tree.addNode(node, cn);
	}
}

//make the node with key '2--3' selected.
tree.nodes["2--3"].select();								
							

							
var ln = new kzg.TreeNode({ tree: tree, text: "expand me to load...", expandStyle: "always" });

//the kzg.oe function take 3 arguments.
//it will register callback to a specified object
//1: the object will broadcast the event
//2: the event type
//3: the callback

//a 'collapse' event will trigger when the node collapsed
kzg.oe(ln, 'collapse', function (e) {
	//the argument of the call back have a peoperty src
	//which is the first argument of the oe function
	//clear the children
	e.src.removeChildren();
	e.src.setCaption("expand me to load...");
});
var callback = function (e) {
	var node = e.src;
	node.setCaption("loading.....");
	var inv = window.setInterval(function () {
		tree.addNode(ln, new kzg.TreeNode({ tree: tree, text: "lazy-1" }));
		tree.addNode(ln, new kzg.TreeNode({ tree: tree, text: "lazy-2" }));
		node.setCaption("done");
		window.clearInterval(inv);
	}, 2000);
};
//a 'expand' event will trigger when the node expand
kzg.oe(ln, 'expand', callback);
//you can use kzg.ue(ln, 'expand', callback) to unregister the callback

tree.addNode(gNode, ln);							
							

							
//select event will trigger
kzg.oe(tree, 'select', function () {
	alert('tree.selectedNode:' + tree.selectedNode.caption);
});

//context menu event
tree.oncontextmenu = function (e, node) {
	alert('context menu on node ' + node.caption);

	return false;
};								
							

        
for (var i = 0; i < 5; i++) {
	//the type argument set to checkbox
	var node = new kzg.TreeNode({ tree: tree, text: "checkbox" + i, type: kzg.Tree.CHECKBOX });
	tree.addNode(gNode, node);
	for (var k = 0; k < 5; k++) {
		//the type argument set to checkbox
		var cn = new kzg.TreeNode({ tree: tree, text: "checkbox" + i + '-' + k, type: kzg.Tree.CHECKBOX });
		tree.addNode(node, cn);
	}
	//set it checked by code
	//argument 1: true/false - checked/unchecked
	//argument 2: true/false - its children checked/unchecked(default is false)
	//argument 3: true/false - fire or not the click event(default is false)
	//note: this method can't be called before this node is added to the tree
	node.setChecked(true,true,false);
	//set the label style
	jQuery(node.label).css('margin-left', '5px');
	//the click event will trigger when checkbox button clicked
	kzg.oe(node, 'click', function (e, data) {
		var node = e.src;
		//the checked property of the node show the status of the checkbox
		alert('node ' + node.caption + ' is ' + (!node.checked ? 'unchecked' : 'checked'));
		node.children.forEach(function(nc) {
			nc.setChecked(node.checked,true,false);
		}, this);
	});
	//also you can access the checkbox dom element directly by checkbox peroperty
	jQuery(node.checkBox).on('click', function (e) {
		alert('checked -- ' + e.target.checked);
	});
}	
        

        
for (var i = 0; i < 5; i++) {
	//the type argument set to checkbox
	var node = new kzg.TreeNode({ tree: tree, text: "radiobox" + i, type: kzg.Tree.RADIOBOX });
	tree.addNode(gNode, node);
	//set the label style
	jQuery(node.label).css('margin-left', '5px');
}
//the radio node under the same node parent will have the same name, so they are a group.
var childNode2 = gNode.children[1];
//setRadioCheck of the node will make it checked
//note: this method can't be called before this node is added to the tree
childNode2.setRadioCheck();
//after add to the tree, you can access the radiobox directly via node.rdoBox
jQuery(childNode2.rdoBox).on('change',function(e){
	alert('checked -- ' + e.target.checked);
});
//the rdocheckchanged event will trigger when radio check value changed in a radio group
//the radio nodes under the same node will have the same name
kzg.oe(gNode, 'rdocheckchanged', function (e, data) {
	alert('radio select changed from ' + data.preNode.caption + ' to ' + data.curNode.caption);
});