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

Context Menu show on TreeView drop event

1 Answer 47 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Gustavo
Top achievements
Rank 1
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="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

Sort by
0
Accepted
Alexander Popov
Telerik team
answered on 01 Jul 2015, 02:00 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Menu
Asked by
Gustavo
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or