General Questions for Conversion

[Ashleigh L]

We currently use the JQueryUI accordion (http://api.jqueryui.com/accordion/), and are looking to convert to the Kendo PanelBar. However, there's some functionality in the accordion that we've come to rely on, and I need to see if there are equivalents or workarounds in the PanelBar before we actually switch.

First off, this is the HTML we'll be using:

<ul id="accordion">
    <li id="header_1_header">
        Header 1
        <div id="header_1_accordion">
            CONTENT 1
        </div>
    </li>
    <li id="header_2_header">
        Header 2
        <div id="header_2_accordion">
            CONTENT 2
        </div>
    </li>
    <li id="header_3_header">
        Header 3
        <div id="header_3_accordion">
            CONTENT 3
        </div>
    </li>
    <li id="header_4_header">
        Header 4
        <div id="header_4_accordion">
            CONTENT 4
        </div>
    </li>
</ul>

And this is my first pass at the init:

$('#accordion').kendoPanelBar({
    expandMode: 'single',
    activate: function(e) {
        var header_id = e.item.id;
        var content_id = $('#' + e.item.id).find('div:first').attr('id');

        switch(header_id) {
            case 'header_1_header':
                header1Function();
                break;
            case 'header_4_header':
                header4Function();
                break;
        }

        if (errorExists)
            validateSection('#' + content_id);
    }
});

Our primary use of the accordion functionality is for handling error messages - validating a section at a time, opening the first section w/ an error on attempted save, and clearing the errors for a section when it's closed. 

First off, is there a better way to get the content div than $('#' + e.item.id).find('div:first').attr('id')? In the JQueryUI accordion there are built in functions to get the content (div) based on the parent (li).

Second, is there any functionality built in to the panelbar to get the currently selected section and the newly selected section? For example, if header_4_header was open, and I clicked header_1_header, I'd want to know header_4_accordion as the "old" section, and header_1_accordion as the "new" section. If all we can get is the IDs for the headers (li) that's fine as well.

Finally, is there any way, outside of the init, to get the currently selected panel (the div preferrably, not the li)? This would be for clearing error messages based on the newly-active section - ie. click header_2_header and hide the errors in header_3_accordion.

[Ashleigh L]

FYI I've created a support ticket for this issue, so no response is required to this post.