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

Append

methods

Appends an item(s) to the PanelBar.

append

Parameters:itemString|Element|jQuery|Array

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

Returns:kendo.ui.PanelBar

Returns the PanelBar object to support chaining.

<ul id="panelbar"></ul>
<script>
    $("#panelbar").kendoPanelBar();

    var panelBar = $("#panelbar").data("kendoPanelBar");
    panelBar.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",
                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",
                // item image sprite CSS class, optional
                spriteCssClass: "imageClass3"
            }
        ]
    );
</script>