RadPanelBar inside RadPanelBar

[Dmitry]

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>

[Paul]

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.

[Marco]

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

[Paul]

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.

[Rajeev]

I wanted to show Radpanelbar inside another Radpanelbar and then Radpanel Item inside that Radpanelbar

[Thomas Mittag]

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

[Kate]

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

[Andre Light]

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