Click here to Skip to main content
11,639,126 members (68,298 online)
Click here to Skip to main content

TreePane - A Control for the ASP.NET AJAX Toolkit

, 2 Oct 2007 GPL3 73.5K 1K 36
Rate this:
Please Sign up or sign in to vote.
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:

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

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:

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)

Share

About the Author

rodrigo diniz
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 .

You may also be interested in...

Comments and Discussions

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

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 | Terms of Use | Mobile
Web01 | 2.8.150728.1 | Last Updated 2 Oct 2007
Article Copyright 2007 by rodrigo diniz
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid