New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms ToggleButton Overview

About RadToggleButton for ASP.NET AJAX

When you need the features of a toggle button enhanced with built-in text and image, single click functionality and rich client-side API, the Teleik ASP.NET ToggleButton is the control that can easily fulfill all these requirements. "Dress" it with the set of predefined skins we provide and the buttons on your web forms will have the consistent and appealing look and feel as the rest of the Telerik AJAX controls you use.

RadToggleButton and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Rich client-side functionality
  • Toggle States—you can specify as many ToggleStates as needed
  • Command Support—RadToggleButton has full support for Commands
  • Single click functionality—avoid multiple postbacks to the server
  • Icon—you can make the button more intuitive by placing an Icon next to the text of each state
  • Image—you can use your own images instead of the default button appearance
  • Advanced Skinning—the visual appearance of the Button control can be easily customized through skins
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <div class="demo-container size-wide no-bg">
        <div class="player-main">
            <telerik:RadToggleButton runat="server" ID="PlayBtn" AutoPostBack="false" Width="110px" Height="44px" 
                CssClass="play-button" PressedCssClass="play-button-pressed" HoveredCssClass="play-button-hovered">
                <ToggleStates>
                    <telerik:ButtonToggleState Text="Play">
                        <Image Url="images/Play_Pause_normal.png" HoveredUrl="images/Play_Pause_hover.png" PressedUrl="images/Play_Pause_pressed.png" />
                        <Icon CssClass="play-icon" />    
                    </telerik:ButtonToggleState>
                    <telerik:ButtonToggleState Text="Pause">
                        <Image Url="images/Play_Pause_normal.png" HoveredUrl="images/Play_Pause_hover.png" PressedUrl="images/Play_Pause_pressed.png" />
                        <Icon CssClass="pause-icon" />
                    </telerik:ButtonToggleState>
                </ToggleStates>
            </telerik:RadToggleButton>
            <telerik:RadToggleButton runat="server" ID="VolumeBtn" AutoPostBack="false" Width="44px" Height="44px" CssClass="volume-button">
                <ToggleStates>
                    <telerik:ButtonToggleState>
                        <Image Url="images/Volume_ON_normal.png" HoveredUrl="images/Volume_ON_hover.png" PressedUrl="images/Volume_ON_pressed.png" />
                    </telerik:ButtonToggleState>
                    <telerik:ButtonToggleState>
                        <Image Url="images/Volume_OFF_normal.png" HoveredUrl="images/Volume_OFF_hover.png" PressedUrl="images/Volume_OFF_pressed.png" />
                    </telerik:ButtonToggleState>
                </ToggleStates>
            </telerik:RadToggleButton>
            <telerik:RadToggleButton runat="server" ID="TogglePlaylistBtn" OnClientToggleStateChanged="telerikDemo.togglePlaylist"
                 AutoPostBack="false" Width="134px" Height="44px" CssClass="toggle-playlist-button">
                <ToggleStates>
                    <telerik:ButtonToggleState Text="Show Playlist">
                        <Image Url="images/Playlist_normal.png" HoveredUrl="images/Playlist_hover.png" PressedUrl="images/Playlist_pressed.png" />
                    </telerik:ButtonToggleState>
                    <telerik:ButtonToggleState Text="Hide Playlist" Selected="true">
                        <Image Url="images/Playlist_normal.png" HoveredUrl="images/Playlist_hover.png" PressedUrl="images/Playlist_pressed.png" />
                    </telerik:ButtonToggleState>
                </ToggleStates>
            </telerik:RadToggleButton>
        </div>
        <div class="player-playlist"></div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance