Animation does not work in RadPanelBar

[Nico]

Hi Telerik Team,

I am evaluating the Telerik controls,
I added a RadPanelBar on a aspx page.
It displays a Fully Expanded Panel, and animations are not working, so I presume some (client side) script is not doing its job. How can I resolve that?

Kind regards,
Nico

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadPanelBar
            ID="RadPanelBar1" runat="server"
            Skin="Default2006"
            Width="500"
            ExpandMode="SingleExpandedItem"
            AllowCollapseAllItems="true"
            ExpandAnimation-Duration="300"
            ExpandAnimation-Type="InCubic"
            CollapseAnimation-Duration="150"
            CollapseAnimation-Type="InCubic" >
            <Items>
                <telerik:RadPanelItem Text="Form1">
                    <ItemTemplate>
                        abc<br />
                        def<br />
                        ghi<br />
                    </ItemTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Form2">
                    <ItemTemplate>
                        abc<br />
                        def<br />
                        ghi<br />
                    </ItemTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Form3">
                    <ItemTemplate>
                        abc<br />
                        def<br />
                        ghi<br />
                    </ItemTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Form4">
                    <ItemTemplate>
                        abc<br />
                        def<br />
                        ghi<br />
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>

[Atanas Korchev]

Hello Nico,

The ItemTemplate of a panel item is not part of the collapsible area. To make it so you should use a child item instead. Here is the modified markup which should work as expected:

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Default2006" Width="500"
                ExpandMode="SingleExpandedItem" AllowCollapseAllItems="true" ExpandAnimation-Duration="300"
                ExpandAnimation-Type="InCubic" CollapseAnimation-Duration="150" CollapseAnimation-Type="InCubic">
                <Items>
                    <telerik:RadPanelItem Text="Form1">
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    abc<br />
                                    def<br />
                                    ghi<br />
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Form2">
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    abc<br />
                                    def<br />
                                    ghi<br />
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Form3">
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    abc<br />
                                    def<br />
                                    ghi<br />
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Form4">
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    abc<br />
                                    def<br />
                                    ghi<br />
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>

Regards,
Albert
the Telerik team

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