Context Menu show on TreeView drop event

2 posts, 1 answers
  1. Gustavo
    Gustavo avatar
    23 posts
    Member since:
    Apr 2012

    Posted 29 Jun 2015 Link to this post

    Hi, I'm trying to open a context menu on TreeView drop event, but the code below is not working.


    <!DOCTYPE html>
    <html lang="en" style="height: 100%">
        <link rel="stylesheet" href="app.css" />
    <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 id="center-pane">
                <div class="pane-content">
                    <ul  id="menu">
                        <li>Linear Gauge</li>
                        <li>Radial Gauge</li>

    TypeScript File:

    $(function () {
    function InitSplittedPanel() {
            panes: [
                { collapsible: true, size: "200px" },
                { collapsible: false }
    function InitTreeView() {
            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
    function InitContextMenu() {
            orientation: "vertical",
            target: "#treeviewTags",
            showOn: "drop",
            animation: {
                open: { effects: "fadeIn" },
                duration: 500
            select: function (e) {
                // Do something on select


  2. Answer
    Alexander Popov
    Alexander Popov avatar
    1411 posts

    Posted 01 Jul 2015 Link to this post

    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.

    Alexander Popov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top