New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Expand All Levels of Child Items When Clicking the Root Item

This example shows how to expand all levels of child items when clicking the root item.

<telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" runat="server" Skin="Outlook" OnClientItemClicking="ExpandAllChildren">
    <CollapseAnimation Duration="100" Type="None" />
    <Items>
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                            <Items>
                                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 4">
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 4">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                            <Items>
                                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
    <ExpandAnimation Duration="100" Type="None" />
</telerik:RadPanelBar>
<script type="text/javascript">
    function ExpandAllChildren(sender, args) {
        enumerateChildItems(args.get_item());
    }

    function enumerateChildItems(myitem) {
        for (var i = 0; i < myitem.get_items().get_count(); i++) {
            myitem.get_items().getItem(i).expand()
            enumerateChildItems(myitem.get_items().getItem(i));
        }
    }
</script>
In this article