This is a migrated thread and some comments may be shown as answers.

ContextMenu on tree node drop disappears immediately

1 Answer 82 Views

This is a migrated thread and some comments may be shown as answers.

Chaitanya asked on 20 Aug 2008, 11:12 AM

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:



    
    
        
            
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HarborSales.Portal.Modules.Tree.Default" %> 
        
        
            
             
        
        
            
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
        
            
            <!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"> 
        
        
            
              <title>Tree drop node context menu</title> 
        
        
            
              <telerik:RadScriptBlock runat="server" ID="radScriptBlock"> 
        
        
            
             
        
        
            
                <script type="text/javascript"> 
        
        
            
                  function showContextMenu(e) 
        
        
            
                  { 
        
        
            
                    // alert("Dropping"); 
        
        
            
                    var contextMenu = $find("<%= RadContextMenu1.ClientID %>"); 
        
        
            
                    
        
        
            
                    if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) 
        
        
            
                    { 
        
        
            
                        contextMenu.show(e); 
        
        
            
                    } 
        
        
            
             
        
        
            
                    return $telerik.cancelRawEvent(e); 
        
        
            
                  } 
        
        
            
             
        
        
            
                  function ClientNodeDropping(sender, eventArgs) 
        
        
            
                  { 
        
        
            
                    showContextMenu(eventArgs.get_domEvent()); 
        
        
            
                  } 
        
        
            
             
        
        
            
                  function ClientNodeDropped(sender, eventArgs) 
        
        
            
                  { 
        
        
            
                    // alert("Dropped"); 
        
        
            
                  } 
        
        
            
                   
        
        
            
                </script> 
        
        
            
             
        
        
            
              </telerik:RadScriptBlock> 
        
        
            
            </head> 
        
        
            
             
        
        
            
            <body> 
        
        
            
              <form id="form1" runat="server"> 
        
        
            
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
        
            
                </asp:ScriptManager> 
        
        
            
                <div> 
        
        
            
                  <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="True" Skin="Vista" OnClientNodeDropping="ClientNodeDropping" OnClientNodeDropped="ClientNodeDropped"> 
        
        
            
                    <Nodes> 
        
        
            
                      <telerik:RadTreeNode runat="server" Checkable="False" Text="Condos"> 
        
        
            
                      </telerik:RadTreeNode> 
        
        
            
                      <telerik:RadTreeNode runat="server" Checkable="False" Text="TownHomes"> 
        
        
            
                      </telerik:RadTreeNode> 
        
        
            
                      <telerik:RadTreeNode runat="server" Checkable="False" Text="Houses"> 
        
        
            
                        <Nodes> 
        
        
            
                          <telerik:RadTreeNode runat="server" Checkable="False" Text="House 1"> 
        
        
            
                          </telerik:RadTreeNode> 
        
        
            
                          <telerik:RadTreeNode runat="server" Checkable="False" Text="House 2"> 
        
        
            
                          </telerik:RadTreeNode> 
        
        
            
                        </Nodes> 
        
        
            
                      </telerik:RadTreeNode> 
        
        
            
                    </Nodes> 
        
        
            
                    <CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation> 
        
        
            
                    <ExpandAnimation Duration="100"></ExpandAnimation> 
        
        
            
                  </telerik:RadTreeView> 
        
        
            
                   
        
        
            
                  <!-- Context menu --> 
        
        
            
                  <telerik:RadContextMenu ID="RadContextMenu1" runat="server" Flow="Vertical" Skin="Vista"> 
        
        
            
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
        
            
                    <Items> 
        
        
            
                      <telerik:RadMenuItem runat="server" Text="Move with children"> 
        
        
            
                      </telerik:RadMenuItem> 
        
        
            
                      <telerik:RadMenuItem runat="server" Text="Copy dragged node"> 
        
        
            
                      </telerik:RadMenuItem> 
        
        
            
                      <telerik:RadMenuItem runat="server" Text="Copy with children"> 
        
        
            
                      </telerik:RadMenuItem> 
        
        
            
                    </Items> 
        
        
            
                  </telerik:RadContextMenu> 
        
        
            
                </div> 
        
        
            
              </form> 
        
        
            
            </body> 
        
        
            
            </html>

I do not have any event handled at all in the code behind file.

1 Answer, 1 is accepted

Accepted

answered on 22 Aug 2008, 02:55 PM

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.