Full Height PanelBar

[Dave]

Is there any way to achieve a full-height PanelBar with per-group scrolling? Specifically, what I'd like to achieve is to have the space available to the PanelBar be predefined. When the PanelBar starts all the items should be collapsed at the top (as usual). When you open an item, the content space should expand to fill up the entire allocated space, not just what's needed for the content. The other titles should end up at the bottom of the allocated space below the new content. If the content is to large for the space, then a scroll bar should be added inside the content area (not outside over the whole PanelBar - otherwise you have to scroll to get to the other PanelBar headings).

I'm looking for the exact same behavior as in this example for the ASP.NET Ajax PanelBar:
http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/scrolling/defaultcs.aspx

Is this possible with the Kendo PanelBar? 

[John DeVight]

Hi Dave,

How about adding some style attributes to the div that displays the content for each panel?

Here is the HTML:

<ul id="panelBar">

    <li>Item 1

        <div style='height:100px; overflow-x:auto;'>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

        </div>

    </li>

    <li>Item 2

        <div style='height:100px; overflow-x:auto;'>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

            Here is some text</br>

        </div>

    </li>

</ul>

Here is the javascript:

<script type="text/javascript">

  

    $(document).ready(function () {

        $('#panelBar').kendoPanelBar({

            expandMode: "single"

        });

    });

  

</script>

Hope this helps...

Regards,

John DeVight

[Michelle]

I would like to know too!  John's suggestion does not achieve what Dave wanted to do.  The content should size automatically based on available space and not be restricted to 100px always.  100px could be too long or too short depending on how much space the panelBar has and how many panelBar items are defined.

[Dimo]

Hello Michelle,

The discussed behavior is not supported out-of-the-box, but you can pick one of the following techniques:

http://jsfiddle.net/dimodi/m3sSV/
 
http://jsfiddle.net/dimodi/LH2w9/

Regards,
Dimo
Telerik