Ra-Ajax Samples - TreeView

This is our TreeView sample. The Ra-Ajax TreeView control is very flexible in addition to being a good friend with your browser. You can choose to render items "statically" in markup or "dynamically" through event handlers. And you can mix these two methods in the same TreeView control just as you wish.

The above TreeView has three root TreeNodes. None of these root items are expanded. Click to expand any TreeViewNode. In the two first ones there are three child TreeNodes where one of those have dynamically rendered child items. If you look at the code you will see that the HTML child items of the first root item have an event handler for retrieving child items but no directly "statically" rendered items within it. The child TreeNodes of the "HTML" element will not be populated to the client (browser) before you actually expand it. While all the other items will be rendered directly into the markup as HTML but hidden through CSS if they are not expanded.

You can set the rendering of "Child TreeView Items" on a per TreeViewItem basis. This means that some nodes can be statically created and thereby be visible for search-engine spiders and so on, while other TreeViewItems in the same TreeView can have "dynamically created" items which only will use bandwidth if actually expanded.

This can be seen in the "HUGE collection" TreeViewNode. None of its children are rendered in the markup, but when expanded you will actually get 50 new items. Still the initial rendering of the page is very small and those 50 items will not pollute the initial rendering of the page at all.

Advantages of the Ra-Ajax TreeView

This means that all the statically rendered items will in fact be "pure HTML" which means they will be very search engine friendly and also easy to interact with through screen-readers and such. While the dynamically created items (child items of HTML node) will not use any bandwidth before you physically expand the HTML TreeNode. This means that it is possible to have extremely large TreeView nodes while at the same time have some of the nodes be visible as pure markup. This means that you can render x nodes (where x is a small number) which are initially being rendered into the page HTML which will be 100% "pure" HTML and visible for search engines while at the same time have extremely large TreeNode children of those which are rendered on a demand basis and will not use any bandwidth at all before rendered.

So in the same page where some of your nodes are visible to search engines you can still have extremely large TreeViewNodes within the same TreeView which have like 50,000 nodes and such but will not mess with the responsiveness of your application. This makes the Ra-Ajax TreeView useful for both "link trees" and "huge nodes collection trees".

Flexibility

In addition you can add up any control you wish inside of your TreeNodes, including CheckBoxes, RadioButtons, Labels, LinkButtons and "pure" HTML like links and such. And you can trap event handlers for those controls - both "normal" ASP.NET Controls and Ra-Ajax controls and everything will interact 100% perfect with the rest of your page.

On to Ajax Menu