ASP.NET TreeView - Client-Side properties and methods

To send data to server without reloading the page you can use the free AJAX Page ASP.NET control.

Variables. When node is selected.

Name Description
tree_selected_id ID of a selected node. See Example

Usage: alert(tree_selected_id);
 
tree_selected_path List of parent node IDs starting from first level down to selected node, separated by commas, like "id14,id745,id983,id4582".

Usage: alert(tree_selected_path);
 
tree_parent_id ID of parent of selected node.

Usage: alert(tree_parent_id);
 
ob_tree_id ID of <DIV> element containing the whole treeview inside.
Note: You can set it on server side by oTree.id = "myTree"

Usage: alert(ob_tree_id);
 
ob_sn2 Contains selected node IDs when MultiSelectEnable set to true. More ...

Usage: alert(ob_sn2);
 

Drag-and-Drop

Name Description
tree_dd_id When used Drag-and-Drop, it has pairs of IDs separated by symbol "|".
Each pair has ID of new parent (drop target) and ID of moved node.
Example "id8,id12|id23,id58|id2,id5|"

Usage: alert(tree_dd_id);

You can send this variable to server for processing.
TIP: You can use New AJAXPage to do it without reloading page. See AJAXPage.
 

Other useful functions

Name Description
ob_prev_selected Object. Selected Node. Variable tree_selected_id (see above) is ID of this object.
Object is <TD> element - table cell. Node content goes inside of this cell.

ob_prev_selected.style.border = "2px solid red";
 
ob_hasChildren(node_object) Returns true if node has children. See Example

alert(ob_hasChildren(ob_prev_selected));
alert(ob_hasChildren(document.getElementById("a123"));

 
ob_isExpanded(node_object) Returns true if node is expanded. See Example

alert(ob_isExpanded(document.getElementById("a123")));
 
ob_nodeIsChildOf(node, parent) Returns true if node is child of parent. See Example

alert(ob_nodeIsChildOf(document.getElementById("a123"), document.getElementById("a12")));
 
ob_nodeIsSubNodeOf(node, parent) Returns true if node is a subnode of parent (e.g a nephew is a subnode of the grandparent). See Example

alert(ob_nodeIsSubNodeOf(document.getElementById("a123"), document.getElementById("a1")));
 
ob_hasSiblings(node) Returns true if node has siblings. See Example

alert(ob_hasSiblings(document.getElementById("a123")));
 
ob_getParentOfNode (node_object) Returns object - parent of node_object. See Example

var myParent = ob_getParentOfNode (document.getElementById("a123"));
 
ob_getChildCount (node_object) Returns the number of children that node_object has. See Example

alert(ob_getChildCount(document.getElementById("a123"));
 
ob_getChildAt (node_object, index, expand) Returns the children of node_object at the specified index. If expand is specified and is true, it will also expand node_object (if needed). See Example

var myThirdChild = ob_getChildAt(document.getElementById("a123"), 3, true);
 
ob_getIndexOfChild (node_object) Returns what is the index of node_object in its parent's node list. (the reverse function of ob_getChildAt). See Example

alert(ob_getIndexOfChild(document.getElementById("a123")));
 
ob_getLastChildOfNode (node_object, expand) Returns object - node which is last child of node_object. If expand is specified and is true, it will expand node_object (if needed). See Example

var myNode = ob_getLastChildOfNode(document.getElementById("a123"));
 
ob_getFirstChildOfNode (node_object, true) Returns object - node which is first child of node_object. If expand is specified and is true, it will expand node_object (if needed). See Example

var myNode = ob_getFirstChildOfNode(document.getElementById("a123"));
 
ob_getNextSiblingOfNode (node_object) Returns object - node which is next sibling of node_object. See Example

var myNode = ob_getNextSiblingOfNode(document.getElementById("a123"));
 
ob_getPrevSiblingOfNode (node_object) Returns object - node which is previous sibling of node_object. See Example

var myNode = ob_getPrevSiblingOfNode(document.getElementById("a123"));
 
ob_getFurthestChildOfNode (node_object, expand) Returns object - node which is the farthest subnode of node_object. If expand is specified and is true, it will expand all the necessary nodes in order to get to the furthest child of node. See Example

var myNode = ob_getFurthestChildOfNode(document.getElementById("a123"));
 
ob_getFirstNodeOfTree () Returns object - node that is the first in the treeview. See Example

var firstTreeNode = ob_getFirstNodeOfTree();
 
ob_getNodeUp (node_object, expand) Returns object - node that is above node_object in the treeview (regardless of it's depth level). If expanded is specified, it will ensure that the node above node_object will be returned even if it's not currently visible. See Example

Note: if expand is false, the function will only make use of the currently visible nodes.

var nodeAbove = ob_getNodeUp(document.getElementById('a123'), true);
 
ob_getNodeDown (node_object, expand) Returns object - node that is below node_object in the treeview (regardless of it's depth level). If expanded is specified, it will ensure that the node below node_object will be returned even if it's not currently visible. See Example

Note: if expand is false, the function will only make use of the currently visible nodes.

var nodeAbove = ob_getNodeDown(document.getElementById('a123'), true);
 
ob_getExpanded (node_object, onlyChildren) Returns a comma delimited list of all the ids of the expanded nodes. If node_object is specified and not null, it will only search the subnode list of node_object, otherwise it will start with the first node in the tree. If onlyChildren is specified and is true, it will only search in node_object's children list and not below it, otherwise it will go all levels deep as available.
See Example

var allExpandedNodesList = ob_getExpanded(null, true);
 
ob_getCollapsed (node_object, onlyChildren) Returns a comma delimited list of all the ids of the collapsed nodes. If node_object is specified and not null, it will only search the subnode list of node_object, otherwise it will start with the first node in the tree. If onlyChildren is specified and is true, it will only search in node_object's children list and not below it, otherwise it will go all levels deep as available.
See Example

var allCollapsedNodesList = ob_getCollapsed(null, true);
 
ob_t2_Add (parentId, childId, textOrHTML, expanded, image, subTreeURL) Adds a node at client side. It behaves exactly like its corresponding server side function. See Example

ob_t2_Add('a1', 'a12', 'someText', null, 'folder.gif', null);
 
ob_t2_Remove (childId) Removes the node with childId from the treeview at client side. See Example

ob_t2_Remove('a12');
 
ob_t2_Move (parentId, nodeId) Moves the node with nodeId under the node with parentId. See Example

ob_t2_Move('a1', 'b2');
 
ob_t2_UpDown (direction) Moves the selected node up/down within its parent. direction must be 'up' or 'down'

ob_t2_UpDown(direction);
 
ob_elementBelongsToTree (node_object) Returns true if HTML element belongs to tree. See Example

alert(ob_elementBelongsToTree(document.getElementById("a123")));
 
ob_t26(list_with_ids) Selects nodes on client-side, including dynamically loaded nodes.

ob_t26("a0,b0,c0,z0,z1,z2,z3,z44");
 
ob_unselectAllNodes() Deselects all the selected nodes
 
ob_change_icons(node_object, image_source) Change the icon of a node
 
ob_t2_getNodeLevel(node_id) Returns the level of the node
 
obout.com
obout.com Home
News
TreeView Home
TreeView Home
Download
Site Map
Examples 
Styles
Classic
Classic
Dynamic Loading
No Icons
Black
Black No Icons
Background image
Premiere New
black
blue
green
red
violet
yellow
Explorer
Gray
Help
HelpPlus
MSDN
TMenu
TMenu (small icons)
Vista New
Web
White
XPBlue
Win2003
Right To Left
Features
Drag and drop - 18
Drag-n-Drop
Custom
Multi-node
Dragging with children
Drop in textboxes
External D'n'D
Move nodes 1
Renumber nodes
Auto Scrolling
Copy / Move nodes
D'n'd and Dynamic Loading
Drop in listboxes
Drop in listboxes 2
Restrict Levels
D'n'D with various options
Disable dropping in two trees
Not-allowed Icon New
Sort after D'n'D New
Dynamic loading - 6
Web style
MSDN style
Deep tree
Reload subtrees
Loading trees partially
Virtual Scrolling New
Add/remove nodes - 4
Add/remove on client-side
Alphabetical order
Add to dynamic subtrees
Remove all children
Edit nodes - 4
Edit nodes
Nodes with Checkboxes
Sort after Edit New
Select nodes - 3
Find selected node
Select multiple nodes
Highlight parent
Layout - 2
Width, height and scrollbars
Root node
TreeView state - 3
Dynamic
Keep expanded
Keep collapsed
File system - 3
Show file system
File system loading
File system manager
Additional data for each node - 3
Details
On client side
Image viewer
Expand/collapse nodes - 2
By level
Single folder
Multiple trees - 4
Two Trees
Two Trees custom
Two Trees enhancement
Move Nodes BTWN Trees New
Different Styles New
Validation - 2
D-n-d on server
Edit on server
Integration - 14
With a context menu
Attach Easy Menu
Attach menu on-demand
Attach to dynamic nodes
Attach menu to icons
Change icons
With Flyout
With Splitter
MS AJAX
With checkboxes
Dynamic checkboxes
With a Combobox
With modal dialog
Outlook Slide Menu
With Tab Strip
Build from SiteMap
Customization - 7
Icons for treeview
Aligned columns
CSS Tutorial
Hover node effect
Multi-Level Slide Menu
Select on Collapse
From Dennis
From/To XML file
Keyboard navigation
Search nodes
Client-side events
Knowledge Base - 1
Knowledge Base
Documentation
Method Add
Server-Side
Client-Side
Client-Side Events
XML
Methods
XML Tutorial
Client-Side Tutorial
Tutorial 1
Tutorial 2
Tutorial 3
Tutorial 4
Events
Tutorial
Event handlers
Tutorials
Using the correct path
Improving performance
In a user control
AutoPostBack with various options
Open in Search pane
Move nodes by clicking a button
Postback on node select
Switch icons