RadButton - Telerik ASP.NET Button

Demo Configurator

Change Button Type



ToggleType


Common Button Properties
  • AutoPostBack
  • Set Text
Specific Properties for Standart Button
Isolate this demo as a stand-alone application

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, single click functionality and rich client side API, the Teleik 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.

Key Features

  • Rich client-side functionality
  • Command Support—RadButton has full support for Commands
  • Single click functionality—Avoid multiple postbacks/callbacks to the server
  • 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
<%@ 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" %>
<!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" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <asp:Panel runat="server" ID="Panel1">
                <div class="btn-wrapper">
                    <telerik:RadButton ID="btnStandard" runat="server" OnClick="btn_Click" OnClientClicking="telerikDemo.OnClientClicking"
                        Text="Standard Button" GroupName="GroupName1">
                    </telerik:RadButton>
                </div>
                <div class="btn-wrapper">
                    <telerik:RadButton ID="btnIcon" runat="server" OnClick="btn_Click" OnClientClicking="telerikDemo.OnClientClicking"
                        Text="Standard Button With Icon" GroupName="GroupName1">
                        <Icon PrimaryIconCssClass="rbCart" PrimaryIconLeft="5px"></Icon>
                    </telerik:RadButton>
                </div>
                <div class="btn-wrapper">
                    <telerik:RadButton ID="btnIcons" runat="server" OnClick="btn_Click" OnClientClicking="telerikDemo.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>
                </div>
                <div>
                    <asp:Label ID="lblButtonClickMessage" runat="server" EnableViewState="false" CssClass="demo-label"></asp:Label>
                </div>
            </asp:Panel>
        </div>
    </div>

    <telerik:RadWindowManager runat="server" ID="RadWindowManager1" Width="700px" Modal="true"
        Height="500px" Behaviors="Maximize,Close,Move" VisibleStatusbar="true">
    </telerik:RadWindowManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnStandard">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnIcon">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnIcons">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>

    </telerik:RadAjaxManager>

    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?