Obout treeview

How to install for .NET

1. Put dll from folder Component\ASPNET\ to C:\Inetpub\wwwroot\bin\ or to your web
application bin folder.
Do not take dll from folder "ASPNET_Interop_Fast".
Do NOT add component to toolbar.

2. Put folder TreeIcons to C:\Inetpub\wwwroot\ or any other location.

Put folder Examples anywhere on your web site.
See How to run 60 ready working examples

How to give security rights (see question 10) if access denied.

How to add reference in Visual Studio project.

Please ask any questions support@obout.com See How-To page

How to install for Classic ASP

1. Register dll from folder Component\ClassicASP\ with command regsvr32.
You can put dll anywhere on your hard drive. Execute command in Start > Run

regsvr32 "C:\<PATH TO DLL>\obout_ASPTreeView_2.dll"

2. Put folder TreeIcons to C:\Inetpub\wwwroot\ or any other location

Put folder Examples anywhere on your web site.
See How to run 60 ready working examples

How to give security rights (see question 10) if access denied.

Change style with one property

oTree.FolderStyle = "/TreeIcons/Styles/Classic"
oTree.Add("root", "id_0", "Hello, World!")

oTree.Add("id_0", "id_1", "obout.com")

oTree.Add("id_1", "id_2", "MemoBook.com")

Change style with one property oTree.FolderStyle = "/TreeIcons/Styles/Classic"

Root Node is optional

obout.com To load dynamically set URL in last parameter:
obout.com
ASPTreeView oTree.Add ( pId , Id , html , null , null , "
SubTree.aspx " ) ;
Easy
Click to load dynamically from
different file
More nodes
obout.com
More nodes
 Select Icons
Recycle :)

Change style with one property oTree.FolderStyle = "/TreeIcons/Styles/Classic"

oTree.ShowIcons = false

With background
Change style with one property oTree.FolderStyle = "/TreeIcons/Styles/Win2003L"
Background image can be set using ob_tree class in the style sheet.
/* for div where treeview is placed */
div.ob_tree {
background-image: url('../images/wheat.jpg');

For dynamic loading: To change style of the "Loading..." message, modify ob_t7 CSS class.

Example:
/* for message "Loading ..." */
td.ob_t7 {
font:8pt Tahoma;
background-color:#ffffff;
border:1px solid #666666;
color:#666666;
width:80px;
text-align:center;
padding-left:20px;

When Loading TreeView from DataBase

Below you will find the code for loading a TreeView from an Access database and also (bolded) the
lines added to make the EasyMenu attach to each node loaded:

obout_ASPTreeView_2_NET.Tree oTree = new obout_ASPTreeView_2_NET.Tree();

string ParentID;
string nodeID;
// create an empty string that will contain the ids of all nodes from the
treeview
string attachTo = "";

oTree.FolderIcons = "/TreeIcons/Icons";
oTree.FolderStyle = "/TreeIcons/Styles/Classic";
oTree.AddRootNode("Hello, I am Root node!", null);

OleDbConnection myConn = new

OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" +
Server.MapPath("Demo.mdb"));

OleDbCommand myComm = new OleDbCommand("SELECT id, parent, html,

expanded, icon FROM tree ORDER BY parent, id", myConn);
myConn.Open();
OleDbDataReader myReader = myComm.ExecuteReader();
while (myReader.Read())
{
if (myReader.IsDBNull(1))
{
ParentID = "root";
}
else
{
ParentID = "id" + myReader.GetInt32(1);
}
oTree.Add(ParentID, nodeId = "id" + myReader.GetInt32(0),
myReader.GetString(2), myReader.GetBoolean(3), myReader.GetString(4) +
"\" onclick=\"ob_t25(document.getElementById('" + nodeId + "'))", null);
// add the current node's id to the string
attachTo += "id" + myReader.GetInt32(0) + ",";
}
TreeView.Text = oTree.HTML();
oTree.Width = "150px";
myReader.Close();
myConn.Close();

// set the AttachTo property of the EasyMenu to the id list we just

created
EasyMenu1.AttachTo = attachTo;

Here is the EasyMenu. Please note that there is not AttachTo property added since this is done from
the code above.

<oem:EasyMenu id="EasyMenu1" runat="server" Width="150">

<Components>
<oem:MenuItem id = "menuItem1" InnerHtml = "Select Node"
OnClientClick="try {targetEl.onclick();} catch (e) {}">
</oem:MenuItem>
<oem:MenuItem id = "menuItem2" InnerHtml = "Show Node's Name"
OnClientClick="try {alert(targetEl.innerText);} catch (e) {}">
</oem:MenuItem>
<oem:MenuItem id = "menuItem3" InnerHtml = "Expand/Collapse Node"
OnClientClick="try {targetEl.parentNode.firstChild.firstChild.onclick();} catch (e) {}">
</oem:MenuItem>
</Components>
</oem:EasyMenu>

Feel free to test on the nodes of the treeview on the right hand side of the page.

Notes:

· Take a look at the following how-to to see how to select the node on right-clicking on it.

· nodeId is used so the node is selected when clicking on the icon. If you do not want the node to be
selcted when clicked on the icon, just remove the line string nodeID; and use this line to add items:
oTree.Add(ParentID, "id" + myReader.GetInt32(0), myReader.GetString(2),
myReader.GetBoolean(3), myReader.GetString(4), null); Take a look at the following how-to to
see how to select the node when clicking on the icon.
 When Adding Nodes By Code

We need to create a string that contains all the ids of all nodes to which we want to attach the
EasyMenu, then set the AttachTo property of the EasyMenu to this string:

obout_ASPTreeView_2_NET.Tree oTree = new obout_ASPTreeView_2_NET.Tree();

// create an empty string that will contain the ids of all nodes from the
treeview
string attachTo = "";

oTree.FolderIcons = "/TreeIcons/Icons";
oTree.FolderStyle = "/TreeIcons/Styles/Classic";
oTree.AddRootNode("Hello, I am Root node!", null);

string Html = "<span style='color:#666666; font:bold; cursor:pointer;'

onclick='ob_t25(this)'>obout.com<b style='color:crimson; text-
decoration:none;'> Home</b></span>";
oTree.Add("root", "r1", Html, true, "xpPanel.gif\"
onclick=\"ob_t25(document.getElementById('a2'))", null);
// add the id of this node (r1) to the list
attachTo += "r1,";

Html = "ASPTreeView";
oTree.Add("r1", "a0", Html, true, "Folder.gif\"
onclick=\"ob_t25(document.getElementById('a0'))", null);
attachTo += "a0,";

oTree.Add("a0", "a0_0", "Small", null, "ball_glass_redS.gif\"

onclick=\"ob_t25(document.getElementById('a0_0'))", null);
oTree.Add("a0", "a0_1", "Fast", null, "ball_glass_redS.gif\"
onclick=\"ob_t25(document.getElementById('a0_1'))", null);
oTree.Add("a0", "a0_2", "Easy", null, "ball_glass_redS.gif\"
onclick=\"ob_t25(document.getElementById('a0_2'))", null);
attachTo += "a0_0, a0_1, a0_2,";

Html = "More nodes";

oTree.Add("r1", "a1", Html, true, "Folder.gif\"
onclick=\"ob_t25(document.getElementById('a1'))", null);
attachTo += "a1,";

Html = "Different color";

oTree.Add("a1", "a1_0", Html, null, "ball_glass_blueS.gif\"
onclick=\"ob_t25(document.getElementById('a1_0'))", null);
attachTo += "a1_0,";

Html = "Any HTML";

oTree.Add("a1", "a1_1", Html, null, "ball_glass_blueS.gif\"
onclick=\"ob_t25(document.getElementById('a1_1'))", null);
attachTo += "a1_1,";

oTree.Add("a1", "a1_2", "Select Icons", null, "ball_glass_blueS.gif\"

onclick=\"ob_t25(document.getElementById('a1_2'))", null);
attachTo += "a1_2,";
Html = "Memobook";
oTree.Add("a1", "a1_3", Html, null, "ball_glass_blueS.gif\"
onclick=\"ob_t25(document.getElementById('a1_3'))", null);
attachTo += "a1_3,";

Html = "Recycle :)";

oTree.Add("root", "a2", Html, true, "xpRecycle.gif\"
onclick=\"ob_t25(document.getElementById('a2'))", null);
attachTo += "a2";

TreeView.Text = oTree.HTML();
oTree.Width = "150px";
// set the AttachTo property of the EasyMenu to the id list we just
created
EasyMenu1.AttachTo = attachTo;

Here is the EasyMenu. Please note that there is not AttachTo property added since this is done from
the code above.

<oem:EasyMenu id="EasyMenu1" runat="server" Width="150">

<Components>
<oem:MenuItem id = "menuItem1" InnerHtml = "Select Node"
OnClientClick="try {targetEl.onclick();} catch (e) {}">
</oem:MenuItem>
<oem:MenuItem id = "menuItem2" InnerHtml = "Show Node's Name"
OnClientClick="try {alert(targetEl.innerText);} catch (e) {}">
</oem:MenuItem>
<oem:MenuItem id = "menuItem3" InnerHtml = "Expand/Collapse Node"
OnClientClick="try {targetEl.parentNode.firstChild.firstChild.onclick();} catch (e) {}">
</oem:MenuItem>
</Components>
</oem:EasyMenu>

Feel free to test on the nodes of the treeview on the right hand side of the page.

Notes:

· Take a look at the following how-to to see how to select the node on right-clicking on it.

· When you click on the icon, the node is also selected. If you do not want to that, use "icon.gif"
instead of "icon.gif\" onclick=\"ob_t25(document.getElementById('id'))" for every item you
add. Take a look at the following how-to to see how to select the node when clicking on the icon.