Advanced TreeView v1.6

• Download source - 434.79 KB

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.

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

Methods

Properties

Events

Extended Members

TreeNode Members

Constructor

Methods

Properties

Extended Members

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. :) 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