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

InsertBefore

methods

Inserts an item into a ContextMenu before the specified referenceItem.

insertBefore

Parameters:itemObject|Array

Target item, specified as a JSON object. Can also handle an array of such objects.

referenceItemString|Element|jQuery

A reference item to insert the new item before

Returns:kendo.ui.ContextMenu

Returns the ContextMenu object to support chaining.

<div id="target">Target</div>
<ul id="context-menu">
    <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>
</ul>
<script>
    // initialize the ContextMenu
    $("#context-menu").kendoContextMenu({
        target: "#target"
    });
    // get a reference to the ContextMenu widget
    var contextMenu = $("#context-menu").data("kendoContextMenu");
    //
    contextMenu.insertBefore(
        [{
            text: "Item 1",
            //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://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.
        }],
        "li:first-child"
    );
</script>