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>');

Answer 1

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>

Answer 2

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'));