Select State
This help article showcases how to operate with the toggle states of RadToggleButton on the server-side/client-side.
Select Toggle State Server-Side
To select a particular toggle state of RadToggleButton you should set the Selected
property of the target toggle state to true
.
Example 1: Select a ButtonToggleState from the markup.
<telerik:RadToggleButton runat="server" ID="RadToggleButton1">
<ToggleStates>
<telerik:ButtonToggleState Text="State 1">
</telerik:ButtonToggleState>
<telerik:ButtonToggleState Text="State 2" Selected="true">
</telerik:ButtonToggleState>
<telerik:ButtonToggleState Text="State 3">
</telerik:ButtonToggleState>
</ToggleStates>
</telerik:RadToggleButton>
Example 2: Select a ButtonToggleState from the code behind.
protected void Page_Init(object sender, EventArgs e)
{
RadToggleButton1.ToggleStates[1].Selected = true;
}
For a data-bound scenario you can use the SelectedToggleStateIndex
of the control (Example 3).
Example 3: Databind the selected state of a RadToggleButton.
<telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" Width="150px">
<MasterTableView AutoGenerateColumns="false">
<Columns>
<telerik:GridTemplateColumn DataField="SelectToggleStateField" HeaderText="SelectToggleStateField">
<ItemTemplate>
<telerik:RadToggleButton runat="server" ID="RadToggleButton1" SelectedToggleStateIndex='<%#Eval("SelectState") %>'>
<ToggleStates>
<telerik:ButtonToggleState Text="State 1">
</telerik:ButtonToggleState>
<telerik:ButtonToggleState Text="State 2">
</telerik:ButtonToggleState>
<telerik:ButtonToggleState Text="State 3">
</telerik:ButtonToggleState>
</ToggleStates>
</telerik:RadToggleButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
The
SelectedToggleStateIndex
property will not take effect if directly assigned with a value in the markup. TheSelectedToggleStateIndex
property takes effect only when set from the code behind or integrated in a data-bound scenario in the markup (Example 3).
Get Selected Toggle State Server-Side
To get the selected toggle state and selected toggle state index you can use the SelectedToggleState
and SelectedToggleStateIndex
properties of the RadToggleButton control.
Example 4: Get
SelectedToggleState
andSelectedToggleStateIndex
of RadToggleButton from the code behind.
<telerik:RadToggleButton runat="server" ID="RadToggleButton1" OnToggleStateChanged="RadToggleButton1_ToggleStateChanged">
<ToggleStates>
<telerik:ButtonToggleState Text="State 1" CommandName="command1" CommandArgument="argument1" Value="value1">
</telerik:ButtonToggleState>
<telerik:ButtonToggleState Text="State 2" CommandName="comamnd2" CommandArgument="argument2" Value="value2" Selected="true">
</telerik:ButtonToggleState>
<telerik:ButtonToggleState Text="State 3" CommandName="command3" CommandArgument="argument3" Value="value3">
</telerik:ButtonToggleState>
</ToggleStates>
</telerik:RadToggleButton>
protected void Page_Load(object sender, EventArgs e)
{
int selectedToggleStateIndex = RadToggleButton1.SelectedToggleStateIndex;
ButtonToggleState selectedToggleState = RadToggleButton1.SelectedToggleState;
}
The selected toggle state reference provides all its properties (e.g., Value
, Text
, CommandName
) and inner tags (Icon
and Image
).
You can also get the
SelectedToggleState
,SelectedToggleStateIndex
and the corresponding properties (e.g.,Value
,Text
,CommandName
,CommandArgument
) of the selected toggle state from the arguments of theOnToggleStateChanged
event (Example 5).
Example 5: Get
SelectedToggleState
,SelectedToggleStateIndex
,CommandName
andCommandArgument
of theToggleButtonStateChangedEventArgs
event arguments.
protected void RadToggleButton1_ToggleStateChanged(object sender, Telerik.Web.UI.ToggleButtonStateChangedEventArgs e)
{
int selectedToggleStateIndex = e.SelectedToggleStateIndex;
ButtonToggleState selectedToggleState = e.SelectedToggleState;
string commandNameArgument = string.Format("CommandName: {0}, CommandArgument: {1}", e.CommandName, e.CommandArgument);
}
Select Toggle State Client-Side
You can select a particular toggle state of RadToggleButton by passing the corresponding index in the set_selectedToggleStateIndex()
method of the control.
Example 6: Select a toggle state on the client-side.
var toggleButton = $find("<%=RadToggleButton1.ClientID%>");
toggleButton.set_selectedToggleStateIndex(0);
Get Selected Toggle State Client-Side
You can obtain the toggle states, selected toggle state and selected toggle state index of RadToggleButton through the get_toggleStates()
, get_selectedToggleState()
, and get_selectedToggleStateIndex()
methods.
Example 7: Reference toggle states, selected toggle state and selected toggle state index of RadToggleButton through its client-side API.
var toggleButton = $find("<%=RadToggleButton1.ClientID%>");
var toggleStates = toggleButton.get_toggleStates();
var selectedToggleState = toggleButton.get_selectedToggleState();
var selectedToggleStateIndex = toggleButton.get_selectedToggleStateIndex();