Hi,
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");
items.Add().Text("Delete");
items.Add().Text("Edit");
}).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;
treeViewObj.selectNode(selectedNode);
}
}
function menuClick(args) {
if (args.Events.menuText == "Add new item") {
console.log("adding new");
} else if (args.Events.menuText == "Delete") {
console.log("Deleting");
} else if (args.Events.menuText == "Edit") {
console.log("Editing");
}
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?
