select

Triggered when an item of a PanelBar is selected by the user.

Event Data

e.item Element

The selected item of the PanelBar.

Attach select event handler during initialization; detach via unbind()

<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>
    // event handler for select
    var onSelect = function(e) {
        // access the selected item via e.item (HTMLElement)

        // detach select event handler via unbind()
        panelBar.data("kendoPanelBar").unbind("select", onSelect);
    };

    // attach select event handler during initialization
    var panelBar = $("#panelbar").kendoPanelBar({
        select: onSelect
    }).data("kendoPanelBar");
</script>

Attach select event handler via bind(); detach via unbind()

<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();

    // event handler for select
    var onSelect = function(e) {
        // access the selected item via e.item (HTMLElement)

        // detach select event handler via unbind()
        $("#panelbar").data("kendoPanelBar").unbind("select", onSelect);
    };

    // attach select event handler via bind()
    $("#panelbar").data("kendoPanelBar").bind("select", onSelect);
</script>