RadPanelBar inside RadPanelBar

8 posts, 0 answers
  1. Dmitry
    Dmitry avatar
    8 posts
    Member since:
    Jul 2008

    Posted 22 Oct 2008 Link to this post

    Hi,
    I use RadPanelBars for the organization of structure of web page.
    RadPanelBars and RadPanelItems are added dinamically.
    Sometimes I need to add RadPanelBars inside another one. But internal RadPanelBars behaves in a different way. They look differently and they are not collapsible.
    Sample code:

     

    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%">  
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Panel 1" Expanded="true">  
                    <Items> 
                        <telerik:RadPanelItem runat="server" Expanded="true">  
                            <ItemTemplate> 
                                some text and controls some text and controls  
                                <br /> 
                                some text and controls some text and controls  
                                <br /> 
                                <telerik:RadPanelBar ID="RadPanelBar2" runat="server" Width="100%">  
                                    <Items> 
                                        <telerik:RadPanelItem runat="server" Text="Sub Panel 1" Expanded="true">  
                                            <Items> 
                                                <telerik:RadPanelItem runat="server" Expanded="true">  
                                                    <ItemTemplate> 
                                                        some text and controls some text and controls  
                                                        <br /> 
                                                        some text and controls some text and controls  
                                                        <br /> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelBar> 
                                some text and controls some text and controls  
                                <br /> 
                                some text and controls some text and controls  
                                <br /> 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 
    </form> 
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 23 Oct 2008 Link to this post

    Hi Dmitry,

    Please find below a sample code snippet that shows the needed approach.

    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
     
        <script type="text/javascript">  
        function onPanelItemClicking(sender, eventArgs)      
        {      
            eventArgs.get_domEvent().stopPropagation();      
        }  
        </script> 
     
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%">  
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Panel 1" Expanded="true">  
                    <Items> 
                        <telerik:RadPanelItem runat="server" Expanded="true">  
                            <ItemTemplate> 
                                some text and controls some text and controls  
                                <br /> 
                                some text and controls some text and controls  
                                <br /> 
                                <telerik:RadPanelBar ID="RadPanelBar2" runat="server" Width="100%" OnClientItemClicking="onPanelItemClicking">  
                                    <Items> 
                                        <telerik:RadPanelItem runat="server" Text="Sub Panel 1" Expanded="true">  
                                            <Items> 
                                                <telerik:RadPanelItem runat="server" Expanded="true">  
                                                    <ItemTemplate> 
                                                        some text and controls some text and controls  
                                                        <br /> 
                                                        some text and controls some text and controls  
                                                        <br /> 
                                                    </ItemTemplate> 
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelBar> 
                                some text and controls some text and controls  
                                <br /> 
                                some text and controls some text and controls  
                                <br /> 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 
    </form> 


    Kind regards,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marco
    Marco avatar
    1 posts
    Member since:
    Dec 2007

    Posted 17 Dec 2008 Link to this post

    Hi Paul,

    I try your hint and it works for the Click Event, but I have an other problem or question!
    If I want to use an other Skin (other then Default) and set the Skin Properties of the RadPanels (Root and Embedded) the Root RadPanel takes the skin but the embedded one not.

    Is there a workaround or solution to do this?

    Best regards
    Marco Fuchs
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 18 Dec 2008 Link to this post

    Hi Marco,

    Unfortunately, you cannot have nested panelbars with different skins. This is by design. When nesting panelbars with different skin the CSS rule from the outer panelbar propagate to the inner one. By the way RadPanelBar supports hierarchy without the need to embed panelbars. Just add more child items to created nested levels.

    Best wishes,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Rajeev
    Rajeev avatar
    5 posts
    Member since:
    Dec 2008

    Posted 28 May 2009 Link to this post

    I wanted to show Radpanelbar inside another Radpanelbar and then Radpanel Item inside that Radpanelbar
  7. Thomas Mittag
    Thomas Mittag avatar
    19 posts
    Member since:
    Jun 2008

    Posted 05 Dec 2011 Link to this post

    Has there been any resolution of this item? I am facing a similar issue, I am binding user controls to a PanelBar dynamically, and some of those user controls contain other RadPanelBars. I have applied the fix above in OnClientClicking and the inner panel items expand and collapse correctly. 
    However, the item headers display in plain orange, even though I have not modified the skin. The skin for all Panel Bars is defined in a Theme. Why do the inner panel bars not show with the correct skin?

    Thanks
    Thomas Mittag
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 05 Dec 2011 Link to this post

    Hello Thomas,

    Unfortunately nesting a RadPanelBar control in another panelbar is not a supported scenario. However, RadPanelBar supports multi hierarchy with  expand and collapse functionality to all items in it and most of the general cases could be achieved with this functionality and some custom CSS to get the desired look.

    Kind regards,
    Kate
    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
  9. Andre Light
    Andre Light avatar
    11 posts
    Member since:
    Apr 2010

    Posted 24 Jun 2012 Link to this post

    Paul's solution worked perfectly for me when nesting a RadPanelBar within the Content Template of another RadPanelBar!

    FYI, I needed to nest because I have a UserControl which contains a RadPanelBar, and then I needed to place that UserControl within another RadPanelBar on some pages.

    Thanks,
    Andre
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017