Button

Controls

Rate this demo

Thank you for your post!

RadButton - Telerik's ASP.NET Button







RadButton Settings









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 70+ other controls are part of RadControls 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 the business logic of the app.

Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the RadControls) to quickly create, upgrade and configure your RadControls 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 RadControls, 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 PrimaryIconUrl="../../img/icons/shopping_cart.png" 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 PrimaryIconUrl="../../img/icons/right_arrow.png" PrimaryIconTop="5px" PrimaryIconLeft="7px"
                                   SecondaryIconTop="5px" SecondaryIconRight="7px" SecondaryIconUrl="../../img/icons/left_arrow.png">
                              </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>
    </form>
</body>
</html>