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 / First Look







RadButton Settings
Change Button Type:
ToggleType:
Common Button Properties:
AutoPostBack
Text
Specific Properties for Standard Button:

  • Telerik RadButton

    Telerik RadButton is fully customizable button control that allows you to build complex forms and easily manage the user input. The control provides the features, that ASP.NET Button, ImageButton, LinkButton, RadioButton and CheckBox controls have. Developers can easily migrate their applications from using the standard ASP.NET (button) controls to the new RadButton control, because most of their functionality is provided by our control, and is controlled by the same or similar(intuitive) properties.

    Key features:
    • Rich client-side functionality - Much of the server properties are exposed on the client, enabling the user to save a trip to the server just to set a property. There are several client-side events which allow easy and flexible use in a wide range of application scenarios.
    • Command Support - RadButton has full support for Commands. The user can set CommandName and CommandArgument, and handle to Command server-side event to perform specific action when the button with the respective command is pressed.
    • Icons - You can make the button more intuitive by placing an Icon next to its text. Two icons at maximum can be shown on the control. All of the icon related properties are controlled through the <Icon> inner property:

      <telerik:RadButton ID="RadButton1" runat="server">
             <Icon PrimaryIconUrl="~/icons/cart.png" SecondaryIconUrl="~/icons/add.png" />
      </telerik:RadButton>

    • ImageButton - The user can easily place an image on the control. The image can be used either as background image, or it can represent the button itself (ImageButton). All of the image related properties are set through the <Image> inner property:

      <telerik:RadButton ID="RadButton1" runat="server">
             <Image ImageUrl="~/img/SignUp.png" IsBackgroundImage="false" />
      </telerik:RadButton>
    • Customizable ToggleButton - RadButton can be used as a check box or radio button. To turn on the toggle button functionality set the ToggleType property to a value different than ButtonToggleType.None. Setting the value to CustomToggle gives the developer full control over the button.
    • Advanced Skinning - The visual appearance of the Button control can be easily customized through skins. You can use one of the predefined skins or create your own. This eliminates the need to use our RadFormDecorator control, to style a single button on the page.

Source Code

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

    <%@ 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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            *>.ffbutton
            {
                margin-top: -4px !important;
            }
            .rbToggleCheckbox, .rbToggleCheckboxChecked, .rbToggleRadio, .rbToggleRadioChecked
            {
                top: 3px !important;
                left: 4px !important;
                right: 4px !important;
            }
            .Gray
            {
                color: White !important;
                background-color: Gray !important;
            }
            .Red
            {
                color: White !important;
                background-color: Red !important;
            }
            .Green
            {
                color: White !important;
                background-color: Green !important;
            }
            .Yellow
            {
                color: Black !important;
                background-color: Yellow !important;
            }
            .primaryIcon
            {
                top: 8px !important;
                left: 12px !important;
            }
            .secondaryIcon
            {
                top: 8px !important;
                right: 12px !important;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td style="width: 400px; 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" />
                        </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" />
                        </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" />
                    </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="450px">
                            <div style="padding: 8px; float: left;">
                                <strong>Change Button Type:</strong>
                                <asp:Label ID="lblEditModes" runat="server" EnableViewState="false"></asp:Label>
    <asp:RadioButtonList OnSelectedIndexChanged="ChangeButtonType_SelectedIndexChanged"
    RepeatDirection="Vertical" Width="110px" 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:RadioButtonList>
                            </div>
                            <div style="padding: 8px 50px; float: left">
                                <strong>ToggleType:</strong>
    <asp:RadioButtonList OnSelectedIndexChanged="ChangeToggleType_SelectedIndexChanged"
    RepeatDirection="Vertical" Width="150px" 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">
                                    <strong style="display: block; clear: both; padding-bottom: 10px;">Common Button Properties:</strong>
                                    <div style="float: left; margin-right: 65px;">
                                        <strong>AutoPostBack</strong>
    <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: 250px; float: left;">
                                        <strong>Text</strong>
                                        <div>
                                            <asp:TextBox ID="txtStandardButtonText" runat="server" Style="color: #002060; width: 150px;">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>
                                <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">
                                    <strong>Specific Properties for Standard Button:</strong><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 Text="EnableBrowserButtonStyle" ID="cbEnableBrowserButtonStyles" OnCheckedChanged="cbEnableBrowserButtonStyles_CheckedChanged"
    AutoPostBack="true" runat="server" />
                                    </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>
        <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