RadToggleButton - Telerik ASP.NET ToggleButton

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 90+ 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
  • DefaultVB.aspx
  • scripts.js
  • styles.css
<%@ Page Language="vb"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
</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>

Find Assistance

Help Us Improve

Was this example helpful?