Button

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadButton - Telerik's ASP.NET Button







RadButton Settings









tlrk.it/13hzkgR To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/13hzkgR

About RadButton for ASP.NET AJAX

When you need the features of the standard asp Button, LinkButton and ImageButton controls enhanced with built-in text and images, toggle and split button modes and rich client side API, Teleik’s ASP.NET Button 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.

RadButton and 80+ 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.

Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Button demo, you can use the following path to find it in the sample website application:
button/examples/overview

Key Features

  • Rich client-side functionality
  • Command Support - RadButton has full support for Commands
  • Icons - You can make the button more intuitive by placing an Icon next to its text
  • ImageButton - The user can easily place an image on the control
  • Customizable ToggleButton - RadButton can be used as a check box or radio button
  • Advanced Skinning - The visual appearance of the Button control can be easily customized through skins

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Button.Overview.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Button/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>
    <title>ASP.NET AJAX button examples | RadButton control by Telerik</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="QsfSkinManager" runat="server" ShowChooser="true" />
     <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All"
          ControlsToSkip="Buttons, Zone" EnableRoundedCorners="false" />
     <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
          <table cellspacing="0" cellpadding="0">
               <tr>
                    <td style="width: 300px; vertical-align: top;">
                         <telerik:RadButton ID="btnStandard" runat="server" OnClick="btn_Click" OnClientClicking="OnClientClicking"
                              Text="Standard Button" GroupName="GroupName1">
                         </telerik:RadButton>
                         <br />
                         <br />
                         <telerik:RadButton ID="btnIcon" runat="server" OnClick="btn_Click" OnClientClicking="OnClientClicking"
                              Text="Standard Button With Icon" GroupName="GroupName1">
                              <Icon PrimaryIconCssClass="rbCart" PrimaryIconLeft="5px"></Icon>
                         </telerik:RadButton>
                         <br />
                         <br />
                         <telerik:RadButton ID="btnIcons" runat="server" OnClick="btn_Click" OnClientClicking="OnClientClicking"
                              Text="Standard Button With Two Icons" GroupName="GroupName1">
                              <Icon PrimaryIconCssClass="rbNext" PrimaryIconTop="4px" PrimaryIconLeft="7px"
                                   SecondaryIconTop="4px" SecondaryIconRight="7px" SecondaryIconCssClass="rbPrevious"></Icon>
                         </telerik:RadButton>
                         <br />
                         <br />
                         <asp:Label ID="lblButtonClickMessage" runat="server" EnableViewState="false"></asp:Label>
                         <telerik:RadWindow VisibleOnPageLoad="false" runat="server" Behaviors="Maximize,Close,Move"
                              ID="RadWindow1" VisibleStatusbar="false" Width="700px" Modal="true" Height="500px">
                         </telerik:RadWindow>
                    </td>
                    <td style="padding: 0 0 0 8px; vertical-align: top;" id="decorationZoneElement">
                         <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="RadButton Settings"
                              Expanded="true" Style="text-align: left;" HorizontalAlign="Right" Width="520px">
                              <div style="padding: 8px; float: left;">
                                   <label for="type">
                                        Change Button Type:</label>
                                   <asp:Label ID="lblEditModes" runat="server" EnableViewState="false"></asp:Label>
                                   <asp:RadioButtonList OnSelectedIndexChanged="ChangeButtonType_SelectedIndexChanged"
                                        RepeatDirection="Vertical" Width="150px" CellPadding="0" CellSpacing="0" CssClass="text"
                                        ID="rblChangeButtonType" runat="server" AutoPostBack="True">
                                        <asp:ListItem Value="StandardButton" Selected="True">Standard Button</asp:ListItem>
                                        <asp:ListItem Value="LinkButton">Link Button</asp:ListItem>
                                        <asp:ListItem Value="ToggleButton">Toggle Button</asp:ListItem>
                                        <asp:ListItem Value="ImageButton">Image Button</asp:ListItem>
                                        <asp:ListItem Value="SkinnedButton">Skinned Button</asp:ListItem>
                                   </asp:RadioButtonList>
                              </div>
                              <div style="padding: 8px 50px; float: left">
                                        <label for="toggletype">
                                             ToggleType:</label>
                                        <asp:RadioButtonList OnSelectedIndexChanged="ChangeToggleType_SelectedIndexChanged"
                                             RepeatDirection="Vertical" Width="190px" CellPadding="0" CellSpacing="0" CssClass="text"
                                             ID="rblChangeToggleType" runat="server" AutoPostBack="True">
                                             <asp:ListItem Value="None" Selected="True">None</asp:ListItem>
                                             <asp:ListItem Value="CheckBox">CheckBox</asp:ListItem>
                                             <asp:ListItem Value="RadioButton">RadioButton</asp:ListItem>
                                             <asp:ListItem Value="CustomToggleButton">Custom ToggleButton</asp:ListItem>
                                        </asp:RadioButtonList>
                              </div>
                              <div style="clear: both; height: 20px;">
                              </div>
                              <div style="padding: 8px;">
                                   <asp:Panel ID="CommonProperties" runat="server" Height="80px">
                                        <label for="properties" style="display: block; clear: both; padding-bottom: 10px;">
                                             Common Button Properties:</label>
                                        <div style="float: left; margin-right: 65px;">
                                             <label for="postback">
                                                  AutoPostBack</label>
                                             <asp:RadioButtonList RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0"
                                                  ID="rblAutoPostBack" OnSelectedIndexChanged="rblAutoPostBack_SelectedIndexChanged"
                                                  runat="server" AutoPostBack="True">
                                                  <asp:ListItem Value="True" Selected="True">True</asp:ListItem>
                                                  <asp:ListItem Value="False">False</asp:ListItem>
                                             </asp:RadioButtonList>
                                        </div>
                                        <div style="padding-bottom: 12px; width: 300px; float: left;">
                                             <label for="text">
                                                  Text</label>
                                             <div>
                                                  <asp:TextBox ID="txtStandardButtonText" runat="server" Style="width: 180px;">Set a new button name</asp:TextBox>
                                                  <telerik:RadButton ID="btnSetText" runat="server" CssClass="ffbutton" OnClick="SetText"
                                                       Text="Set Text">
                                                  </telerik:RadButton>
                                             </div>
                                        </div>
                                   </asp:Panel>
                                   <br />
                                   <asp:Panel ID="pnlLinkButton" Visible="false" runat="server">
                                        <strong style="display: block; padding: 10px 0;">Specific Properties for Link Button:</strong>
                                        <div style="padding-bottom: 8px;">
                                             <strong>NavigateUrl</strong>
                                             <asp:TextBox ID="txtNavigateUrl" runat="server" Style="color: #002060; width: 150px;"></asp:TextBox>
                                             <div>
                                                  Enter a URL, e.g. http://www.telerik.com
                                             </div>
                                             <asp:RegularExpressionValidator ForeColor="Red" Style="display: block; padding: 5px 0"
                                                  ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&amp;=]*)?" runat="server"
                                                  SetFocusOnError="true" ID="regNavaigateUrl" ControlToValidate="txtNavigateUrl"
                                                  ValidationGroup="UrlVG" ErrorMessage="Valid URL should start with <strong>http://</strong>"></asp:RegularExpressionValidator>
                                             <telerik:RadButton ID="btnSetNavigateURL" runat="server" OnClick="SetNavigateUrl"
                                                  Text="Set Navigate URL" ValidationGroup="UrlVG">
                                             </telerik:RadButton>
                                        </div>
                                        <div style="padding-bottom: 8px;">
                                             <strong>Target</strong>
                                             <div style="font-style: italic">
                                                  For the purpose of the demo the target attribute is set to _blank.
                                             </div>
                                        </div>
                                   </asp:Panel>
                                   <asp:Panel ID="pnlStandardButton" Visible="true" runat="server">
                                        <label for="properties">
                                             Specific Properties for Standard Button:</label><br />
                                        <div style="padding: 10px;">
                                             <asp:CheckBox Text="UseSubmitBehavior" ID="cbUseSubmitBehavior" OnCheckedChanged="cbUseSubmitBehavior_CheckedChanged"
                                                  Checked="true" AutoPostBack="true" runat="server" Height="25px" Style="display: block;"></asp:CheckBox>
                                             <asp:CheckBox Text="EnableBrowserButtonStyle" ID="cbEnableBrowserButtonStyles" OnCheckedChanged="cbEnableBrowserButtonStyles_CheckedChanged"
                                                  AutoPostBack="true" runat="server"></asp:CheckBox>
                                        </div>
                                   </asp:Panel>
                              </div>
                         </qsf:ConfiguratorPanel>
                    </td>
               </tr>
          </table>
          <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
               <script type="text/javascript">
                    //<![CDATA[
                    function OnClientClicking(sender, args) {
                         if (!sender.get_autoPostBack()) {
                              var label = $get("<%=lblButtonClickMessage.ClientID%>");
                              label.innerHTML = "<span style='color:green;'>Client-Side Click: <strong>" + sender.get_text() + "</strong> was clicked.</span>";
                         }
                         if (sender.get_navigateUrl() && sender.get_buttonType() == Telerik.Web.UI.RadButtonType.LinkButton) {
                              var RadWindow = $find("<%=RadWindow1.ClientID%>");
                              RadWindow.setUrl(sender.get_navigateUrl());
                              RadWindow.set_title(sender.get_navigateUrl());
                              RadWindow.show();
                              args.set_cancel(true);
                         }
                    }
                    //]]>
               </script>
          </telerik:RadScriptBlock>
     </telerik:RadAjaxPanel>
     <div class="qsf-overview-qr">
          <p>
               <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Button.png" AlternateText="tlrk.it/13hzkgR" />
               To test the behavior of our controls on mobile devices, scan the QR code.
          </p>
          <a href="http://tlrk.it/13hzkgR">tlrk.it/13hzkgR</a>
     </div>
    </form>
</body>
</html>