obout inc - ASP.NET EasyMenu - Tutorials

How To use EasyMenu with TreeView

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">
        <components>
            <oem:MenuItem
                 id="menuItem3"
                 OnClientClick="alert(targetEl.innerHTML);"
                 InnerHtml="Show Node's HTML">
            </oem:MenuItem>
            <oem:MenuItem
                 id="menuItem2"
                 OnClientClick="targetEl.parentNode.firstChild.firstChild.onclick();"
                 InnerHtml="Expand/Collapse Node">
            </oem:MenuItem>
        </components>
    </oem:EasyMenu>

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

Note:
· By default, when EasyMenu is used with Treeview, it will automatically select the tree node to which it is attached when displaying.

Hello, I am Root node!

obout.com Home

AspTreeView

Small

Fast

Easy

More Nodes

Different Color

Any HTML

Select Icons

Memobook

Recycle :)

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;

Hello, I am Root node!

obout.com Home

ASPTreeView

Small

Fast

Easy

More nodes

Different color

Any HTML

Select Icons

Memobook

Recycle :)

Please visit HOW-TO and Help page for any questions.

"I'm very happy with the obout suite. The product is excellent!"

Anfilofio Santos