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;
}
Protected Sub Page_Init(sender As Object, e As EventArgs)
RadToggleButton1.ToggleStates(1).Selected = True
End Sub
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>
public void Page_Init(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("SelectState", typeof(int));
dt.Rows.Add(0);
dt.Rows.Add(1);
dt.Rows.Add(2);
RadGrid1.DataSource = dt;
}
}
Public Sub Page_Init(sender As Object, e As System.EventArgs)
If Not IsPostBack Then
Dim dt As New DataTable()
dt.Columns.Add("SelectState", GetType(Integer))
dt.Rows.Add(0)
dt.Rows.Add(1)
dt.Rows.Add(2)
RadGrid1.DataSource = dt
End If
End Sub
The
SelectedToggleStateIndexproperty will not take effect if directly assigned with a value in the markup. TheSelectedToggleStateIndexproperty 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 and SelectedToggleStateIndex 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;
}
Protected Sub Page_Load(sender As Object, e As EventArgs)
Dim selectedToggleStateIndex As Integer = RadToggleButton1.SelectedToggleStateIndex
Dim selectedToggleState As ButtonToggleState = RadToggleButton1.SelectedToggleState
End Sub
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,SelectedToggleStateIndexand the corresponding properties (e.g.,Value,Text,CommandName,CommandArgument) of the selected toggle state from the arguments of theOnToggleStateChangedevent (Example 5).
Example 5: Get SelectedToggleState, SelectedToggleStateIndex, CommandName and CommandArgument of the ToggleButtonStateChangedEventArgs 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);
}
Protected Sub RadToggleButton1_ToggleStateChanged(sender As Object, e As Telerik.Web.UI.ToggleButtonStateChangedEventArgs)
Dim selectedToggleStateIndex As Integer = e.SelectedToggleStateIndex
Dim selectedToggleState As ButtonToggleState = e.SelectedToggleState
Dim commandNameArgument As String = String.Format("CommandName: {0}, CommandArgument: {1}", e.CommandName, e.CommandArgument)
End Sub
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();