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

TreePane - A Control for the ASP.NET AJAX Toolkit

, 2 Oct 2007
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 .

Comments and Discussions

 
Generaltreepane checknode Pinmembersalsigno10-Apr-09 8:53 
QuestionCan I expand TreePane nodes? PinmemberMember 208155317-Mar-08 23:20 
Generalgreat article , thanks PinmemberEmad Omar29-Jan-08 15:50 
GeneralRe: great article , thanks Pinmemberrodrigo diniz29-Jan-08 23:36 
GeneralAdd parameters to the Request PinmemberSharif N11-Jan-08 17:20 
GeneralRe: Add parameters to the Request Pinmemberrodrigo diniz29-Jan-08 23:37 
QuestionJavascript error Pinmemberantivoland22-Nov-07 7:57 
AnswerRe: Javascript error Pinmemberrodrigo diniz22-Nov-07 22:48 
QuestionChanging the Tree Images Pinmembertundefama5-Nov-07 3:48 
AnswerRe: Changing the Tree Images Pinmemberrodrigo diniz5-Nov-07 3:56 
GeneralRe: Changing the Tree Images Pinmembertundefama5-Nov-07 5:05 
GeneralRe: Changing the Tree Images Pinmemberrodrigo diniz5-Nov-07 5:10 
GeneralRe: Changing the Tree Images Pinmembertundefama5-Nov-07 5:35 
GeneralRe: Changing the Tree Images Pinmemberrodrigo diniz5-Nov-07 5:41 
QuestionRe: Changing the Tree Images [modified] Pinmembertundefama6-Nov-07 5:02 
GeneralTreeNode Selection after postback PinmemberMoshe Fishman28-Oct-07 22:25 
GeneralRe: TreeNode Selection after postback Pinmemberrodrigo diniz28-Oct-07 23:54 
GeneralRe: TreeNode Selection after postback PinmemberMoshe Fishman29-Oct-07 21:03 
GeneralUsing Client API PinmemberMoshe Fishman21-Oct-07 21:20 
GeneralRe: Using Client API Pinmemberrodrigo diniz22-Oct-07 0:10 
GeneralRe: Using Client API PinmemberMoshe Fishman22-Oct-07 0:25 
GeneralRe: Using Client API Pinmemberrodrigo diniz22-Oct-07 0:32 
GeneralRe: Using Client API PinmemberMoshe Fishman22-Oct-07 0:42 
GeneralRe: Using Client API [modified] Pinmemberrodrigo diniz22-Oct-07 0:55 
GeneralRe: Using Client API [modified] PinmemberMoshe 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 | Mobile
Web02 | 2.8.140826.1 | Last Updated 2 Oct 2007
Article Copyright 2007 by rodrigo diniz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid