Kendo UI for jQuery ContextMenu Overview
The ContextMenu displays hierarchical data as a multi-level menu in a popup.
It provides rich styling for unordered lists of items, and can be used for both navigation and execution of JavaScript commands. You can define and initialize items from HTML or use the API to add and remove items. You can also specify a ContextMenu target along with a filter for multiple targets and an event for making the ContextMenu pop up.
The ContextMenu is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the ContextMenu
You can initialize the ContextMenu by using HTML markup or a JSON data object.
Create the ContextMenu within a
$(document).ready()statement because the component has to be initialized after the DOM is fully loaded.
From HTML
The following example demonstrates how to initialize the ContextMenu by using HTML markup.
<ul id="context-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
$(document).ready(function() {
$("#context-menu").kendoContextMenu();
});
</script>
From JSON
The following example demonstrates how to initialize the ContextMenu by using a JSON data object.
<ul id="context-menu"></ul>
<script>
$(document).ready(function() {
$("#context-menu").kendoContextMenu({
dataSource:
[{
text: "Item 1",
cssClass: "myClass", // (Optional) Add a custom CSS class to the item.
// Added in 2012 Q3 SP1.
url: "https://www.telerik.com" // (Optional) Link a URL if navigation is needed.
},
{
text: "<b>Item 2</b>",
encoded: false, // Allow the use of HTML for item text
content: "text" // content within an item.
},
{
text: "Item 3",
imageUrl: "https://www.telerik.com/test.jpg", // (Optional) An item image URL.
items: [{ // A sub-item collection.
text: "Sub Item 1"
},
{
text: "Sub Item 2"
}]
},
{
text: "Item 4",
spriteCssClass: "imageClass3" // (Optional) An item image sprite CSS class.
}]
})
});
</script>
Basic Configuration
By default, the ContextMenu is created as a child of the <body> element.
<body>
<div id="target">Target</div>
<div id="container1">
<ul id="context-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Container 1
</div>
<div id="container2">
Container 2
</div>
<script>
$("#context-menu").kendoContextMenu({
target: "#target"
});
</script>
</body>
The following example demonstrates how the page markup from the previous example changes after the initialization of the ContextMenu. The component is moved to become a child of the <body> element and its additional markup—the wrapper and the title bar—is generated.
<body>
<div id="target"></div>
<div id="container1">
...
</div>
<div id="container2">
...
</div>
<ul id="context-menu" class="k-widget k-context-menu" data-role="contextmenu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>