Andrew Stopford's Weblog

A better treeview, using.....the treeview

After running into the display issue with the treeview and display issues in FF I was looking around for an answer and came across CssAdapters for ASP.NET. This project (currently in beta but would be great to see released) allows you to adapt how controls render, for example treeviews render as tables (which explains the cross over issues with panels and FF) but using this you can adapt to use CSS instead. The installer installs a asp.net template into VS and you can use that website project as the basis for your adaptions. It's wrapped up in masterpages and sitetemplates so if your not using those then you will need to do the following.

• Copy the JavaScript folder over to your site as is
• Copy the arrow, blank, collapse, expand graphic files and TreeView.css, TreeViewExample.css files from the template folder to your site.
• Copy the Adapters folder in the App_Code folder to your sites App_Coder as is.

You will need to adapt your treeview as well, if your not using skins then you will need to alter the treeview with

 <asp:TreeView ID="TreeView" Runat="server" ExpandDepth="4" CollapseImageUrl="collapse.gif" ExpandImageUrl="expand.gif" NoExpandImageUrl="blank.gif" CssClass="TreeView-Skin-Root" CssSelectorClass="PrettyTree">

Here note the CollapseImageUrl, ExpandImageUrl, NoExpandImageUrl, CssClass and the CssSelectorClass. This last attribute is added by the adapter.