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

InsertBefore

methods

Inserts a PanelBar item before the specified referenceItem

insertBefore

Parameters:itemString|Element|jQuery|Array

Target item, specified as a JSON object. You can pass item text, content or contentUrl here. Can handle an TML string or array of such strings or JSON.

referenceItemString|Element|jQuery

A reference item to insert the new item before.

Returns:kendo.ui.PanelBar

Returns the PanelBar object to support chaining.

<ul id="panelbar">
    <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>
    $("#panelbar").kendoPanelBar();

    var panelBar = $("#panelbar").data("kendoPanelBar");

    panelBar.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 for the content element
        },
        {
            text: "Item 3",
            contentUrl: "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
        },
        {
            text: "Item 4",
            imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
            expanded: true,                              // item is rendered expanded
            items: [{                                    // Sub item collection.
                 text: "Sub Item 1"
            },
            {
                 text: "Sub Item 2"
            }]
        },
        {
            text: "Item 5"
        }],
        "li:last-child"
    );
</script>