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 / Client-side API

Client-Side API Commands:
  • Enter a URL, e.g. http://www.telerik.com
  • Set Auto PostBack

  • Client-Side API

    RadButton provides flexible and rich client-side API. Here are some of the key client-side functions:

    • get_text() - Returns the text displayed in the RadButton control
    • set_text(text) - Sets a text to be displayed in the RadButton control
    • get_autoPostBack() - Returns a bool value indicating whether the control will automatically postback to the server
    • set_autoPostBack(true/false) - Disables or enables the AutoPostBack behavior of the RadButton control.

    See the help section which describes how to use the client-side API in details.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" %>

    <%@ 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">
            ul, ul li
            {
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
                height: auto;
                display: block;
            }
            ul li
            {
                padding: 2px 0;
            }
            
            .RadButtonWrapper
            {
                float: left;
                border: solid 1px #9c9c9c;
                padding: 5px 5px 5px 17px;
                margin-right: 200px;
                width: 170px;
                background: #F1F1F1;
            }
            
            .qsfDark .RadButtonWrapper
            {
                background: #1a1212;
                border: 1px solid #666;
            }
        </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:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
        <script type="text/javascript">
            //<![CDATA[
            var standardButton = null;
            var toggleButton = null;
            var linkButton = null;

            function pageLoad()
            {
                standardButton = $find("<%=RadButton1.ClientID %>");
                toggleButton = $find("<%=RadButton2.ClientID %>");
                linkButton = $find("<%=RadButton3.ClientID %>");
            }

            function SetButtonsText()
            {
                var buttonTextValue = $get("txtSetButtonText").value;
                standardButton.set_text(buttonTextValue);
                toggleButton.set_text(buttonTextValue);
                linkButton.set_text(buttonTextValue);
            }

            function GetButtonsText()
            {
                alert("The names of the buttons are:\n" + standardButton.get_text() + "\n" + toggleButton.get_text() + "\n" + linkButton.get_text());
            }

            function GetButtonsType()
            {
                alert("The types of the buttons are respectively:\n" +
                        ButtonTypeConverter(standardButton.get_buttonType()) + "\n" +
                        ButtonTypeConverter(toggleButton.get_buttonType()) + "\n" +
                        ButtonTypeConverter(linkButton.get_buttonType()));
            }

            function ButtonTypeConverter(type)
            {
                switch (type)
                {
                    case Telerik.Web.UI.RadButtonType.StandardButton:
                        return "Standard Button"
                        break;
                    case Telerik.Web.UI.RadButtonType.ToggleButton:
                        return "Toggle Button"
                        break;
                    case Telerik.Web.UI.RadButtonType.LinkButton:
                        return "Link Button"
                }
            }

            function SetNavigateUrl(sender, args)
            {
                if (!Page_IsValid) return;
                var txtNavigateUrlValue = $get("txtNavigateUrl").value;
                linkButton.set_navigateUrl(txtNavigateUrlValue);
            }

            function OnClientClicking(sender, args)
            {
                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);
                }
            }

            var flag = true;
            function SetAutoPostBack()
            {
                flag = !flag;
                standardButton.set_autoPostBack(flag);
                toggleButton.set_autoPostBack(flag);
                linkButton.set_autoPostBack(flag);
                if (flag)
                {
                    alert("RadButtons will perform postback when clicked");
                }
                else alert("RadButtons will not perform postback");

            }

            function GetToggleType()
            {
                if (Telerik.Web.UI.ButtonToggleType.CheckBox == toggleButton.get_toggleType())
                {
                    alert("The type of the ToggleButton is checkbox");
                }
            }

            function CheckToggleButton()
            {
                toggleButton.set_checked(!toggleButton.get_checked());
            }
            //]]>
        </script>
        <div class="RadButtonWrapper">
            <div style="float: left;">
                <telerik:RadButton ID="RadButton1" runat="server" Text="Standard Button">
                </telerik:RadButton>
                <div style="padding: 5px">
                </div>
                <telerik:RadButton ID="RadButton2" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                    Text="Toggle Button (CheckBox)">
                </telerik:RadButton>
                <div style="padding: 5px">
                </div>
                <telerik:RadButton ID="RadButton3" runat="server" ButtonType="LinkButton" Text="Link Button"
                    OnClientClicking="OnClientClicking">
                </telerik:RadButton>
            </div>
        </div>
        <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Client-Side API Commands:"
            Expanded="true" Width="400px" Style="float: right;">
            <ul>
                <li>
                    <input type="text" id="txtSetButtonText" style="width: 100px;" value="Set Buttons Text" />
                    <button onclick="SetButtonsText(); return false;">
                        Set Buttons Text</button></li>
                <li>
                    <button onclick="GetButtonsText(); return false;">
                        Get Buttons Text</button></li>
                <li>
                    <button onclick="GetButtonsType(); return false;">
                        Get Buttons Type</button></li>
                <li>
                    <asp:TextBox ID="txtNavigateUrl" runat="server" Style="width: 150px; margin-bottom: 3px;"></asp:TextBox>
                    <span>Enter a URL, e.g. http://www.telerik.com</span>
    <asp:RegularExpressionValidator ForeColor="Red" Style="padding: 1px 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" AutoPostBack="false" runat="server" OnClientClicked="SetNavigateUrl"
                        Text="Set Navigate URL (LinkButton only)" ValidationGroup="UrlVG">
                    </telerik:RadButton>
                </li>
                <li>
                    <input type="checkbox" checked="checked" onclick="SetAutoPostBack();" value="true" />Set
                    Auto PostBack </li>
                <li>
                    <button onclick="GetToggleType(); return false;">
                        Get Toggle Type (Toggle Button Only)</button></li>
                <li>
    <asp:CheckBox ID="cb1" runat="server" onclick="CheckToggleButton();" Text="Check / Uncheck
    Toggle Button" /></li>
            </ul>
            <telerik:RadWindow VisibleOnPageLoad="false" runat="server" Behaviors="Maximize,Close,Move"
                ID="RadWindow1" VisibleStatusbar="false" Width="700px" Modal="true" Height="500px" />
        </qsf:ConfiguratorPanel>
        <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