Edit this page

Context Menu

Kendo UI Context Menu 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. Items can be defined and initialized from HTML, or the API can be used to add and remove items. A ContextMenu target can be specified along with a filter for multiple targets and an event to which the ContextMenu will listen to so it pops up.

Getting Started

Initialize the ContextMenu

Kendo UI ContextMenu can be initialized in two ways:

  • Through HTML markup
  • Through JSON data object

Important
As ContextMenu should be initialized after the DOM is fully loaded, make sure you create it within a $(document).ready() statement.

Initialize ContextMenu using HTML markup

Example
<ul id="context-menu">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<script>
    $(document).ready(function() {
        $("#context-menu").kendoContextMenu();
    });
</script>

Initialize Menu using JSON data object

Example
<ul id="context-menu"></ul>
<script>
    $(document).ready(function() {
        $("#context-menu").kendoContextMenu({
            dataSource:
                [{
                    text: "Item 1",
                    cssClass: "myClass",                         // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
                    url: "http://www.telerik.com"                // Link URL if navigation is needed, optional.
                },
                {
                    text: "<b>Item 2</b>",
                    encoded: false,                              // Allows use of HTML for item text
                    content: "text"                              // content within an item
                },
                {
                    text: "Item 3",
                    imageUrl: "http://www.telerik.com/test.jpg", // Item image URL, optional.
                    items: [{                                    // Sub item collection
                         text: "Sub Item 1"
                    },
                    {
                         text: "Sub Item 2"
                    }]
                },
                {
                    text: "Item 4",
                    spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
                }]
        })
    });
</script>

Configuration

ContextMenu Animations

By default, the ContextMenu uses a slide animation to expand sub-items on a mouse hover event. Animations, along with the animation style and delay, can be customized by using configuration properties. You can also confgure Menu items to open on click instead of on hover, and ContextMenu can also be configured to use a different open event than the default contextmenu (right click).

The example below demonstrates how to change ContextMenu animation and open behavior.

Example
<ul id="context-menu">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<script>
    $("#context-menu").kendoContextMenu({
        animation: {
            open: { effects: "fadeIn" },
            duration: 500
        },
        showOn: "click"
    });
</script>

Dynamic Items

The Kendo UI ContextMenu API provides methods for dynamically adding or removing Menu items.

To add items, provide the new item as a JSON object along with a reference item. A reference item is a target ContextMenu item HTML element that already exists in the ContextMenu. The reference item will be used to determine the placement in the hierarchy of the new item. Any valid jQuery selector can be used to obtain a reference to the target item.

For more information on configuring Menu items, see the Menu API demos.

The example below demonstrates how to add a new root ContextMenu item.

Example
<ul id="context-menu">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<script>
    var contextMenu = $("#context-menu").kendoContextMenu().data("kendoContextMenu");
    contextMenu.insertAfter(
        { text: "New ContextMenu Item" },
        contextMenu.element.children("li:last")
    );
</script>

See Also

Articles on Kendo UI Menu and how-to examples:

Copyright © 2002-2015 Telerik Inc. All rights reserved.