How to get TreeView ContextMenu work in a popup

2 posts, 0 answers
  1. Ez
    Ez avatar
    5 posts
    Member since:
    Oct 2009

    Posted 13 Oct 2009 Link to this post

    The TreeView control works fine in the page. However, it does not work in the Popup.

    What confuses me is that the node expand and collapse works for TreeView even in the popup, but not the Contextmenu
     

    To understand more about this, I added the alert() in the onClientContextMenuShowing to show the property values. First, I get the menu object:

    treeNode.get_contextMenu()

    It shows that enable state is "undefined" and visible is false. (it displays correctly if NOT in popup).
    So I add these two lines:

     

    menu.set_enabled();
    menu.show(evt);

    It still does not work.

    What I don't understand is that same code works in the non-popup scenario.

    I need help.

    Here is the code:

    <asp:ScriptManager ID="sm" EnablePageMethods="true" runat="server" ></asp:ScriptManager>
    <telerik:RadEditor ID="htmlEditor" runat="server" OnClientLoad = "OnClientLoad"
             AllowScripts="True" Width="100%" Height="500" Skin="Vista" EditModes="Design,Html"  >
     <Tools>
                    <telerik:EditorTool Name="btnSave" Text="Save" ShowIcon="false" showText="true" />
                    <telerik:EditorSeparator Visible="true" />

      <telerik:EditorToolGroup>
       ..................
      </telerik:EditorToolGroup>
      </Tools>
    </telerik:RadEditor>
     
    <asp:Panel ID="pnlTemplateSave" Wrap="false" style="background-color:White;" runat="server">
    <asp:UpdatePanel ID="updpnlSave" runat="server" UpdateMode="Conditional" >      
    <ContentTemplate>
                <telerik:RadTreeView ID="RadTreeView2" MultipleSelect="false" AllowNodeEditing="true" runat="server" Height="300px"
                    OnClientContextMenuShowing="onClientContextMenuShowing"
                    OnClientContextMenuItemClicking="onClientContextMenuItemClicking"
                    OnContextMenuItemClick="RadTreeView2_ContextMenuItemClick"
                    OnNodeExpand="RadTreeView2_NodeExpand"
                    OnNodeEdit="RadTreeView2_NodeEdit"
                    Skin="Vista" >
                    <ContextMenus>
                        <telerik:RadTreeViewContextMenu ID="RootFolderContextMenu" runat="server">
                            <Items>
                                <telerik:RadMenuItem Value="New" Text="New Folder" ></telerik:RadMenuItem>
                            </Items> 
                            <CollapseAnimation Type="none" />            
                        </telerik:RadTreeViewContextMenu>
                        <telerik:RadTreeViewContextMenu ID="ChildFolderContextMenu" runat="server">
                            <Items>
                                <telerik:RadMenuItem Value="New" Text="New Folder" ></telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="Rename" Text="Rename Folder" PostBack="false"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Value="Delete" Text="Delete Folder" ></telerik:RadMenuItem>          
                            </Items>           
                            <CollapseAnimation Type="none" />
                        </telerik:RadTreeViewContextMenu>
                        <telerik:RadTreeViewContextMenu ID="FileContextMenu" runat="server">
                            <Items>
                            </Items>           
                            <CollapseAnimation Type="none" />
                        </telerik:RadTreeViewContextMenu>
                    </ContextMenus>
                </telerik:RadTreeView>          
                <ajaxToolkit:ModalPopupExtender ID="mpeTemplateSave" runat="server"
                                    TargetControlID="btnSave"
                                    BehaviorID="mpeTemplateSaveBhvr"
                                    PopupControlID="pnlTemplateSave"
                                    PopupDragHandleControlID="tblTemplateSave"                                                  
                                    CancelControlID="btnCancel"                               
                                    BackgroundCssClass="ext-el-mask" />

                </ContentTemplate>
                </asp:UpdatePanel>
            </asp:Panel>

    <script type="text/javascript">

    Telerik.Web.UI.Editor.CommandList["btnSave"] = function(commmandName, editor, args) {
                    var mpe = $find('mpeTemplateSaveBhvr');
                    if (mpe)
                        mpe.show();
                }

    function onClientContextMenuShowing(sender, args) {
                    var treeNode = args.get_node();
                    var evt = args.get_domEvent();
                    treeNode.set_selected(true);
                    if (treeNode) {
                        var menu = treeNode.get_contextMenu();
                        if (menu) {
                            menu.set_enabled();
                            alert(menu.get_enabled());
                            menu.show(evt);
                            alert(menu.get_enabled() + "  " + menu.get_visible());
                        }

    }
    </script>


     

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 15 Oct 2009 Link to this post

    Hi Ez,

    Please try setting the z-index of the context menu to some high value:

    <telerik:RadTreeViewContextMenu style="z-index:20000"


    Regards,
    Albert,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top