ASP.NET TreeView - Tips and Tricks


For any questions send us a support request.

Also see How-To and Help page and How to customize borders, fonts, colors, etc.



1. Can you have icons on just the levels directly below the root but not at deeper levels?
Can you have icons only on some of the items directly beneath the root and not others?



To hide icon add this code to image file name. Example:
oTree.Add("a1", "b2", html, false, "folder.gif"" style=""display:none;"" ")
Another way is to use dynamic loading and set oTree.ShowIcons = false on lower branches.





2. When keeping state, how to set cookies expiration period?


Edit file tree2/script/ob_tree_XXX.js
function ob_saveNodeState( objBlockNode, NodeId ) {
        // Set expiration days here
        var expiredays = 3;
        . . .




3. How to reuse TreeView code on all pages and highlight corresponding node?


Follow the next 3 steps when creating your TreeView:

1. You have to put the function where you populate treeview in included file
<!-- #include file="../includes/mainmenu.inc" -->

2. Then you must call function with selected ID as a parameter:
void Page_Load(object sender, EventArgs e) {
MyTreeLabel.Text = getT2Navigation("ex_msdn");
}
3. In the function getT2Navigation in included file use this line
oTree.SelectedId = MyParameter;





4. Can you use TreeView in PHP?


Yes, it is possible, but you will need to make all declarations in php. Here is a little sample:

<?php
      // Set up com
      $treeview = new COM("obout_ASPTreeview_2.Tree")
          or die("Unable to talk to ASPtreeview");

      
      // Add a couple of nodes
      $main = "<span onclick='ob_t23(this)'
          style='cursor: pointer;'><strong>ROOT</strong></span>";
      $treeview->Add("root", "a0", $main, false);

      $html = "<a href='#' target='_blank'>Sub 1</a>";
      $treeview->Add("a0", "a0_0", $html);

      // Select FolderIcons
      $treeview->FolderIcons = "tree2/icons";
      
      // Select style.
      $treeview->FolderStyle = "tree2/style/Explorer";

      // Show Icons
      $treeview->ShowIcons = True;
      
      // Set Width if needed
      $treeview->Width = "500px";
      
      //Write treeview to your page.
      echo $treeview->HTML();
?>




5. How can you use TreeView with ColdFusion?


Take a look at the next example:

       <!--- create COM object --->
        <cfobject type="com" class="obout_ASPTreeview_2.Tree" action="create" name="TreeV" />
                
        <!--- style --->
        <cfset TreeV.FolderIcons = "tree2/icons" />
        
        <!--- folder icons --->
        <cfset TreeV.FolderStyle = "tree2/style/Outlook" />
            
        <!--- create simple treeview --->
        <!--- root node --->
        <cfset main = "<span onclick='ob_t23(this)' style='cursor:hand'>Root Node</span>" />
        <cfset TreeV.Add("root", "a0", main,"false","","") />
                
        <!--- sub node --->
        <cfset html = "<a href='##' target='_blank'>Sub_1</a>" />
        <cfset TreeV.Add("a0", "a0_1", html,"","","") />
       
        <!--- write treeview --->
        <cfoutput>#TreeV.HTML()#</cfoutput>




6. How to make tree XHTML compliant?


Tree is XHTML compliant.
You only need to move link to CSS file to <head> section of your page.
The link to CSS file is first line in the treeview HTML code.
Make right click on the page with treeview and copy first line of treeview code.
It looks like this
<link rel="stylesheet" href="tree2/style/Classic/obout_treeview2.css" />
Paste this line to to the <head> section of your page.
Then set oTree.XHTML_Compliant = true;
Simple as that.






For any questions send us a support request.

obout.com
obout.com Home
News
TreeView Home
TreeView Home
Download
Site Map
Examples 
Styles
Classic
Classic
Dynamic Loading
No Icons
Black
Black No Icons
Background image
Premiere New
black
blue
green
red
violet
yellow
Explorer
Gray
Help
HelpPlus
MSDN
TMenu
TMenu (small icons)
Vista New
Web
White
XPBlue
Win2003
Right To Left
Features
Drag and drop - 18
Drag-n-Drop
Custom
Multi-node
Dragging with children
Drop in textboxes
External D'n'D
Move nodes 1
Renumber nodes
Auto Scrolling
Copy / Move nodes
D'n'd and Dynamic Loading
Drop in listboxes
Drop in listboxes 2
Restrict Levels
D'n'D with various options
Disable dropping in two trees
Not-allowed Icon New
Sort after D'n'D New
Dynamic loading - 6
Web style
MSDN style
Deep tree
Reload subtrees
Loading trees partially
Virtual Scrolling New
Add/remove nodes - 4
Add/remove on client-side
Alphabetical order
Add to dynamic subtrees
Remove all children
Edit nodes - 4
Edit nodes
Nodes with Checkboxes
Sort after Edit New
Select nodes - 3
Find selected node
Select multiple nodes
Highlight parent
Layout - 2
Width, height and scrollbars
Root node
TreeView state - 3
Dynamic
Keep expanded
Keep collapsed
File system - 3
Show file system
File system loading
File system manager
Additional data for each node - 3
Details
On client side
Image viewer
Expand/collapse nodes - 2
By level
Single folder
Multiple trees - 4
Two Trees
Two Trees custom
Two Trees enhancement
Move Nodes BTWN Trees New
Different Styles New
Validation - 2
D-n-d on server
Edit on server
Integration - 14
With a context menu
Attach Easy Menu
Attach menu on-demand
Attach to dynamic nodes
Attach menu to icons
Change icons
With Flyout
With Splitter
MS AJAX
With checkboxes
Dynamic checkboxes
With a Combobox
With modal dialog
Outlook Slide Menu
With Tab Strip
Build from SiteMap
Customization - 7
Icons for treeview
Aligned columns
CSS Tutorial
Hover node effect
Multi-Level Slide Menu
Select on Collapse
From Dennis
From/To XML file
Keyboard navigation
Search nodes
Client-side events
Knowledge Base - 1
Knowledge Base
Documentation
Method Add
Server-Side
Client-Side
Client-Side Events
XML
Methods
XML Tutorial
Client-Side Tutorial
Tutorial 1
Tutorial 2
Tutorial 3
Tutorial 4
Events
Tutorial
Event handlers
Tutorials
Using the correct path
Improving performance
In a user control
AutoPostBack with various options
Open in Search pane
Move nodes by clicking a button
Postback on node select
Switch icons