Dealing with multiple panelBars in a dynamic environment

[Damon]

So far these have been FANTASTIC to work with. 

I have two questions.
1) As you can see in the code I currently have 11 panelBars.  Each panel bar is located in its own tab.  When I click on a section it expands and collapses as expected.  But, now I wanted to add in a Toggle to Collapse/Expand all the sections in the current panel.
So the ID of the element I click to do this is id="1-panel" etc.  I can then parse it to figure out which panel I am dealing with.

After that I get lost.  I looked at the example in the download and just can't seem to make it work.  I stepped through the code and there were no errors. 

Can you help point me to what I am doing wrong?

2) As I stated I am working on a dynamic project.  I have a php file where I define my tabs, sections, and controls.  I can build out the system with this one file.   But, the issue I am struggling with is how to dynamically add the script.  I cannot just add it to the html page generated.  WP doesn't like that.  Is it possible to simple call a Jquery function that will initiate the new panel without having to go in and actually add the panel code?

Thanks a million for your help!

/* Initialize panel bars */

 

    $("#panelbar1").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar2").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar3").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar4").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar5").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar6").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar7").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar8").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar9").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar10").kendoPanelBar().data("kendoPanelBar");

    $("#panelbar11").kendoPanelBar().data("kendoPanelBar");

     

    /* expand/collapse panel */

    $(".triggerItem").click(function (e) {

        var target = this;

        var panelbar = '#' + target.element.context.id;

        var item = $( panelbar ).select();

        if (item.hasClass("k-state-active")) {

            $( panelBar ).collapse(item);

        } else {

            $( panelBar ).expand(item);

        }

    });

     // Collapse all the sections in the panel

    $('.p-collapse').click(function (e) {

        var elementId = this.id;

        var target = '#panelbar' + elementId.substring(0, elementId.length - 6) ;

        var panelBar = $( target ), clone = $( target ).clone(true);

         

        panelBar.data( "kendoPanelBar" ).collapse( target + ' k-link' );

        panelBar.replaceWith( clone );

        $(target).kendoPanelBar();

    });

[Kamen Bundev]

Hi Damon,

1. You can pass multiple elements to the expand/collapse() methods and they will manage. Something like this will collapse all expanded items in a PanelBar, no need to iterate them:
$("#panelbar3").data("kendoPanelBar").collapse($("#panelbar3").find(".k-state-active"));

2. The Kendo TabStrip supports ajax loaded tab contents, you can load external html files and any scripts in them will initialize as needed (loaded contents are also cached, so they won't load twice unless you use the reload() method. Maybe this will help you.

All the best,
Kamen Bundev
the Telerik team