First time here? You are looking at the most recent posts. You may also want to check out older archives or the tag cloud. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS. Thank you for visiting! (hide this)

For the project I'm working on I have to display thousands of user grouped by team, company, accounts, resellers and, sometimes, reseller of resellers. And I need to display the hierarchy using a treeview. Unfortunately the treeview control that is available with ASP.NET 2.0 cannot handle so many "nodes" with a decent level of performance, and even if he could, an html page with some thousands of users added inside nested <ul> tags will probably be more than 1 or 2 Mb: not something you want for your web application.

Unfortunately the is no TreeView control inside the ASP.NET AJAX Control Toolkit, so I looked around for something similar to the MSDN Library contents tree.

I found a few ajax treeviews, but none of them is built as an ASP.NET Ajax control or extender:

I need something that is easy to implement, easy to understand, with a nice look&feel out-of-the-box but also easily customizable.

ext_tree After a quick look at the three components above I decided to go with the Ext one.

As you can see in the image at the left (here is a live example), it's very nice looking, nice transition effects, nice loading indicator.

And it's also quite easy to implement:

just add the reference to the extjs library, add a div in the position where you want the tree view to appear and write 10 lines of javascript to add the root tree node to the tree panel and to configure the ajax tree loader.

Then you have to write your own ajax loader that returns a JSON formatted list of nodes.

The only drawback is that it needs a 450Kb javascript library and a 80Kb style sheet just for a small functionality.

I already trimmed down the CSS to small 4Kb style sheet, removing all the styles used in the other controls of the suite, but I still have to find out a way to reduce the size of the javascript library: they have a nice "Build your own Ext" that should build your custom ext library with only the classes you need for your functionalities, but I still have to find all the dependencies I need in order to have my tree view working, so, for the moment, I'm including the full library: I'll reduce the size in the future.

If you want to try it yourself, you can download it here.

Technorati tags: , , ,

posted on Thursday, June 28, 2007 9:27 PM

Comments on this entry:

# re: Ajax TreeView

Left by LorenzoC at 6/29/2007 12:08 AM

BTW, I noticed you can use the Ext thingy either with the Gnu GPL license (and you know what it means) or the "commercial" license.

# re: Ajax TreeView

Left by Simone at 6/29/2007 2:20 PM

Actually the OpenSource license is LGPL, not GPL.
The commercial license is only if you want support.

# Enlaces .NET 01-07-2007

Left by OberData at 7/2/2007 7:06 AM

TreeView con Ajax .NETValidaciones con Enterprise Library 3.xLINQ to SQL (Part 3 - Querying our Database)Busqueda...

# re: Ajax TreeView

Left by Steven Harman at 7/2/2007 1:47 PM

Wow... that is pretty freaking hot. But then, maybe it's just me and my fetish for eye-candy. :)

# re: Ajax TreeView

Left by George at 7/17/2007 2:37 AM

Could you send me your visual studio project please? i need to implement a tree with asp net but i dont know too much javascript. thank you...

# re: Ajax TreeView

Left by simone at 7/17/2007 9:10 PM

George, you are not the first one that asks for an example.
I'll post something about it soon.

# re: Ajax TreeView

Left by Chris at 8/1/2007 1:54 PM

Could you please provide your example? I've been monkeying around with this for a while and can't seem to get it to work.


# re: Ajax TreeView

Left by Simone at 8/1/2007 2:01 PM

Yep, sorry guys, but I'm a bit busy at the moment, with the new project starting and packing up things to go back to Italy.
Will do over the next week.

# re: Ajax TreeView

Left by Pradeep at 8/1/2007 9:11 PM

Hi its cool and i need this ,can u please send the code for this
and can i use it in my project

# re: Ajax TreeView

Left by James at 8/4/2007 9:52 AM

Cool Tree! I would like to see the code to. Thanks Simone.

# re: Ajax TreeView

Left by shashi at 8/15/2007 8:48 PM

can you please send me your ajax version.

# re: Ajax TreeView

Left by Stepan at 8/20/2007 5:36 PM

ASP.NET version of ExtJs controls (see TreeView inside)

# re: Ajax TreeView

Left by nagesh at 9/19/2007 6:15 AM

I am looking for code with has drag and drop tree functionality in Ajax.
And the tree must be spited from top-right to bottom-left.
Rather than the tree which normally spited form top-left to bottom-right.

Comments have been closed on this topic.