Kendo-UI Context Menu

Question

We are using kendo context menu in our code.After context menu initialization if we remove the target element and again we added the target to DOM context menu is not working .How to solve this issue.

HTML

<ul id="menu">
   <li>delete</li>       
</ul>
<div class="parent" id="ParentDiv" style="width: 200px; height: 200px;">            
</div>

Script

 $(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');
 $("#menu").kendoContextMenu({
     orientation: "vertical",
     target: ".child",
  });
 $(".parent").empty();
 $(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');

no,we need context menu even after we remove and add the target element — Sindhu, Oct 28 '14 at 13:10
we need to remove and add that div.because div was created and added dynamically in our code — Sindhu, Oct 29 '14 at 06:07

White Rabbit · Answer 1 · 2014-10-30T14:34:03.420

You can create standalone context menu item and then open it on specified anchor. To do it you should use alignToAnchor option and method open with an anchor as first parameter

There is no need to recreate context menu each time you display it with different elements. Just open it with different anchors.

<div id="target">Target</div>
<ul id="context-menu">
    <li id="Item1">Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
<li>Item 2
    <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
// initialize the ContextMenu
$("#context-menu").kendoContextMenu({
    target: "#target",
    alignToAnchor: true
});
// get a reference to the ContextMenu widget
var contextMenu = $("#context-menu").data("kendoContextMenu");
// open the ContextMenu at 100px, 100px
contextMenu.open($('#target'));

Show your code. If you destroying widget as in a question, it can lead to memory leaks, and you need to re-initialize widget each time you add it. So i recommend use standalone widget as in my example. — White Rabbit, Oct 31 '14 at 10:17

OnaBai · Accepted Answer · 2014-10-31T19:21:47.240

It should work if you invoke setOptions and define again the target. Your code would be something like:

$(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');
$("#menu").kendoContextMenu({
    orientation: "vertical",
    target: ".child",
});
$(".parent").empty();
$(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');
// Redefine target
$("#menu").setOptions({target: ".child"});

$(document).ready(function () {
  $(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');
  $("#menu").kendoContextMenu({
    orientation: "vertical",
    target: ".child"
  });
  $("button").on("click", function() {
    $(".parent").empty();
    $(".parent").append('<div><div> <div class="child">item 4</div><div class="child">item 5</div><div class="child">item 6</div></div></div>');
    $("#menu").data("kendoContextMenu").setOptions({target: ".child"});
  });
});

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

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>

  <button id="button" class="k-button">Change</button>
  <ul id="menu">
    <li>delete</li>
  </ul>
  <div class="parent" id="ParentDiv" style="width: 200px; height: 200px;">
  </div>

Kendo-UI Context Menu

2 Answers2