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