Collapse previously expanded item when clicking on a header item without child items?

[Miao Weibin]

code here:
<telerik:PanelBar ID="PanelBar1" runat="server" ExpandMode="SingleExpandedItem">
    <Items>
        <telerik:RadPanelItem runat="server" Text="Root1" ID="Root1">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Child1OfRoot1"></telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child2OfRoot1"></telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child3OfRoot1"></telerik:RadPanelItem>
            </items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Root2" ID="Root2">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Child1OfRoot2"></telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child2OfRoot2"></telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Child3OfRoot2"></telerik:RadPanelItem>
            </items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" ID="Root3" Text="ExternalLink" NavigateUrl=http://www.google.com" Target="_blank">
        </telerik:RadPanelItem>
    </items>
</telerik:PanelBar>

1, clicking on header item of Root1, child items of Root1 expanded, ok.
2, clicking on header item of "Root3", a new window opens, that's ok.
3, clicking on header item of "Root2", child items of Root2 expaned, ok
but  wait...
do you noticed that Root1 not collapsed?
how can I do ? help.
 

[Paul]

Hello Miao,

You could easily achieve your goal by hooking on the OnClientItemClicking event of the panelbar and use the following JS code:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <script type="text/javascript">
    function collapseRoots(sender, eventArgs)
    {
        var items = sender.get_items();

        if (eventArgs.get_item().get_items().get_count() == 0)
        {   debugger
            for (var i=0; i < items.get_count(); i++)
            {
                items.getItem(i).collapse();
            }
        }
    }

    </script>

    <telerik:RadPanelBar ID="PanelBar1" runat="server" ExpandMode="SingleExpandedItem" OnClientItemClicking="collapseRoots">
        <Items>
            <telerik:RadPanelItem runat="server" Text="Root1" ID="Root1">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child1OfRoot1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child2OfRoot1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child3OfRoot1">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root2" ID="Root2">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child1OfRoot2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child2OfRoot2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child3OfRoot2">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" ID="Root3" Text="ExternalLink" NavigateUrl='http://www.google.com" ' Target="_blank">
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
</form>

All the best,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Miao Weibin]

thanks, telerik team. it did collapse all items, but if I click "Child1OfRoot1", "Root1" also collapsed, I hope it keeps expanded.

[Paul]

Hi Miao,

Here's a modified version of the JS function that should do the trick

<script type="text/javascript">
    function collapseRoots(sender, eventArgs) {
        var items = sender.get_items();
debugger
        if (eventArgs.get_item().get_items().get_count() == 0 && eventArgs.get_item().get_level() == 0)
        {
            for (var i = 0; i < items.get_count(); i++)
            {
                items.getItem(i).collapse();
            }
        }
    }

</script>

Best wishes,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.