ContextMenu on tree node drop disappears immediately

2 posts, 1 answers
  1. Chaitanya
    Chaitanya avatar
    4 posts
    Member since:
    Apr 2008

    Posted 20 Aug 2008 Link to this post

    Hi,

    I need to show a context menu in a tree view when I drag and drop nodes in a tree view. On drop, the context menu should be displayed giving the user a few options as to what he wants to do with the dropped nodes. Depending upon the chosen options, the drop action should be handled.

    I have the following code where I am able to display the context menu, but, it immediately disappears - even though cancelRawEvent has been called.
    $telerik.cancelRawEvent(e);
    Following is the code for the aspx page:
    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HarborSales.Portal.Modules.Tree.Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    5 <html xmlns="http://www.w3.org/1999/xhtml"
    6  
    7 <head runat="server"
    8   <title>Tree drop node context menu</title> 
    9   <telerik:RadScriptBlock runat="server" ID="radScriptBlock"
    10  
    11     <script type="text/javascript"
    12       function showContextMenu(e) 
    13       { 
    14         // alert("Dropping"); 
    15         var contextMenu = $find("<%= RadContextMenu1.ClientID %>"); 
    16         
    17         if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) 
    18         { 
    19             contextMenu.show(e); 
    20         } 
    21  
    22         return $telerik.cancelRawEvent(e); 
    23       } 
    24  
    25       function ClientNodeDropping(sender, eventArgs) 
    26       { 
    27         showContextMenu(eventArgs.get_domEvent()); 
    28       } 
    29  
    30       function ClientNodeDropped(sender, eventArgs) 
    31       { 
    32         // alert("Dropped"); 
    33       } 
    34        
    35     </script> 
    36  
    37   </telerik:RadScriptBlock> 
    38 </head> 
    39  
    40 <body> 
    41   <form id="form1" runat="server"
    42     <asp:ScriptManager ID="ScriptManager1" runat="server"
    43     </asp:ScriptManager> 
    44     <div> 
    45       <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="True" Skin="Vista" OnClientNodeDropping="ClientNodeDropping" OnClientNodeDropped="ClientNodeDropped"
    46         <Nodes> 
    47           <telerik:RadTreeNode runat="server" Checkable="False" Text="Condos"
    48           </telerik:RadTreeNode> 
    49           <telerik:RadTreeNode runat="server" Checkable="False" Text="TownHomes"
    50           </telerik:RadTreeNode> 
    51           <telerik:RadTreeNode runat="server" Checkable="False" Text="Houses"
    52             <Nodes> 
    53               <telerik:RadTreeNode runat="server" Checkable="False" Text="House 1"
    54               </telerik:RadTreeNode> 
    55               <telerik:RadTreeNode runat="server" Checkable="False" Text="House 2"
    56               </telerik:RadTreeNode> 
    57             </Nodes> 
    58           </telerik:RadTreeNode> 
    59         </Nodes> 
    60         <CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation> 
    61         <ExpandAnimation Duration="100"></ExpandAnimation> 
    62       </telerik:RadTreeView> 
    63        
    64       <!-- Context menu --> 
    65       <telerik:RadContextMenu ID="RadContextMenu1" runat="server" Flow="Vertical" Skin="Vista"
    66         <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
    67         <Items> 
    68           <telerik:RadMenuItem runat="server" Text="Move with children"
    69           </telerik:RadMenuItem> 
    70           <telerik:RadMenuItem runat="server" Text="Copy dragged node"
    71           </telerik:RadMenuItem> 
    72           <telerik:RadMenuItem runat="server" Text="Copy with children"
    73           </telerik:RadMenuItem> 
    74         </Items> 
    75       </telerik:RadContextMenu> 
    76     </div> 
    77   </form> 
    78 </body> 
    79 </html> 
    80  
    
    I do not have any event handled at all in the code behind file.
  2. Answer
    Yana
    Admin
    Yana avatar
    4993 posts

    Posted 22 Aug 2008 Link to this post

    Hello Chaitanya,

    Please, edit your showContextMenu(e) function like this:

    function showContextMenu(e) {  
      var contextMenu = $find("<%= RadContextMenu1.ClientID %>");   
      if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {   
        window.setTimeout(function() { contextMenu.show(e) }, 0);   
       }   
    }  


    Regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top