Item Manipulation

CodeThatTree has powerful API to manipulate items at run-time. The API allows you to expand and collapse items of created tree control from JavaScript code. CodeThatTree also allows you to call your code when an item is expanded or collapsed.

Method expandAll()

The function expands all items of the tree.

You can use this function by using constructin like this:

<form>
<input type="button" onClick="t1.expandAll(); return true;" value="Expand All"/>
</form>

<script language="javascript1.2">
<!--

var TreeDef = {
	...
};
var t1 = new CTree(TreeDef, "sample");
t1.create(10, 50);
t1.draw(); 

//-->
</script>

See an example here - Example [popup]

Method collapseAll()

The function collapses all items of the tree.

You can use this function by using constructin like this:

<form>
<input type="button" onClick="t1.collapseAll(); return true;" value="Collapse All"/>
</form>

<script language="javascript1.2">
<!--

var TreeDef = {
	...
};
var t1 = new CTree(TreeDef, "sample");
t1.create(100, 100); 

//-->
</script>

See an example here - Example [popup]

Methods expandItemByText() and expandItemById()

Methods expand the specified item. They also expand all superitems to ensure the expanded item is visible. The may be found by text attribute (function expandItemByText) or by id attribute (function expandItemById).

You can use these functions by using constructin like this:

<form>
<input type="button" onClick="t1.expandItemById('Id1'); return true;"
	value="Expand item by id 'Id1'"/>
<input type="button" onClick="t1.expandItemByText('Item2'); return true;"
	value="Expand item by text 'Item2'"/>
</form>

<script language="javascript1.2">
<!--

var TreeDef = {
	"style" :
	{
		...
	},
	// Main items array. In this case has one item Item1
	"items" :
	[
	{
		"text" : "Item1",
		"id" : "Id1",
		// Subtree definition
		"menu" :
		{
			...
		}
	},
	{
		"text" : "Item2",
		// Subtree definition
		"menu" :
		{
			...
		}
	} ]
};

var t1 = new CTree(TreeDef, "sample");
t1.create(100, 100); 

//-->
</script>

See an example here - Example [popup]

Methods collapseItemByText() and collapseItemById()

Methods expand the specified item. The may be found by text attribute (function expandItemByText) or by id attribute (function expandItemById).

You can use these functions by using constructin like this:

<form>
<input type="button" onClick="t1.collapseItemById('Id1'); return true;"
	value="Expand item by id 'Id1'"/>
<input type="button" onClick="t1.collapseItemByText('Item2'); return true;"
	value="Expand item by text 'Item2'"/>
</form>

<script language="javascript1.2">
<!--

var TreeDef = {
	"style" :
	{
		...
	},
	// Main items array. In this case has one item Item1
	"items" : [
	{
		"text" : "Item1",
		"id" : "Id1",
		// Subtree definition
		"menu" :
		{
			...
		}
	},
	{
		"text" : "Item2",
		// Subtree definition
		"menu" :
		{
			...
		}
	} ]
};

var t1 = new CTree(TreeDef, "sample");
t1.create(100, 100); 

//-->
</script>

See an example here - Example [popup]

Property onopen, onclose

You can set action for open and close tree events. Use onopen and onclose parameters of an item for this.

You can use these functions by using constructin like this:

<script language="javascript1.2">
<!--

var TreeDef = {
	"style" :
	{
		...
	},
	// Main items array. In this case has one item Item1
	"items" :
	[
	{
		"text" : "Item1",
		"id" : "Id1",
		"onopen" : "window.alert('Item 1 is opened!')",
		"onclose" : "window.alert('Item 1 is closed!')",
		// Subtree definition
		"menu" :
		{
			...
		}
	},
	{
		"text" : "Item2",
		"onopen" : "window.alert('Item 2 is opened!')",
		"onclose" : "window.alert('Item 2 is closed!')",
		// Subtree definition
		"menu" :
		{
			...
		}
	} ]
};

var t1 = new CTree(TreeDef, "sample");
t1.create(100, 100); 

//-->
</script>

See an example here - Example [popup]

Runtime properties curr and over

With new version new useful properties appears are in CodeThatTree.
Property curr is Object CNodeTree type, that refers to current node of tree.
This property is null until user click on tree, so you know user choice at each moment of time.
You can define separate style for current node and highlight it in normal, opened and hovered state.
Property over is Object CNodeTree type, that refers to hovered node of tree. This property is null until user move mouse over the tree on tree.
Both these properties allows you call any methods of CNodeTree and read and write any properties of them, so you can change any feature in run-time.

Properties savestate and loadtype

These two properties allows you control the workflow of tree.
If you don't use cookies and save tree state you can use optional property savestate as:

"TreeDef" = {
     "savestate" : false,
     ...
}	

By default savestate is true and tree state stored in cookies. In new version count of used cookies less and equal count of folders in tree.

If you have big tree and want increase its loading you can load tree in run-time, level by level, depend on user choise. This means that after page loading only first level nodes will be created, all others levels will be loaded and created when user click on correspond folder.
Property loadtype should be set as:

"TreeDef" = {
     	"loadtype" : 0,
     ...
}	

By default loadtype is 1, this means that all nodes of tree will be created during construction of CTree object.

Methods getState(id), addNode(id, isChild, def), deleteNode(id)

Very useful methods for item manipulation are in new version of CodeThatTree.

getState(id)

Check is node visible now in tree
id (String) is item.id property

addNode(id, isChild, def)

Adds new node in tree
id (String) points the node, if it is null, tree.curr node uses instead of it, isChild (Boolean) indicates whether new node will "child" or "neighbour" to pointed node, def (Object) is definition for item, where text, style, action and other properties set.

deleteNode(id)

Deletes node from tree
id (String) points the node, if it is null, tree.curr node uses instead of it.

<form>
<input type="button" onClick="alert(t1.getState('Id1')); return true;"
	value="Check is node Id1 is visible"/>
<input type="button" onClick="t1.addNode(null, 1, {text:'My child', style:{color:'red'}}); return true;"
	value="Add child node to current one"/>
	<input type="button" onClick="t1.deleteNode(null); return true;"
	value="Delete current node"/>
</form>

function treeInfo(text){
	document.forms['data'].info.value = 'Current node is ' + CT_Tree.curr.text
	+ '\nNode index is ' + CT_Tree.curr.id
	+ '\nNode id is ' +  CT_Tree.curr._id
	+  '\nThis is ' + ((CT_Tree.curr.type)?  ((CT_Tree.curr.state)?' opened ': 'closed ') + 'folder':'node') 
	+  "\nNode count: " + CT_Tree.nodes.length;	
};

{
	//remember for ie you need delay to put right values into global variable
	//it depends on order of call handlers
	"action" : {"js": "window.setTimeout('treeInfo()', 50)"}
}

© CodeThat.com, 2003-2009
Design by XTLabs, Inc
Sponsored by Rocket Division Software, LTD.