How to display context menu?
I have the following code which works well to right click and select a treenode and call an Ajaxmethod. But in the AjaxMethod, I want to be able to dynamically make certain menuitems visible or not visible, based on passed in node id. I can't figure out how to make the menu visible AFTER I have set each menuitem visible or not visible. Do I have to inject some JavaScript from the AjaxMethod? Any help would be appreciated.
Code:
<ext:Menu ID="mnuTreeView" runat="server">
<Items>
<ext:MenuItem ID="mnuRefresh" runat="server" Text="Refresh" Icon="ArrowRefresh">
</ext:MenuItem>
<ext:MenuSeparator></ext:MenuSeparator>
<ext:MenuItem ID="mnuDelete" runat="server" Text="Delete" Icon="Delete">
</ext:MenuItem>
</Items>
</ext:Menu>
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:TreePanel ID="tvwProjectFolders" runat="server" Title="" AutoScroll="true" Animate="false" Border="false" TrackMouseOver="false">
<Listeners>
<BeforeLoad Fn="nodeLoad" />
<ContextMenu Handler="this.getSelectionModel().select(node);Coolite.AjaxMethods.ShowMenu(node.id);" />
</Listeners>
</ext:TreePanel>
</ext:FitLayout>
</Body>
</ext:ViewPort>
RE: How to display context menu?
RE: How to display context menu?
These examples don't work for me because they are showing static menus, that don't change. I need to be able to dynamically change the visibility of menu items based on passed in node id to AjaxMethod. Is this possible??
RE: How to display context menu?
Hi,
Please see the following sample
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
.node-label
{
font-weight:bold;
font-size:12px;
padding:5px 0px 5px 28px;
width:150px;
}
</style>
<script runat="server">
[AjaxMethod]
public void ShowMenu(int x, int y)
{
ScriptManager1.AddScript("{0}.hide();", MenuItem1.ClientID);
ScriptManager1.AddScript("{0}.showAt([{1}, {2}]);", BrowseMenu.ClientID, x, y);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:TreePanel ID="Browse" runat="server" Border="false" Stateful="true">
<Root>
<ext:TreeNode Text="Home" Leaf="false" Icon="House">
<Nodes>
<ext:TreeNode Text="Folder 1" Icon="Folder">
<Nodes>
<ext:TreeNode Text="File 1" Icon="Folder" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Folder 2" Icon="Folder">
<Nodes>
<ext:TreeNode Text="File 2" Icon="Share" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<ContextMenu Handler="#{BrowseMenu}.node = node;Coolite.AjaxMethods.ShowMenu(e.getXY()[0], e.getXY()[1]);" />
</Listeners>
</ext:TreePanel>
<ext:Menu ID="BrowseMenu" runat="server">
<Items>
<ext:TextMenuItem ID="NodeLabel" runat="server" CtCls="node-label" />
<ext:MenuItem runat="server" Text="Create New" >
<Listeners>
<Click Handler="Ext.Msg.alert(this.parentMenu.node.text, 'Create sub items');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Item1" >
</ext:MenuItem>
<ext:MenuItem ID="MenuItem2" runat="server" Text="Item2" >
</ext:MenuItem>
</Items>
<Listeners>
<BeforeShow Handler="#{NodeLabel}.el.update(this.node.text);" />
</Listeners>
</ext:Menu>
</form>
</body>
</html>
Unfortunatelly it is need use ScriptManager AddScript for correct script sequence
RE: How to display context menu?
