This is a migrated thread and some comments may be shown as answers.

Dealing with multiple panelBars in a dynamic environment

1 Answer 324 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Damon
Top achievements
Rank 1
Damon asked on 10 Dec 2011, 10:33 PM
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();
    });

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 13 Dec 2011, 12:56 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
PanelBar
Asked by
Damon
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or