Welcome Guest Search | Active Topics | Sign In | Register

TreeView Nodes - Right Click Options
mburolla
Posted: Monday, May 11, 2009 9:51:51 AM
Rank: Advanced Member
Groups: Member

Joined: 4/13/2009
Posts: 37
Is there any right click support for the nodes in a treeview? It would be cool if I could right click on a node and have a small menu pop up.

Thanks,
Marty
eo_support
Posted: Monday, May 11, 2009 9:57:41 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Yes. There is:

http://demo.essentialobjects.com/Default.aspx?path=TreeView\_i1\_i9

You can take a look of the source code of that demo to see how it works and let us know if you have any questions.

Thanks!
mburolla
Posted: Monday, May 11, 2009 10:00:32 AM
Rank: Advanced Member
Groups: Member

Joined: 4/13/2009
Posts: 37
Oh cool! How did I miss that?

Thanks,
Marty
mburolla
Posted: Monday, May 11, 2009 10:55:23 AM
Rank: Advanced Member
Groups: Member

Joined: 4/13/2009
Posts: 37
I've been working with the treeview demo code. For some reason, the treeview node is always null in the Menu1_Click event method. Am I doing something wrong? Here's the code:


Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RightClick.aspx.cs" Inherits="JungleDiskUI2.RightClick" %>
<%@ Register assembly="EO.Web" namespace="EO.Web" tagprefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

    <script type="text/javascript">
    //<!--JS_SAMPLE_BEGIN-->
    function ShowContextMenu(e, treeView, node)
    {
	    //Get the context menu object
	    var menu = eo_GetObject("<%=Menu1.ClientID%>");
    	
	    //Modify the context menu
	    menu.getTopGroup().getItemByIndex(0).setText("Open '" + node.getText() + "'");
	    menu.getTopGroup().getItemByIndex(1).setText("Delete '" + node.getText() + "'");
    	
	    //Display the context menu. See documentation
	    //for the Menu control for details about how
	    //to handle menu item click event
	    eo_ShowContextMenu(e, "<%=Menu1.ClientID%>");
    	
	    //Returns true to indicate that we have
	    //displayed a context menu
	    return true;
    }
    //<!--JS_SAMPLE_END-->
    </script>


    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    
    
<eo:TreeView runat="server" id="TreeView1" Width="200px" ControlSkinID="None" Height="250px"
	ClientSideOnContextMenu="ShowContextMenu" RaisesServerEvent="True">
	<TopGroup Style-CssText="border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
		<Nodes>
			<eo:TreeNode Text="Documents and Settings">
				<SubGroup>
					<Nodes>
						<eo:TreeNode Text="Administrator"></eo:TreeNode>
						<eo:TreeNode Text="All Users"></eo:TreeNode>
						<eo:TreeNode Text="Default User"></eo:TreeNode>
					</Nodes>
				</SubGroup>
			</eo:TreeNode>
			<eo:TreeNode Text="Program Files">
				<SubGroup>
					<Nodes>
						<eo:TreeNode Text="Common Files"></eo:TreeNode>
						<eo:TreeNode Text="ComPlus Applications"></eo:TreeNode>
						<eo:TreeNode Text="Internet Explorer"></eo:TreeNode>
						<eo:TreeNode Text="MSDN"></eo:TreeNode>
					</Nodes>
				</SubGroup>
			</eo:TreeNode>
			<eo:TreeNode Text="Windows">
				<SubGroup>
					<Nodes>
						<eo:TreeNode Text="Fonts"></eo:TreeNode>
						<eo:TreeNode Text="Help"></eo:TreeNode>
						<eo:TreeNode Text="System32"></eo:TreeNode>
					</Nodes>
				</SubGroup>
			</eo:TreeNode>
		</Nodes>
	</TopGroup>
	<LookNodes>
		<eo:TreeNode ImageUrl="00030301" DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;"
			CollapsedImageUrl="00030301" ItemID="_Default" NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
			ExpandedImageUrl="00030302" SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"></eo:TreeNode>
	</LookNodes>
</eo:TreeView>

<eo:ContextMenu id="Menu1" Width="144px" runat="server" ControlSkinID="None" RaisesServerEvent="True">
    <TopGroup Style-CssText="cursor:hand;font-family:Verdana;font-size:11px;">
	    <Items>
		    <eo:MenuItem Text-Html="Open"></eo:MenuItem>
		    <eo:MenuItem Text-Html="Delete"></eo:MenuItem>
		    <eo:MenuItem IsSeparator="True"></eo:MenuItem>
		    <eo:MenuItem Text-Html="Refresh"></eo:MenuItem>
	    </Items>
    </TopGroup>
    <LookItems>
	    <eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="background-color:#E0E0E0;height:1px;width:1px;"></eo:MenuItem>
	    <eo:MenuItem HoverStyle-CssText="color:#F7B00A;padding-left:5px;padding-right:5px;" ItemID="_Default" 
	    NormalStyle-CssText="padding-left:5px;padding-right:5px;">
		    <SubMenu ExpandEffect-Type="GlideTopToBottom" Style-CssText="border-right: #e0e0e0 1px solid; padding-right: 3px; border-top: #e0e0e0 1px solid; padding-left: 3px; font-size: 12px; padding-bottom: 3px; border-left: #e0e0e0 1px solid; cursor: hand; color: #606060; padding-top: 3px; border-bottom: #e0e0e0 1px solid; font-family: arial; background-color: #f7f8f9"
			    CollapseEffect-Type="GlideTopToBottom" OffsetX="3" ShadowDepth="0" OffsetY="-4" ItemSpacing="5"></SubMenu>
	    </eo:MenuItem>
    </LookItems>
</eo:ContextMenu>
    
</form>

</body>
</html>



Code: C#
public partial class RightClick : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Menu1.ItemClick += new EO.Web.NavigationItemEventHandler(Menu1_ItemClick);
        }

        void Menu1_ItemClick(object sender, EO.Web.NavigationItemEventArgs e)
        {
            if (e.TreeNode != null) // This is always null?
            {
                string id = e.TreeNode.ItemID;
            }

            string a = e.MenuItem.Text.ToString(); 
        }
    }



Thanks,
Marty
eo_support
Posted: Monday, May 11, 2009 11:06:40 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

I believe you should use TreeView1.ContextNode instead of e.TreeNode to get the node that triggered the context menu.

Thanks!
mburolla
Posted: Monday, May 11, 2009 11:30:32 AM
Rank: Advanced Member
Groups: Member

Joined: 4/13/2009
Posts: 37
Actually, this works:

Code: C#
void Menu1_ItemClick(object sender, EO.Web.NavigationItemEventArgs e)
{
           string node = this.TreeView1.SelectedNode.Text;  // The node the user selected.
           string action = e.MenuItem.Text.ToString();         // The action to be performed on that node.
}


The only issue I have with this approach, is that a user has to left-click and select a node in order for this logic to work. Sometimes people right click on nodes (thinking they are selecting them). Can the treeview select the node when a user right clicks on it? Or do you have another suggestion?

Thanks,
Marty
eo_support
Posted: Monday, May 11, 2009 11:37:48 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

The property is ContextNode, not SelectedNode:

http://doc.essentialobjects.com/library/1/eo.web.treeview.contextnode.aspx

That property is specifically designed for the purpose of getting the right clicked node.

Thanks
mburolla
Posted: Monday, May 11, 2009 11:41:48 AM
Rank: Advanced Member
Groups: Member

Joined: 4/13/2009
Posts: 37
Oops. You're right, that works.

Thanks,
Marty


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.