New to Kendo UI for jQuery? Start a free 30-day trial

Append

methods

Appends an item to a ContextMenu in the specified referenceItem's sub menu (or the root ContextMenu if not specified).

append

Parameters:itemObject|Array

Item to be appended, specified as a JSON object. An array of objects can also be passed.

Returns:kendo.ui.ContextMenu

Returns the ContextMenu object to support chaining.

<div id="target">Target</div>
<ul id="context-menu"></ul>
<script>
    // initialize the ContextMenu
    $("#context-menu").kendoContextMenu({
        target: "#target"
    });

    // get a reference to already initialized ContextMenu widget
    var contextMenu = $("#context-menu").data("kendoContextMenu");

    contextMenu.append(
        [{
            text: "Item 1",
            cssClass: "myClass",                         // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
            url: "https://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: "https://demos.telerik.com/kendo-ui/content/web/toolbar/todo.png", // Item image URL, optional.
            items: [{                                    // Sub item collection
                 text: "Sub Item 1"
            },
            {
                 text: "Sub Item 2"
            }]
        },
        {
            text: "Item 4",
            spriteCssClass: "mail"                // Item image sprite CSS class, optional.
        }]
    );
</script>
<style>
.k-sprite {
        background-image: url("https://demos.telerik.com/kendo-ui/content/web/toolbar/mail.png");
    }
</style>