Expand Mode

[Michael Dunbar]

Hi,

I'm trying to do something I thought would be quite simple and obvious, but it is turning out to be a bit more convoluted than I had initially anticipated.

I have a panel bar and I only want one group expanded at a time. Easy of course with:

ExpandMode="SingleExpandedItem"

Now the bit where it has all got a bit more complicated than I think it should be, or am I doing something daft... I have two levels beneath the group level, so essentially three levels in total. I want to be able to expand and collapse the middle level in the same way the group level item functions. Now, I've read you can't do this with the SingleExpandedItem ExpandMode, so I have went client side as an article quoted as a work around for this issue on the old panelbar.

OnClientItemClicking="CollapseItem"

<script type="text/javascript">
    function CollapseItem(sender, eventArgs) {
        var item = eventArgs.get_item();

        if (item.get_expanded() == true) {
            item.collapse();
            return false;
        }
    }
</script>

This appears to stop any level item collapsing, which confuses me! Have I got my logic in a twist or is there an easier way to achieve this that I have overlooked?

Edit: I tried replacing item.collapse() with item.disable() and this appears to work which indicates to me that the item.collapse() method is broken.

[Michael Dunbar]

Anyone?

[Yana]

Hello Michael,

When you set ExpandMode property of RadPanelBar to SingleExpandedItem, this setting is also applied to the levels beneath the root level. Could you please tell us where did you read that you have to use client-side code? Thanks 

Kind regards,
Yana
the Telerik team

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

[Michael Dunbar]

Hi Yana,

Perhaps I have not explained my issue very clearly. You cannot toggle (expand/collapse) a second level item when using this mode, hence the work around in question. I found it by searching your forums when the panelbar did not function as I initially expected. Although admittedly, and as stated, it was with regards to the old panelbar.

I want only 1 group item open at a time as per the single item mode but I want the user to have control over second level items. Does that make more sense?

Why does the collapse() method not function as anticipated?

Thanks,

Michael

[Paul]

Hi Michael,

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 CollapseItem(sender, eventArgs)
    {
        var item = eventArgs.get_item();
        if (item.get_expanded() == true && item.get_level() != 0)
        {
            item.collapse();
            eventArgs.set_cancel(true);
        }
    }
    </script>

    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="SingleExpandedItem" OnClientItemClicking="CollapseItem">
        <CollapseAnimation Duration="100" Type="None" />
        <Items>
            <telerik:RadPanelItem runat="server" Expanded="True" Text="Root RadPanelItem1">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        <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 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">
                        <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>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
        <ExpandAnimation Duration="100" Type="None" />
    </telerik:RadPanelBar>
</form>

Greetings,
Paul
the Telerik team

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

[Michael Dunbar]

Excellent! Thank you, works a treat.

Quick question, so I understand the code. What does eventArgs.set_cancel(true); do and is this what was preventing the collapse() method from functioning for me?

[Paul]

Hi Michael,

The problem was caused by the return false; statement. In ASP.NET AJAX the API is different. To cancel further actions on "-ing" events (e.g. OnClientItemClicking) you will have to use the set_cancel() method of the argument.

All the best,
Paul
the Telerik team

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