Collapse on button click

2 posts, 0 answers
  1. Yan
    Yan avatar
    5 posts
    Member since:
    Feb 2011

    Posted 24 Mar 2011 Link to this post

    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
  2. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 28 Mar 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top