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

RadPanelBar inside RadPanelBar

7 Answers 160 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Dmitry
Top achievements
Rank 1
Dmitry asked on 23 Oct 2008, 03:33 AM
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> 

7 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 23 Oct 2008, 06:35 AM
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.
0
Marco
Top achievements
Rank 1
answered on 17 Dec 2008, 11:38 AM
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
0
Paul
Telerik team
answered on 18 Dec 2008, 01:09 PM
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.
0
Rajeev
Top achievements
Rank 1
answered on 28 May 2009, 10:23 AM
I wanted to show Radpanelbar inside another Radpanelbar and then Radpanel Item inside that Radpanelbar
0
Thomas Mittag
Top achievements
Rank 1
answered on 05 Dec 2011, 02:23 PM
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
0
Kate
Telerik team
answered on 05 Dec 2011, 02:41 PM
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
0
Andre Light
Top achievements
Rank 1
answered on 25 Jun 2012, 01:03 AM
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
Tags
PanelBar
Asked by
Dmitry
Top achievements
Rank 1
Answers by
Paul
Telerik team
Marco
Top achievements
Rank 1
Rajeev
Top achievements
Rank 1
Thomas Mittag
Top achievements
Rank 1
Kate
Telerik team
Andre Light
Top achievements
Rank 1
Share this question
or