This example demonstrates how to use the RadButton control as a ToggleButton. Setting
the ButtonType property to ToggleButton will display a richly styled check box on the
page. In case the scenario requires a radio button, the ToggleType property should be set to Radio.
<telerik:RadButton ID="RadButton1" runat="server" ButtonType="ToggleButton" Text="CheckBox">
</telerik:RadButton>
<telerik:RadButton ID="RadButton2" runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="RadioButton">
</telerik:RadButton>
The real power of the ToggleButton functionality lies in the fact that the control can be customized depending on the
current toggle state. Populate the ToggleStates collection with at least two RadButtonToggleState objects, and the properties of the respective toggle state will be applied when the state is the currently selected one. The ToggleState object exposes much of the same properties, the RadButton object has: Text, PrimaryIconUrl, SecondaryIconUrl, ImageUrl, CssClass, etc.
In case you want to keep the "check box" or the "radio button" behavior of the RadButton control, but want to have
customized look when the button is checked and unchecked, you should specify two ToggleState objects, each corresponding
to the checked/unchecked state, and set the ToggleType property to CheckBox or Radio. The following code toggles the text
of a check box:
<telerik:RadButton ID="RadButton3" runat="server" ButtonType="ToggleButton" Checked="true">
<ToggleStates>
<telerik:RadButtonToggleState Text="Checked" Selected="true" />
<telerik:RadButtonToggleState Text="Unchecked" />
</ToggleStates>
</telerik:RadButton>
The ToggleState that is selected (i.e. has Selected="true") is applied when the RadButton is checked. If none of the
states is selected, then the first (at index 0) is considered selected. If both are selected, the value of the Selected
property of the first one is ignored. In case more than two (2) toggle states are added, only the first two are considered,
while the rest are ignored.