ASP.NET Easy Menu - 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 Easy Menu 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 Easy Menu. 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 Easy Menu 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 Easy Menu, then set the AttachTo property of the Easy Menu 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 Easy Menu. 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 Easy Menu 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 :)
 
 

obout.com
obout.com Home
News
Easy Menu Home 
Easy Menu Home
Download
Site Map
Compare with Text Menu
Examples - 79
Appearance - 11
Live Styles
Horizontal Right To Left
Transparent - over flash
MSDN 2
With rounded corners
Keep Open New
Expand Animations New
Vertical 1
MS Vertical
Vertical Right To Left
Context Menu - 10
World Map
Default
Futura
VSNET
Windows
WindowsXP
Style 1
Style 2
Style 3
Right To Left
Tab Strip - 8
Tab Strip
Live Styles
Tab Strip - With postback New
Parent Child Tabstrip New
Tab Strip - Wizard
Tab Strip - Wizard 2
Add / Remove Tabs
Add / Remove Tabs 2
Time Picker - 1
Time Picker
Populating with data - 5
Binding to DataReader New
Binding to DataTable New
Binding to SqlDataSource New
Binding to ObjectDataSource New
Fast loading time
Multi Column Menu - 2
Multi Column Submenu New
Multi Column Submenu with Icons New
Multiple menus - 3
Multiple menus
Multiple menus 2
Horizontal menu and Tab Strip
Operations - 9
ShowEvent New
Add / Remove Items New
Hide / Show Items New
Menu item inner HTML New
Attach / Detach
Menu Events
OnClientClick
Menu item postback
Show menu New
Align/Position - 4
Align
Advanced Align
Menu Offsets
Position
Integration  - 14
TreeView - 5
Attach to TreeView
Dynamic Loading
Inside callback panel
Select the TreeView node New
TreeView inside Easy Menu
AJAX Page - 3
Inside AJAX Page panel
Inside MS AJAX panel
Add items server side
Grid - 2
Use With Grid
Inside DataGrid column
Inside WindowNew
Build from SiteMap
Over Java Applet
With Data Controls New
Other features - 12
AttachTo
Menu Icons
Menu Customize
Long vertical menus
Long menu items
Disabled menu item
Sub-menus
Dynamic Easy Menu Item
Full Easy Menu width
Hide menu with time delay
Custom sliding effect New
Custom Menu Content New
Knowledge Base - 1
Knowledge Base
Documentation - 4
Server side
Client side
Using the correct path
ChangeLog
Tutorials - 2
Using Database
Postback Persistance