Dealing with multiple panelBars in a dynamic environment

2 posts, 0 answers
  1. Damon
    Damon avatar
    7 posts
    Member since:
    Dec 2011

    Posted 10 Dec 2011 Link to this post

    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 */
        /* expand/collapse panel */
        $(".triggerItem").click(function (e) {
            var target = this;
            var panelbar = '#' +;
            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 =;
            var target = '#panelbar' + elementId.substring(0, elementId.length - 6) ;
            var panelBar = $( target ), clone = $( target ).clone(true);
   "kendoPanelBar" ).collapse( target + ' k-link' );
            panelBar.replaceWith( clone );
  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 13 Dec 2011 Link to this post

    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:

    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!
Back to Top