append (item, referenceItem) : PanelBar

Appends an item to the PanelBar.

Example

var panelBar = $("#panelBar").data("kendoPanelBar");
panelBar.append(
    [
        {
            text: "Item 1",
            url: "http://www.kendoui.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: "partialContent.html"               // content URL to load within an item
        },
        {
            text: "Item 4",
            imageUrl: "http://www.kendoui.com/test.jpg",    // item image URL, optional
            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"
        }
    ],
    referenceItem
);

Parameters

item: Selector: 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.
referenceItem: Item: A reference item to append the new item in

Returns: PanelBar Returns the PanelBar object to support chaining.

collapse (element, useAnimation) : PanelBar

Collapses the specified item(s) of a PanelBar.

Example

// access an existing PanelBar instance
var panelBar = $("#panelBar").data("kendoPanelBar");
// collapse the element with ID, "item1"
panelBar.collapse($("#item1"));
// collapse the element with ID, "item2" without visual animations
panelBar.collapse($("#item2"), false);
// collapse all list items that start with ID, "item"
panelBar.collapse($('[id^="item"]'));

Parameters

element: Selector: The PanelBar item(s) to be collapsed, expressed as a string containing a selector expression or represented by a jQuery selector.
useAnimation: Boolean (optional): Temporarily enables (true) or disables (false) any visual animation(s) when collapsing items.

Returns: PanelBar Returns the PanelBar object to support chaining.

enable (element, enable)

Enables (true) or disables (false) the specified item(s) of the PanelBar.

Example

// access an existing PanelBar instance
var panelBar = $("#panelBar").data("kendoPanelBar");
// enable the item of the PanelBar with ID, "item1"
panelBar.enable($("#item1"), true);
// disable the currently selected item of the PanelBar
var item = panelBar.select();
panelBar.enable(item, false);
// disable all list items that start with ID, "item"
panelBar.enable($('[id^="item"]'), false);

Parameters

element: String | Selector: The PanelBar item(s) to be enabled (true) or disabled (false), expressed as a string containing a selector expression or represented by a jQuery selector.
enable: Boolean: The desired state - enabled (true) or disabled (false) - of the target element(s).

expand (element, useAnimation) : PanelBar

Expands the specified item(s) of a PanelBar.

Example

// access an existing PanelBar instance
var panelBar = $("#panelBar").data("kendoPanelBar");
// expand the element with ID, "item1"
panelBar.expand($("#item1"));
// expand the element with ID, "item2" without visual animations
panelBar.expand($("#item2"), false);
// expand all list items that start with ID, "item"
panelBar.expand($('[id^="item"]'));

Parameters

element: Selector: The PanelBar item(s) to be expanded, expressed as a selector.
useAnimation: Boolean (optional): Temporariliy enables (true) or disables (false) any visual animation(s) when expanding items.

Returns: PanelBar Returns the PanelBar object to support chaining.

insertAfter (item, referenceItem)

Inserts a PanelBar item after the specified referenceItem

Example

panelBar.insertAfter(
    [{
        text: "Item 1",
        url: "http://www.kendoui.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: "partialContent.html"            // From where to load the item content
    },
    {
        text: "Item 4",
        imageUrl: "http://www.kendoui.com/test.jpg", // Item image URL, optional.
        expanded: true,                              // item is rendered expanded
        items: [{                                    // Sub item collection.
             text: "Sub Item 1"
        },
        {
             text: "Sub Item 2"
        }]
    },
    {
        text: "Item 5",
        spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
    }],
    referenceItem
);

Parameters

item: Selector: Target item, specified as a JSON object. You can pass item text, content or contentUrl here. Can handle an HTML string or array of such strings or JSON.
referenceItem: Item: A reference item to insert the new item after

insertBefore (item, referenceItem) : PanelBar

Inserts a PanelBar item before the specified referenceItem

Example

panelBar.insertBefore(
    [{
        text: "Item 1",
        url: "http://www.kendoui.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: "partialContent.html"            // From where to load the item content
    },
    {
        text: "Item 4",
        imageUrl: "http://www.kendoui.com/test.jpg", // Item image URL, optional.
        expanded: true,                              // item is rendered expanded
        items: [{                                    // Sub item collection.
             text: "Sub Item 1"
        },
        {
             text: "Sub Item 2"
        }]
    },
    {
        text: "Item 5",
        spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
    }],
    referenceItem
);

Parameters

item: Selector: 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.
referenceItem: Item: A reference item to insert the new item before.

Returns: PanelBar Returns the PanelBar object to support chaining.

reload (element)

Reloads the content of a PanelBar from an AJAX request.

Example

// get a reference to the panel bar
var panelBar = $("#panelBar").data("kendoPanelBar");
// reload the panel basr
panelBar.reload();

Parameters

element: Selector: Target element

remove (element)

Removes the specified PanelBar item(s).

Example

// get a reference to the panel bar
var panelBar = $("#panelBar").data("kendoPanelBar");
// remove Item 1
panelBar.remove("#Item1");

Parameters

element: Selector: Target item selector.

select (element)

Selects the specified item of the PanelBar. If this method is invoked without arguments, it returns the currently selected item.

Example

// access an existing PanelBar instance
var panelBar = $("#panelBar").data("kendoPanelBar");
// select the item with ID, "item1"
panelBar.select("#item1");

Parameters

element: String | Selector: The PanelBar item to be selected, expressed as a string containing a selector expression or represented by a jQuery selector.