Kendo UI Context Menu prototype
A Context Menu prototype/workaround
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="target">
CONTEXT TARGET
</div>
<div id="popup">
<ul id="context">
<li>
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>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
</div>
CSS
html { font: 12px Arial, Helvetica, sans-serif; }
.k-context-menu .k-link
{
padding: 0.4em 2em 0.3em 0.9em;
}
.k-context-menu
{
border: 0;
}
JavaScript
var target = $("#target"),
menu = $("#context")
.addClass("k-context-menu")
.kendoMenu({ orientation: "vertical" })
.data("kendoMenu"),
popup = $("#popup").kendoPopup({
anchor: target,
collision: "fit flip"
}).data("kendoPopup");
target.on("contextmenu", function (e) {
popup.wrapper.hide();
popup.open(e.pageX, e.pageY);
e.preventDefault();
});