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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





116503 Jun 3,2014 07:57 AM UTC Jun 4,2014 10:55 AM UTC ASP.NET MVC 2
Tags: TreeView
Marcus Oldin
Asked On June 3, 2014 07:57 AM UTC


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?

Marcus Oldin
Replied On 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

Harikrishnan P [Syncfusion]
Replied On 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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon