TreePane - A Control for the ASP.NET AJAX Toolkit

• Download source files - 1,765 KB

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.

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