Collapse on button click

[Yan]

Hello,

Probably a easy one but i dont find anything on forum and live demo

I have a radpanel bar with 2 bar, i would like to click on the button on the first bar and onclick this enabled and select the second one.
This code work but i dont have the collapse animation when i click.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>

        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="MultipleExpandedItems">
            <ExpandAnimation Type="OutQuint" Duration="3000" />
            <Items>

                <telerik:RadPanelItem runat="server" Expanded="True" Selected="True" Text="Step 1">
                    <Items>
                        <telerik:RadPanelItem runat="server" Value="BalanceStep1">
                            <ItemTemplate>
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem runat="server" Expanded="False" Selected="False" Enabled="false" Text="Step 2">
                    <Items>
                        <telerik:RadPanelItem runat="server" Value="BalanceStep1">
                            <ItemTemplate>
                                 hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

            </Items>
            <ExpandAnimation />
        </telerik:RadPanelBar>

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       RadPanelBar1.Items(0).Selected = False
       RadPanelBar1.Items(0).Expanded = False
       RadPanelBar1.Items(1).Enabled = True
       RadPanelBar1.Items(1).Selected = True
       RadPanelBar1.Items(1).Expanded = True
   End Sub

[Helen]

Hi Yan,

Try to do the same without a postback:

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="MultipleExpandedItems">
            <ExpandAnimation Type="OutQuint" Duration="3000" />
            <Items>

                <telerik:RadPanelItem runat="server" Expanded="True" Selected="True" Text="Step 1">
                    <Items>
                        <telerik:RadPanelItem runat="server" Value="BalanceStep1">
                            <ItemTemplate>
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                <input type="button" onclick="testClick()" value="Click"/>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem runat="server" Expanded="False" Selected="False" Enabled="false" Text="Step 2">
                    <Items>
                        <telerik:RadPanelItem runat="server" Value="BalanceStep1">
                            <ItemTemplate>
                                 hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                                hi<br />
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

            </Items>
            <ExpandAnimation Duration="3000" />
            <CollapseAnimation Duration="3000" />
            <ExpandAnimation Duration="3000" />
        </telerik:RadPanelBar>

<script type="text/javascript">

 

       function testClick() {

 

           var panelBar = $find("<%=RadPanelBar1.ClientID %>");

 

           panelBar.get_items().getItem(0).set_selected(false);

           panelBar.get_items().getItem(0).set_expanded(false);

           panelBar.get_items().getItem(1).set_enabled(true);

           panelBar.get_items().getItem(1).set_selected(true);

           panelBar.get_items().getItem(1).set_expanded(true);

 

       }

        
</script>

Best wishes,
Helen
the Telerik team