Hi, I'm trying to open a context menu on TreeView drop event, but the code below is not working.
HTML:
<!DOCTYPE html> <html lang="en" style="height: 100%"><head> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" /> <link rel="stylesheet" href="app.css" /></head><body style="height: 100%"> <script src="Scripts/jquery-2.1.4.js"></script> <script src="Scripts/jquery-ui-1.11.4.js"></script> <script src="Scripts/typings/KendoUI/kendo.all.min.js"></script> <script src="app.js"></script> <div id="splPanel" style="height: 98% "> <div id="left-pane"> <div class="pane-content"> <div id="treeviewTags" style="height: 100%"></div> </div> </div> <div id="center-pane"> <div class="pane-content"> <ul id="menu"> <li>Value</li> <li>Trend</li> <li>Linear Gauge</li> <li>Radial Gauge</li> </ul> </div> </div> </div></body></html>TypeScript File:
$(function () {
InitSplittedPanel();
InitTreeView();
InitContextMenu();
});
function InitSplittedPanel() {
<kendo.ui.Splitter>$("#splPanel").kendoSplitter({
panes: [
{ collapsible: true, size: "200px" },
{ collapsible: false }
]
}).data("kendoSplitter");
}
function InitTreeView() {
<kendo.ui.TreeView>$("#treeviewTags").kendoTreeView({
dragAndDrop: true,
dataSource: [
{
text: "Automation", imageUrl: "Images/folder-32.png", expanded: true, items: [
{ text: "Temperature_Adm", imageUrl: "Images/tag-icon.png" },
{ text: "Temperature_Dev", imageUrl: "Images/tag-icon.png" },
{ text: "Temperature_TI", imageUrl: "Images/tag-icon.png" }
]
}
],
drag: onDrag,
drop: onDrop
}).data("kendoTreeView");
}
function InitContextMenu() {
<kendo.ui.ContextMenu>$("#menu").kendoContextMenu({
orientation: "vertical",
target: "#treeviewTags",
showOn: "drop",
animation: {
open: { effects: "fadeIn" },
duration: 500
},
select: function (e) {
// Do something on select
}
}).data("kendoContextMenu");
}
Thanks!
1 Answer, 1 is accepted
0
Accepted
Hi Gustavo,
This could be achieve by getting the dragged item's coordinates, then manually opening the ContextMenu once the drop event is triggered. Here is a small example illustrating the approach.
Regards,
Alexander Popov
Telerik
This could be achieve by getting the dragged item's coordinates, then manually opening the ContextMenu once the drop event is triggered. Here is a small example illustrating the approach.
Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!