This is a migrated thread and some comments may be shown as answers.

Context Menu show on TreeView drop event

1 Answer 226 Views

This is a migrated thread and some comments may be shown as answers.

Gustavo asked on 29 Jun 2015, 02:34 PM

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 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>

</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

Accepted