Click here to Skip to main content
Click here to Skip to main content

Advanced TreeView v1.6

, 3 May 2010
Rate this:
Please Sign up or sign in to vote.
Simple but advance-featured TreeView control

Introduction

This article explains the use of TreeView control developed in JavaScript. As all of you may be familiar with the existing ASP.NET TreeView provided with .NET Framework, this control actually tries to mimic the same in coding style. So, developers who have worked on ASP.NET TreeView control would find it much easier to implement.

Actually, there are many such controls available free to use but I always find it comfortable and handy to use controls developed by myself.

screenshotv15.png

Features
  • Simple and easy syntax
  • Easy Configuration
  • No dependencies on other libraries
  • Interactive properties and action events
  • Lines hide / show option
  • Different line styles to choose from
  • Navigate using Arrow Keys (works great!!!)1.2
  • Internally maintains tabular structure1.5
  • Built-in AJAX request supported 1.6
  • Themes support
  • Useful properties
  • Cross browser support
  • Node in update indication supported (Best for AJAX implementation)
  • Supports HTML (Flat UL, LI) & JSON datasource1.5
  • Editable Node text1.5
  • Supports conversion to JSON1.5
  • Supports conversion to XML1.6

Using the Control

Using this control is as easy as using in .NET tree view control. This control consists of two objects, TreeView and TreeNode.
The following sample code illustrates the simple usage:

var TreeView1 = new TreeView();
TreeView1.SetContainer('divTreeView');
TreeView1.PathSeparator = '\\'; 
         
var nodeFevorites = TreeView1.Nodes.Add1('IE Fevorites', 'IE Fevorites');
         
var nodeCodeProject = new TreeNode('Code Project');
nodeCodeProject.SetNavigationURL('http://www.codeproject.com/Members/Navnath-R-Kale');
nodeCodeProject.SetImageURL('images/codeproject.JPG');
         
nodeFevorites.ChildNodes.Add(nodeCodeProject);
nodeFevorites.ChildNodes.Add(new TreeNode
	('Google','Google','http://www.google.co.in','_target'));
         
TreeView1.BeforeExpand = function(sender, e){
    if(e.ChildNodes.length == 1 && e.ChildNodes[0].Value == '#'){
        e.BeginUpdate();
        e.ChildNodes.Clear(); 
        //Node processing.... 
    };
            
    return true;
};
         
TreeView1.SelectedNodeChanging = function(sender, e){
    //Some checking on node sent 'e' as parameter.
    //Return true to process node selection else false to stop selection node
    return true;
};

TreeView Members

Constructor

Name Description
TreeView Initializes a new instance of the TreeView object

Methods

Name Description
CSSNameChanged 1.5 Gets or sets the CSS class name used for tree view control (Default is treeview). Use this as theme functionality
SelectedValuePath Returns value path of currently selected node
ExpandAll Expands all the tree nodes
CollapseAll Collapses all the tree nodes
FindNode Returns the node from provided value path
ShowLines Gets or sets a value indicating whether lines are drawn between tree nodes in the treeview control
LineStyle Gets or sets the line style of the treeview control
Visible Gets or sets a value indicating whether the control and all its child controls are displayed
SetContainerNew 1.2 Sets the object that contains the treeview control
ContainerChanged 1.2 Gets object that contains the treeview control
ToJSONNew 1.5 Gets the JSON object of entire treeview
ToXMLNew 1.6 Gets the XML formatted string of entire treeview
BeginRequestNew 1.6 Begins the asynchronous request from the TreeView control

Properties

Name Description
PathSeparator Gets or sets the delimiter string that the tree node path uses (Default is \)
ToggleOnSelect Gets or sets the value which enables node toggle on select
SelectedNode Gets or sets the tree node that is currently selected in the treeview control
Nodes Gets the collection of tree nodes that are assigned to the treeview control. Please see TreeNode Array Object details.
UpdateImageURL Gets or sets the value indicating the image URL used to show node in update
EnableKeyNavigatationNew 1.2 Enables or disables the navigation of all nodes through arrow keys. This property can be overridden by individual node using nodes AllowKeyNavigation property.
EditLabelNew 1.5 Gets or sets a value indicating whether the label text of the tree nodes can be edited

Events

Name Description
SelectedNodeChanging Occurs before selecting node
SelectedNodeChanged Occurs after selecting node
BeforeCollapse Occurs before the tree node is collapsed
BeforeExpand Occurs before the tree node is expanded
AfterCollapse Occurs after the tree node is collapsed
AfterExpand Occurs after the tree node is expanded
BeforeLabelEditNew 1.5 Occurs before the tree node label text is edited
AfterLabelEditNew 1.5 Occurs after the tree node label text is edited
EndRequestNew 1.6 Retrieves the response of the request sent using BeginRequest method

Extended Members

Name Description
ParseHTMLChanged 1.5 This method call accepts UL element as datasource which is then parsed to new treeview object.
ParseJSONNew 1.5 This method call accepts JSON object as datasource which is then parsed to new treeview object.
ParseXMLNew 1.6 This method call accepts XML string or XML DOC object as data source which is then parsed to new TreeView object.

TreeNode Members

Constructor

Name Description
TreeNode Initializes a new instance of the TreeNode object

Methods

Name Description
TreeViewNew 1.5 Gets the parent treeview that the tree node is assigned to
IsExpanded Gets a value indicating whether the tree node is in the expanded state
GetNavigationURLChanged 1.5 Gets the URL to navigate to when the node is clicked
GetTargetChanged 1.5 Gets the target window or frame in which to display the Web page content associated with a node
SetNavigationURL Sets the navigation URL and target of node to navigate the provided URL on click
SetTargetNew 1.5 Sets the target of node to navigate the provided URL on click
SetImageURL Sets the image for node
Select Selects the node
IsSelected Gets a value indicating whether the tree node is in the selected state
ValuePath Gets the path from the root node to the current node
Toggle Toggles the current state of node between expanded and collapsed
Expanded Expands the node
Collapsed Collapses the node
Find Finds the node from provided value. It can be called to find in child nodes.
BeginUpdate This method indicates the node in update using UpdateImageURL property of treeview control. See Folder 2.1.2 in provided snapshot with begin update method.
EndUpdate This method displays the normal image after calling BeginUpdate() for node
Level Gets the zero-based depth of the tree node in the TreeView control
IndexNew 1.2 Gets the zero-based index of the tree node at node level
BeginEditNew 1.5 Initiates the editing of the tree node label
CancelEditNew 1.5 Cancels the editing of the tree node label
EndEditNew 1.5 Ends the editing of the tree node label
IsEditingNew 1.5 Returns true if node is in edit mode
WordWrapNew 1.5 Gets or sets the value that wraps the white spaced long node text
SetTextNew 1.5 Sets the text of the node
SetValueNew 1.5 Sets the value of the node
ToJSONNew 1.5 Gets the JSON object of entire node along with childnodes
ToXMLNew 1.6 Gets the XML formatted string of entire node along with childnodes

Properties

Name Description
Text Gets or sets the text displayed in the label of the tree node
Value Gets or sets a non-displayed value used to store any additional data about the node
ChildNodes Gets the collection of tree nodes that are assigned to the treeview control. Please see TreeNode Array Object details.
Parent Gets the parent node of the current node
AllowKeyNavigationNew 1.2 Enables or disables the navigation of node through arrow keys

Extended Members

Name Description
ParseJSONNew 1.5 This method call accepts JSON object as datasource which is then parsed to new treenode object.
ParseXMLNew 1.6 This method call accepts XML formatted string or XML DOC object as data source which is then parsed to new TreeNode object.

TreeNode Array

The Add, Add1, AddAt, AddAt1, Remove, and RemoveAt methods enable you to add and remove individual tree nodes from the array. Clear method removes all nodes from the array.

UPDATE: Thank you all very much for your response and suggestions. I have restructured this control and have added many things that you might find interesting. More suggestions are welcome. Smile | :) Please vote and comment if you liked it.

History

  • 03/08/2010 – Version 1.0 Released
    • First Release
  • 03/14/2010 – Version 1.2 Released
    • Key Navigation support added
    • Added more events and properties
    • Fixed minor UI issues
  • 04/05/2010 – Version 1.5 Released
    • Code Optimization
    • Added Node label editing feature
    • Added more examples on themes
    • Changed internal structure from UL, LI to table elements
    • Added more events and properties
    • Fixed minor UI issues
  • 04/09/2010 – Version 1.6 Released
    • XML Datasource support added
    • Built-In Ajax request support added
    • Added more events and properties

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Navnath_Kale
Software Developer (Senior)
India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey2-Nov-12 18:29 
GeneralMy vote of 5 PinmvpKanasz Robert20-Sep-12 4:30 
GeneralMy vote of 5 Pinmemberhadi55268-Jul-12 17:34 
GeneralMy vote of 5 PinmemberAnurag Gandhi7-Jun-12 20:50 
QuestionServer Postback Pinmembertorial8-Mar-12 12:04 
GeneralThank you. Pinmemberchkk822-Jan-12 19:45 
Questionthanks Pinmembermuhamd yusuf10-Dec-11 23:25 
GeneralMy vote of 5 PinmemberRajesh Pillai26-Nov-11 2:50 
GeneralMy vote of 5 PinmemberSachin_coder24-Oct-11 18:49 
GeneralMy vote of 5 Pinmemberkiran dangar4-Oct-11 23:18 
Generalopen page in MasterPage PinmembersumB9-May-11 16:53 
GeneralPort to windows forms (.Net) Pinmembercommander197930-Dec-10 22:32 
GeneralDouble click PinmemberMember 436539019-Nov-10 7:56 
GeneralMy vote of 5 Pinmembersaigopal16-Nov-10 22:24 
Questiondo you plan to add context menu? PinmemberMember 436539016-Nov-10 10:14 
Questionexcellent work ! plans to add drag-drop ? PinmemberBillWoodruff6-Nov-10 18:11 
AnswerRe: excellent work ! plans to add drag-drop ? PinmemberNavnath_Kale8-Nov-10 6:28 
Generalhelp PinmemberMember 436539027-Oct-10 9:06 
GeneralRe: help PinmemberNavnath_Kale31-Oct-10 19:20 
GeneralRe: help PinmemberMember 43653903-Nov-10 10:42 
GeneralRe: help PinmemberMember 43653903-Nov-10 11:02 
GeneralRe: help PinmemberNavnath_Kale4-Nov-10 4:35 
GeneralRe: help [modified] PinmemberMember 43653904-Nov-10 21:16 
GeneralRe: help PinmemberNavnath_Kale6-Nov-10 4:13 
GeneralRe: help [modified] PinmemberMember 43653906-Nov-10 20:27 
GeneralMy vote of 4 PinmemberEric Xue (brokensnow)6-Sep-10 13:37 
GeneralRe: My vote of 4 PinmemberNavnath_Kale2-Nov-10 6:57 
GeneralMy vote of 5 PinmemberF[]X3-Jul-10 21:34 
GeneralExcellent!!! PinmemberCastle Rider2-Jul-10 0:11 
GeneralMy vote of 5 PinmemberRene Pilon1-Jul-10 8:42 
GeneralYou made me unhappy PinmemberXmen W.K.13-May-10 3:01 
GeneralRe: You made me unhappy Pinmember» йаνиатн ќalЭ «13-May-10 7:08 
GeneralRe: You made me unhappy Pinmembercommander197917-Jul-10 2:52 
Generalsad.... Pinmemberthe_cool_one27-Apr-10 7:18 
GeneralRe: sad.... PinmemberNavnath R. Kale27-Apr-10 7:59 
GeneralExcellent effort Pinmemberthe_cool_one24-Apr-10 17:41 
GeneralRe: Excellent effort PinmemberNavnath R. Kale26-Apr-10 4:21 
GeneralRe: Excellent effort Pinmemberthe_cool_one27-Apr-10 7:20 
GeneralThanks for your nice effort Pinmembervarghesejac21-Apr-10 3:20 
GeneralRe: Thanks for your nice effort PinmemberNavnath R. Kale22-Apr-10 6:17 
GeneralGood work PinmentorBrij12-Apr-10 18:25 
GeneralRe: Good work PinmemberNavnath R. Kale12-Apr-10 20:25 
GeneralGreat Work PinmemberAmodk_14611-Apr-10 21:09 
GeneralRe: Great Work PinmemberNavnath R. Kale13-Apr-10 3:14 
GeneralVery Nice! PinmemberRene Pilon5-Apr-10 10:47 
GeneralRe: Very Nice! PinmemberNavnath R. Kale6-Apr-10 9:55 
QuestionVery nice & a question PinmemberMember 286955122-Mar-10 10:27 
AnswerRe: Very nice & a question PinmemberMember 28695513-Apr-10 8:01 
GeneralRe: Very nice & a question PinmemberNavnath R. Kale5-Apr-10 2:31 
AnswerRe: Very nice & a question PinmemberNavnath R. Kale9-Apr-10 3:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 3 May 2010
Article Copyright 2010 by Navnath_Kale
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid