We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Js errors when combining drag'n'drop with context menu


I have started some tests using a treeview to render a page tree in our admin. I'm using the following code :

@Html.EJ().TreeView("page-tree").TreeViewFields(field => field.Datasource(WebSiteManager.AllContentPages).Id("Id").ParentId("ParentReference").Text("Title").Value("Id")).DragAndDrop(true).DropChild(true).DropSibling(true).ClientSideEvents(s => s.Dropped("itemDropped")).Render()

@Html.EJ().Menu("page-tree-menu").Items(items => {
items.Add().Text("Add new item");
}).OpenOnClick(false).MenuType(MenuType.ContextMenu).ShowBottomLevelArrows(true).ContextTargetId("page-tree").ClientSideEvents(s => s.Click("menuClick").BeforeContextOpen("beforeOpen")).Render()

my test javascript functions look like this (mostly taken from demo site or just console.logs..)

var tabIndex = 1, selectedNode;
function beforeOpen(args) {
var treeViewObj = $("#page-tree").data("ejTreeView");
if (!$(args.target).hasClass("e-text")) {
args.cancel = true;
} else {
selectedNode = args.target;

function menuClick(args) {
if (args.Events.menuText == "Add new item") {
console.log("adding new");
} else if (args.Events.menuText == "Delete") {
} else if (args.Events.menuText == "Edit") {
return false;

function itemDropped(args) {
if (args.dropedElement[0].innerText == args.target.innerText) return false;
console.log("item was dropped...");
return false;

Everything seems to work fine when only enabling drag'n'drop or only the context menu, but as soon as I enable both it seems that right-clicking starts a drag operation, which ends when choosing one of the menu alternatives.

How can I move on from this? Is it possible to use drag and drop together with context menu?

2 Replies

MO Marcus Oldin June 3, 2014 08:01 AM UTC

Sorry forgot the js errors shown in console when activating and clicking on a context menu item while drag'n'drop is enabled on the treeview.

  1. Uncaught TypeError: Cannot read property 'top' of undefined ej.web.all.min.js:1

HP Harikrishnan P Syncfusion Team June 4, 2014 10:55 AM UTC

Hi Marcus,


Thank you for using Syncfusion products.


We have confirmed that the issue “Script error occurs when drag and drop option is enabled in Treeview context menu sample” is a defect and we have logged a defect report. The fix for this issue is expected to be available in our upcoming service pack release, which is expected to be rolled out at the end of this month. We will update this thread once this issue is fixed.



Harikrishnan P

Live Chat Icon For mobile
Up arrow icon