Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML
Article

TreePane - A Control for the ASP.NET AJAX Toolkit

Rate me:
Please Sign up or sign in to vote.
4.45/5 (14 votes)
2 Oct 2007GPL31 min read 107.3K   1.2K   37   30
Development of an ASP.NET AJAX Control

Introduction

I wanted to develop a pack of controls wrapping the ExtJs JavaScript Framework. However, I never liked the way in which usual controls are developed, by mixing the JavaScript code with the C# code.

So I looked into the source of the ASP.NET AJAX control toolkit and I finally found what I wanted - a complete separation of JavaScript and .NET code.

The control has some features that the .NET Treeview does not have:

  1. Drag and drop nodes (just set enableDD to true)
  2. Editable nodes (just set the Editable property to true)
  3. Server-side events for node moved and node edited

See the tree live here and here.
To join the project, click here.
To see samples for all the controls in the DLL, click here.

Using the Code

Just add the DLL for the controls to your toolbox, drag and drop to your ASPX page and set some properties:

ASP.NET
<cc1:TreePane ID="TreePane" Editable="true" enableDD="true"
    Loader="TreeHandler.ashx" Width="400px" runat="server"
    OnNodeEdited="TreePane_NodeEdited" OnNodeMoved="TreePane_NodeMoved"
    OnContextMenuClicked="TreePane_ContextMenuClicked">
</cc1:TreePane>

You can add nodes to the tree in the designer or through code:

C#
GridControl.TreeNode root = new GridControl.TreeNode();
root.id = "0";
root.leaf = false;
root.text = "root";
TreePane.TreeNodes.Add(root);

To load nodes dynamically, you can use the Loader property of the control. The code for the loader page looks something like this:

C#
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
    TreeNode no = new TreeNode();
    no.draggable = true;
    no.id = ds.Tables[0].Rows[i]["id"].ToString();
    no.text = ds.Tables[0].Rows[i]["text"].ToString();
    //see if the node has children
    no.leaf = !HasChildren(ds.Tables[0].Rows[i]["id"].ToString());
    no.parentNodeId = context.Request["node"];
    nodes.Add(no);
}

JavaScriptSerializer ser = new JavaScriptSerializer();
context.Response.Write(ser.Serialize(nodes));

Points of Interest

The control was created with the events all fired through callback, then I was surprised while trying to integrate it with the Update Panel. The events where not being fired!

So after some researching and thinking, I implemented postback for the events and added a new property (AutoPostBack) to the control and voila! The events were working and the Update Panel was making them happen without a refresh.

History

This is a year old CodePlex project that has other cool controls.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


Written By
Web Developer
Brazil Brazil
I am Web Developer since 1999 , and I am a
Microsoft Certified Professional since 2005.
I work with asp.net and c# since 2003.
Extender Samples .

Comments and Discussions

 
Generaltreepane checknode Pin
salsigno10-Apr-09 8:53
salsigno10-Apr-09 8:53 
QuestionCan I expand TreePane nodes? Pin
Member 208155317-Mar-08 23:20
Member 208155317-Mar-08 23:20 
Generalgreat article , thanks Pin
Emad Omar29-Jan-08 15:50
Emad Omar29-Jan-08 15:50 
GeneralRe: great article , thanks Pin
rodrigo diniz29-Jan-08 23:36
rodrigo diniz29-Jan-08 23:36 
GeneralAdd parameters to the Request Pin
Sharif N11-Jan-08 17:20
Sharif N11-Jan-08 17:20 
GeneralRe: Add parameters to the Request Pin
rodrigo diniz29-Jan-08 23:37
rodrigo diniz29-Jan-08 23:37 
QuestionJavascript error Pin
antivoland22-Nov-07 7:57
antivoland22-Nov-07 7:57 
AnswerRe: Javascript error Pin
rodrigo diniz22-Nov-07 22:48
rodrigo diniz22-Nov-07 22:48 
QuestionChanging the Tree Images Pin
tundefama5-Nov-07 3:48
tundefama5-Nov-07 3:48 
AnswerRe: Changing the Tree Images Pin
rodrigo diniz5-Nov-07 3:56
rodrigo diniz5-Nov-07 3:56 
GeneralRe: Changing the Tree Images Pin
tundefama5-Nov-07 5:05
tundefama5-Nov-07 5:05 
GeneralRe: Changing the Tree Images Pin
rodrigo diniz5-Nov-07 5:10
rodrigo diniz5-Nov-07 5:10 
GeneralRe: Changing the Tree Images Pin
tundefama5-Nov-07 5:35
tundefama5-Nov-07 5:35 
GeneralRe: Changing the Tree Images Pin
rodrigo diniz5-Nov-07 5:41
rodrigo diniz5-Nov-07 5:41 
QuestionRe: Changing the Tree Images [modified] Pin
tundefama6-Nov-07 5:02
tundefama6-Nov-07 5:02 
GeneralTreeNode Selection after postback Pin
Moshe Fishman28-Oct-07 22:25
Moshe Fishman28-Oct-07 22:25 
GeneralRe: TreeNode Selection after postback Pin
rodrigo diniz28-Oct-07 23:54
rodrigo diniz28-Oct-07 23:54 
GeneralRe: TreeNode Selection after postback Pin
Moshe Fishman29-Oct-07 21:03
Moshe Fishman29-Oct-07 21:03 
GeneralUsing Client API Pin
Moshe Fishman21-Oct-07 21:20
Moshe Fishman21-Oct-07 21:20 
GeneralRe: Using Client API Pin
rodrigo diniz22-Oct-07 0:10
rodrigo diniz22-Oct-07 0:10 
GeneralRe: Using Client API Pin
Moshe Fishman22-Oct-07 0:25
Moshe Fishman22-Oct-07 0:25 
GeneralRe: Using Client API Pin
rodrigo diniz22-Oct-07 0:32
rodrigo diniz22-Oct-07 0:32 
GeneralRe: Using Client API Pin
Moshe Fishman22-Oct-07 0:42
Moshe Fishman22-Oct-07 0:42 
GeneralRe: Using Client API [modified] Pin
rodrigo diniz22-Oct-07 0:55
rodrigo diniz22-Oct-07 0:55 
GeneralRe: Using Client API [modified] Pin
Moshe Fishman22-Oct-07 3:08
Moshe Fishman22-Oct-07 3:08 
OK, I found the solution:

I should use for example:
var tree = $find("dnn_ctr371_ViewDesigner_Tabs_TabFields_treeFields_TreePaneExtender").get_Tree();

meaning:
I have to use $find with the full ClientID + "_TreePaneExtender" to get the reference to the tree object

-- modified at 4:58 Tuesday 23rd October, 2007

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

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