This is a migrated thread and some comments may be shown as answers.

Collapse on button click

1 Answer 155 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

Yan asked on 24 Mar 2011, 02:33 PM

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 />

<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 />

</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

1 Answer, 1 is accepted

answered on 28 Mar 2011, 11:27 AM

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 />

<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 />

</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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!