The RadButton control provides an easy way to fully customize the
look and feel of your check boxes and radio buttons.
Any ButtonType (StandardButton,
LinkButton, SkinnedButton and ToggleButton)
can be turned into a check box, radio, or custom toggle button, by
setting the ToggleType property to a value different
than ButtonToggleType.None.
To get a checkbox, set the ToggleType property to
CheckBox and you will get a button that looks
like a StandardButton, LinkButton or SkinnedButton
but behaves as a check box.
To get a radio button, set the ToggleType to
Radio and you will get a button that behaves
like a radio button, but looks like a StandardButton, LinkButton or SkinnedButton.
The ability to customize every single state of the RadButton, when used as a toggle button, gives
the developer even more power to further enhance their check boxes and radio buttons.
-
Radio Buttons
<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="Radio" ButtonType="StandardButton"
GroupName="StandardButton" AutoPostBack="false">
<ToggleStates>
<telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
<telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>
</ToggleStates>
</telerik:RadButton
-
Checkboxes
<telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" ToggleType="CheckBox" ButtonType="LinkButton"
Checked="true" AutoPostBack="false">
<ToggleStates>
<telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
<telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
</ToggleStates>
</telerik:RadButton>
-
Three-state check box
<telerik:RadButton RenderMode="Lightweight" ID="btnToggle3" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"
AutoPostBack="false">
<ToggleStates>
<telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
<telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"></telerik:RadButtonToggleState>
<telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
CssClass="rbSkinnedButtonChecked"></telerik:RadButtonToggleState>
</ToggleStates>
</telerik:RadButton>