Button - Toggle Button

The user can specify as many ToggleStates as needed. This RadButton control has four states. The state changes when the button is clicked.
The user can fully customize the RadButton control when used as CheckBox or RadioButton. Simply add two ToggleState objects to the RadButtonToggleStates collection, and set Selected="true" to one of the ToggleStates. The state having Selected="true" will be applied when the checkbox is checked (Checked="true").
Different text can be used for different ToggleStates. Set the Text property of the RadButtonToggleState object, and the RadButton will have new text when the state is changed. If the ToggleState does not have Text specified, the value of the RadButton's Text property will be set.
By setting the RadButtonToggleState's ImageUrl property, you can show custom image, when the RadButton changes ToggleState. Setting the HoveredImageUrl property will cause a different image to be shown when the mouse is over the control. Width and Height properties must be set in order for the image to be shown.
The ToggleButton could be rendered as a three state checkbox. Set the ToggleType property to "CustomToggle". After that add three <telerik:RadButtonToggleState inner-tags and specify icons for each of them by setting respectively the PrimaryIconCssClass and/or SecondaryIconCssClass properties to one of the following embedded classes: rbToggleCheckbox, rbToggleCheckboxFilled and rbToggleCheckboxChecked. The rbToggleCheckbox class applies to the standard looking empty checkbox element, rbToggleCheckboxFilled will render a filled checkbox element and the rbToggleCheckboxChecked will display a checked checkbox.
The ToggleType property specifies how the ToggleButton will be rendered on the page: as a CheckBox, as a Radio or as a CustomToggle button. If a Radio ToggleType mode is chosen, the developer could also set the GroupName property, which specifies the name of the group that the radio button belongs to. Use this property to specify a grouping of radio buttons to create a mutually exclusive set of controls.
Use the SecondaryIconCssClass property to show the icon of the radio/checkbox elements on the right side.
Note that RadioButton1 (above) and RadioButton2 belong to the GroupName named "Radio" and are self exclusive, regardless of their text and icon layout.
It is possible to use the provided embedded icons when the ToggleType property is set to either CheckBox or Radio. For more information see the Embedded Icons demo which lists all available embedded icons.
This demo shows how to render a CustomToggle button with embedded icons placed on the right side of the control.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <table cellpadding="0" cellspacing="0" width="100%" class="imgBtnTable">
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnVolume" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle"
                        Width="100px" Height="60px" AutoPostBack="false" Skin="Metro">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/volume/mute.png" HoveredImageUrl="images/volume/muteHov.png"
                                Text="Volume: Mute" Selected="true"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/volume/low.png" HoveredImageUrl="images/volume/lowHov.png"
                                Text="Volume: Low"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/volume/medium.png" HoveredImageUrl="images/volume/mediumHov.png"
                                Text="Volume: Medium"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/volume/high.png" HoveredImageUrl="images/volume/highHov.png"
                                Text="Volume: High"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </td>
                <td>The user can specify as many ToggleStates as needed. This RadButton control has
                four states. The state changes when the button is clicked.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnPlayPause" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        Width="58px" Height="59px" AutoPostBack="false" ForeColor="Black" Checked="true" Skin="Metro">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/play/play.png" HoveredImageUrl="images/play/playHov.png"
                                Text="Play" Selected="true"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/play/pause.png" HoveredImageUrl="images/play/pauseHov.png"
                                Text="Pause"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </td>
                <td>The user can fully customize the RadButton control when used as CheckBox or RadioButton.
                Simply add two ToggleState objects to the RadButtonToggleStates collection, and
                set <strong>Selected="true"</strong> to one of the ToggleStates. The state having
                Selected="true" will be applied when the checkbox is checked (Checked="true").
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnYesNo" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        Width="42px" Height="43px" AutoPostBack="false" ForeColor="Black" Checked="true" CssClass="yesNo"
                        HoveredCssClass="yesNoHovered" Skin="Metro">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/yes.png" IsBackgroundImage="true" Text="Yes"
                                Selected="true"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/no.png" IsBackgroundImage="true" Text="No"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </td>
                <td>Different text can be used for different ToggleStates. Set the Text property of
                the RadButtonToggleState object, and the RadButton will have new text when the state
                is changed. If the ToggleState does not have Text specified, the value of the RadButton's
                Text property will be set.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnNextPrev" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle"
                        Width="80px" Height="80px" AutoPostBack="false" ForeColor="Black" Skin="Metro">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/next/next.png" HoveredImageUrl="images/next/nextHov.png"
                                Text="Next" Selected="true"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/next/prev.png" HoveredImageUrl="images/next/prevHov.png"
                                Text="Previous"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </td>
                <td>By setting the RadButtonToggleState's <strong>ImageUrl</strong> property, you can
                show custom image, when the RadButton changes ToggleState. Setting the <strong>HoveredImageUrl</strong>
                    property will cause a different image to be shown when the mouse is over the control.
                <strong>Width</strong> and <strong>Height</strong> properties must be set in order
                for the image to be shown.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="ThreeStateCheckBox" runat="server" ButtonType="ToggleButton"
                        ToggleType="CustomToggle" AutoPostBack="false" BackColor="transparent" Skin="Metro">
                        <ToggleStates>
                            <telerik:RadButtonToggleState Text="Unchecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </td>
                <td>The ToggleButton could be rendered as a three state checkbox. Set the <strong>ToggleType</strong>
                    property to "CustomToggle". After that add three <strong>&lt;telerik:RadButtonToggleState</strong>
                    inner-tags and specify icons for each of them by setting respectively the <strong>PrimaryIconCssClass</strong>
                    and/or <strong>SecondaryIconCssClass</strong> properties to one of the following
                embedded classes: <strong>rbToggleCheckbox</strong>, <strong>rbToggleCheckboxFilled</strong>
                    and <strong>rbToggleCheckboxChecked</strong>. The rbToggleCheckbox class applies
                to the standard looking empty checkbox element, rbToggleCheckboxFilled will render
                a filled checkbox element and the rbToggleCheckboxChecked will display a checked
                checkbox.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                        AutoPostBack="false" BorderWidth="0" BackColor="transparent" GroupName="Radio"
                        Text="RadioButton1" Skin="Metro">
                    </telerik:RadButton>
                </td>
                <td>The <strong>ToggleType</strong> property specifies how the ToggleButton will be
                rendered on the page: as a <strong>CheckBox</strong>, as a <strong>Radio</strong>
                    or as a <strong>CustomToggle</strong> button. If a Radio ToggleType mode is chosen,
                the developer could also set the <strong>GroupName</strong> property, which specifies
                the name of the group that the radio button belongs to. Use this property to specify
                a grouping of radio buttons to create a mutually exclusive set of controls.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                        AutoPostBack="false" BorderWidth="0" BackColor="transparent" GroupName="Radio"
                        Text="RadioButton2" Checked="true" Skin="Metro">
                        <ToggleStates>
                            <telerik:RadButtonToggleState PrimaryIconHeight="0" PrimaryIconWidth="0" SecondaryIconCssClass="rbToggleRadioChecked"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState PrimaryIconHeight="0" PrimaryIconWidth="0" SecondaryIconCssClass="rbToggleRadio"
                                SecondaryIconRight="0"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </td>
                <td>Use the <strong>SecondaryIconCssClass</strong> property to show the icon of the
                radio/checkbox elements on the right side.
                <br />
                    Note that RadioButton1 (above) and RadioButton2 belong to the <strong>GroupName</strong>
                    named "Radio" and are self exclusive, regardless of their text and icon layout.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="BuiltinIconsButton" runat="server" ButtonType="ToggleButton"
                        Style="padding-left: 25px" ToggleType="CheckBox" AutoPostBack="false" Skin="Metro">
                        <ToggleStates>
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbAdd" Text="Add"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbRemove" Text="Remove"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </td>
                <td>It is possible to use the provided embedded icons when the <strong>ToggleType</strong>
                    property is set to either <strong>CheckBox</strong> or <strong>Radio</strong>. For
                more information see the <strong>Embedded Icons</strong> demo which lists all available
                embedded icons.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="BuiltinIconsButton2" runat="server" ButtonType="StandardButton"
                        ToggleType="CustomToggle" AutoPostBack="false" Skin="Metro">
                        <ToggleStates>
                            <telerik:RadButtonToggleState SecondaryIconCssClass="rbOk" Text="OK"></telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState SecondaryIconCssClass="rbCancel" Text="Cancel"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                </td>
                <td>This demo shows how to render a CustomToggle button with embedded icons placed on
                the right side of the control.
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?