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!