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

ContextMenu on tree node drop disappears immediately

1 Answer 77 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Chaitanya
Top achievements
Rank 1
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

Sort by
0
Accepted
Yana
Telerik team
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.
Tags
Menu
Asked by
Chaitanya
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or