Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Button / Toggle Button

Volume: Mute The user can specify as many ToggleStates as needed. This RadButton control has four states. The state changes when the button is clicked.
Play 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").
Yes 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.
Next 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.
Unchecked 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.
RadioButton1 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.
RadioButton2 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.
Remove 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.

  • ToggleButton


    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 radio button, the ToggleType property should be set to Radio.

    CheckBox:
    <telerik:RadButton ID="RadButton1" runat="server" ButtonType="ToggleButton" Text="CheckBox">
    </telerik:RadButton>
    Radio:
    <telerik:RadButton ID="RadButton1" 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 object, 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, and 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 as 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.


Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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></title>
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .yesNoHovered .rbText
            {
                color: White !important;
            }
            .imgBtnTable td
            {
                border-bottom: 1px solid #eee;
                padding: 5px;
            }
            .imgBtnTable td.center
            {
                text-align: center;
                border-right: 1px solid #eee;
                width: 200px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <table cellpadding="0" cellspacing="0" width="100%" class="imgBtnTable">
            <tr>
                <td class="center">
                    <telerik:RadButton ID="btnVolume" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle"
                        Width="100px" Height="60px" AutoPostBack="false">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="img/volume/mute.png" HoveredImageUrl="img/volume/muteHov.png"
                                Text="Volume: Mute" Selected="true" />
                            <telerik:RadButtonToggleState ImageUrl="img/volume/low.png" HoveredImageUrl="img/volume/lowHov.png"
                                Text="Volume: Low" />
                            <telerik:RadButtonToggleState ImageUrl="img/volume/medium.png" HoveredImageUrl="img/volume/mediumHov.png"
                                Text="Volume: Medium" />
                            <telerik:RadButtonToggleState ImageUrl="img/volume/high.png" HoveredImageUrl="img/volume/highHov.png"
                                Text="Volume: High" />
                        </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 ID="btnPlayPause" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        Width="58px" Height="59px" AutoPostBack="false" ForeColor="Black" Checked="true">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="img/play/play.png" HoveredImageUrl="img/play/playHov.png"
                                Text="Play" Selected="true" />
                            <telerik:RadButtonToggleState ImageUrl="img/play/pause.png" HoveredImageUrl="img/play/pauseHov.png"
                                Text="Pause" />
                        </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 ID="btnYesNo" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        Width="42px" Height="43px" AutoPostBack="false" ForeColor="Black" Checked="true"
                        HoveredCssClass="yesNoHovered">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="img/yes.png" IsBackgroundImage="true" Text="Yes"
                                Selected="true" />
                            <telerik:RadButtonToggleState ImageUrl="img/no.png" IsBackgroundImage="true" Text="No" />
                        </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 ID="btnNextPrev" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle"
                        Width="80px" Height="80px" AutoPostBack="false" ForeColor="Black">
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="img/next/next.png" HoveredImageUrl="img/next/nextHov.png"
                                Text="Next" Selected="true" />
                            <telerik:RadButtonToggleState ImageUrl="img/next/prev.png" HoveredImageUrl="img/next/prevHov.png"
                                Text="Previous" />
                        </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 ID="ThreeStateCheckBox" runat="server" ButtonType="ToggleButton"
                        ToggleType="CustomToggle" AutoPostBack="false" BackColor="transparent">
                        <ToggleStates>
                            <telerik:RadButtonToggleState Text="Unchecked" PrimaryIconCssClass="rbToggleCheckbox" />
                            <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" />
                            <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" />
                        </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 ID="RadButton2" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                        AutoPostBack="false" BorderWidth="0" BackColor="transparent" GroupName="Radio"
                        Text="RadioButton1">
                        <ToggleStates>
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" />
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" />
                        </ToggleStates>
                    </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 ID="RadButton4" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                        AutoPostBack="false" BorderWidth="0" BackColor="transparent" GroupName="Radio"
                        Text="RadioButton2" Checked="true">
                        <ToggleStates>
                            <telerik:RadButtonToggleState PrimaryIconHeight="0" PrimaryIconWidth="0" SecondaryIconCssClass="rbToggleRadioChecked" />
                            <telerik:RadButtonToggleState PrimaryIconHeight="0" PrimaryIconWidth="0" SecondaryIconCssClass="rbToggleRadio"
                                SecondaryIconRight="0" />
                        </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 ID="BuiltinIconsButton" runat="server" ButtonType="ToggleButton"
                        Style="padding-left: 25px" ToggleType="CheckBox" AutoPostBack="false">
                        <ToggleStates>
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbAdd" Text="Add" />
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbRemove" Text="Remove" />
                        </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 ID="BuiltinIconsButton2" runat="server" ButtonType="StandardButton"
                        ToggleType="CustomToggle" AutoPostBack="false">
                        <ToggleStates>
                            <telerik:RadButtonToggleState SecondaryIconCssClass="rbOk" Text="OK" />
                            <telerik:RadButtonToggleState SecondaryIconCssClass="rbCancel" Text="Cancel" />
                        </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>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451