setting 100% height for MultipleExpandedItems expandmode

2 posts, 0 answers
  1. mirang
    mirang avatar
    115 posts
    Member since:
    Aug 2010

    Posted 04 Apr 2012 Link to this post

    is it possible to set 100% height on the panelbar for MultipleExpandedItems. I want a UI style in which i have a panelbar occupying 100% height with multipleexpandeditems mode. There can be 2-3 panelitems inside that and inside each panelitem there would be a treeview control which should also occupy 100% height of that panelitem. In such a way that scrollbars of treeview are visible and not of the panelitem. I tried but somehow 100% was not working. Is this a known limitation or any workarounds exists?
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 05 Apr 2012 Link to this post

    Hi Mirang,

    Setting Height="100%" can be effectively combined with ExpandMode="FullExpandedItem". Setting ExpandMode="MultipleExpandedItems" with Height="100%" will not cause RadPanelBar to expand fully.
    <div style="height: 700px; border: 1px solid red">
           <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Height="100%" ExpandMode="FullExpandedItem" >
               <Items>
                   <telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">
                       <Items>
                           <telerik:RadPanelItem Text="RadMenu">
                           </telerik:RadPanelItem>
                           <telerik:RadPanelItem Text="RadTabStrip">
                           </telerik:RadPanelItem>
                           <telerik:RadPanelItem Text="RadPanelBar">
                           </telerik:RadPanelItem>
                           <telerik:RadPanelItem Text="RadTreeView">
                           </telerik:RadPanelItem>
                       </Items>
                   </telerik:RadPanelItem>
                   <telerik:RadPanelItem Text="WinForms controls">
                       <Items>
                           <telerik:RadPanelItem Text="RadMenustrip">
                           </telerik:RadPanelItem>
                           <telerik:RadPanelItem Text="RadTabStrip">
                           </telerik:RadPanelItem>
                           <telerik:RadPanelItem Text="RadToolStrip">
                           </telerik:RadPanelItem>
                       </Items>
                   </telerik:RadPanelItem>
                   <telerik:RadPanelItem Text="Other projects">
                       <Items>
                           <telerik:RadPanelItem Text="SiteFinity">
                           </telerik:RadPanelItem>
                           <telerik:RadPanelItem Text="Reporting">
                           </telerik:RadPanelItem>
                           <telerik:RadPanelItem Text="RadAjax">
                           </telerik:RadPanelItem>
                       </Items>
                   </telerik:RadPanelItem>
               </Items>
           </telerik:RadPanelBar>
       </div>

    If you can send us your markup or an image of the desired appearance we will try to find a workaround.

    All the best,
    Peter
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top