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

Input / API and Events


RadTextBox:
RadNumericTextBox:
RadMaskedTextBox:
Date:
Set/Get values on client
RadTextBox:


RadNumericTextbox:


RadMaskedTextbox:


RadDateInput:
Event log:

  • RadDateInput exposes simple yet powerful API so that you may manipulate its value using custom client side code.

    Each of the three controls (RadTextBox, RadNumericTextBox and RadDateInput) expose a rich set of client-side events:
    1. OnBlur - fired when the input control loses focus
    2. OnButtonClick - fired when the postback button (if displayed) beside the input control is clicked
    3. OnDisable - fired when the input is disabled
    4. OnEnable - fired when the input is enabled
    5. OnError - fired when the user enters invalid data
    6. OnFocus - fired when the input control gains focus
    7. OnKeyPress - fired when a keyboard key is pressed
    8. OnLoad - fired when the input control is loaded on the client
    9. OnMouseOut - fired when the mouse cursor leaves the input area
    10. OnMouseOver - fired when the mouse cursor is over the input
    11. OnMouseOut - fired when the mouse cursor leaves the input area
    12. OnMouseOver - fired when the mouse cursor is over the input
    13. OnMoveDown - fired when the user decreases the value of any enumeration or numeric range mask part of RadMaskedTextBox (with either keyboard arrow keys or mouse wheel)
    14. OnMoveUp - fired when the user increases the value of any enumeration or numeric range mask part of RadMaskedTextBox (with either keyboard arrow keys or mouse wheel)
    15. OnValueChanged - fired when the data entry in the input is changed by the user (right after the control loses focus)
    16. OnValueChanging - fired when the data entry in the input is changing by the user (just prior to the change so it can be canceled)

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.InputExamplesCS.Programming.ApiEvents.DefaultCS" %>

    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ 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">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <!-- custom head section -->
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
            <!--
                function ButtonClick(sender, args) {
                    var textBox = sender;
                    var text = prompt("Type the text you want to set to the RadTextBox", "");
                    if (text)
                        textBox.set_value(text);
                }
                function OnDateChanged(dateInput, args) {
                    if (args.get_newDate() == null && args.get_oldDate() == null) {
                        logEvent(dateInput.get_id() + ".OnValueChanged: no selected date ");
                    }
                    else {
                        if (args.get_newDate() == null)
                            logEvent(dateInput.get_id() + ".OnValueChanged: Previous selected date " + args.get_oldDate());
                        else if (args.get_oldDate() == null)
                            logEvent(dateInput.get_id() + ".OnValueChanged: Date changed to " + args.get_newDate());
                        else
                            logEvent(dateInput.get_id() + ".OnValueChanged: Date changed from " + args.get_oldDate() + " to " + args.get_newDate());
                    }
                }

                function OnClientError(sender, args) {
                    logEvent(sender.get_id() + ".OnClientError: Invalid character");
                }

                function OnClientEnumerationChanged(sender, args) {

                    logEvent(sender.get_id() + ".OnClientEnumerationChanged: Enumeration is changed to " + args.get_newValue());
                }

                function onEnumMove(sender, args) {
                    logEvent(sender.get_id() + ".OnClientMoveUp/Down: Enumeration is moved to " + args.get_newValue());
                }

                function OnClientValueChanged(sender, args) {
                    logEvent(sender.get_id() + ".OnClientValueChanged: Value is changed to " + args.get_newValue());
                }

                function SetInputValue(id1, id2) {
                    var radInput = $find(id1);
                    var valueTbx = $find(id2);
                    radInput.set_value(valueTbx.get_value());
                    logEvent(id1 + " set_value(): " + valueTbx.get_value());
                }

                function GetInputValue(id) {
                    var radInput = $find(id);
                    alert(id + "value is: " + radInput.get_value())
                    logEvent(id + " get_value(): " + radInput.get_value());
                }
                -->
                
            </script>

        </telerik:RadCodeBlock>
        <style type="text/css">
            .module DT
            {
                float: left;
                width: 100px;
            }
            .module
            {
                line-height: 20px;
            }
            .divStyle
            {
                padding-right: 5px;
                padding-left: 5px;
                float: left;
                margin-bottom: 10px;
                padding-bottom: 5px;
                width: 270px;
                color: #ff0000;
                margin-right: 10px;
                padding-top: 5px;
                height: 120px;
                overflow: auto;
            }
        </style>
        <!-- end of custom head section -->
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <!-- content start -->
        <br />
        <table class="tableStyle">
            <tr>
                <td>
                    RadTextBox:
                </td>
                <td>
                    <telerik:RadTextBox ShowButton="true" ID="RadTextBox1" runat="server" Width="250px">
                        <ClientEvents OnButtonClick="ButtonClick" />
                    </telerik:RadTextBox>
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    RadNumericTextBox:
                </td>
                <td>
                    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Width="250px" Type="Percent"
                        ShowSpinButtons="true">
                        <ClientEvents OnError="OnClientError" OnValueChanged="OnClientValueChanged" />
                    </telerik:RadNumericTextBox>
                </td>
            </tr>
            <tr style="padding: 3px;">
                <td>
                    RadMaskedTextBox:
                </td>
                <td colspan="2">
                    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" PromptChar="_" Mask="<1..31> (###) ###-#####">
                        <ClientEvents OnError="OnClientError" OnEnumerationChanged="OnClientEnumerationChanged"
                            OnMoveUp="onEnumMove" OnMoveDown="onEnumMove" OnValueChanged="OnClientValueChanged" />
                    </telerik:RadMaskedTextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Date:
                </td>
                <td>
                    <telerik:RadDateInput ID="RadDateInput1" runat="server" DateFormat="F" Width="250px"
                        SelectedDate="2005-10-28" MinDate="01/01/1990">
                        <ClientEvents OnValueChanged="OnDateChanged"></ClientEvents>
                    </telerik:RadDateInput>
                </td>
            </tr>
        </table>
        <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel" Expanded="true" Title="Set/Get values on client">
            RadTextBox:
            <br />
            <telerik:RadTextBox ID="RadTextBox2" runat="server">
            </telerik:RadTextBox>
            <asp:Button ID="Button1" runat="server" CssClass="qsfButton" Text="Set value" OnClientClick="SetInputValue('RadTextBox1','RadTextBox2'); return false" />
            <asp:Button ID="Button5" runat="server" CssClass="qsfButton" Text="Get value" OnClientClick="GetInputValue('RadTextBox1');return false" />
            <br />
            <br />
            RadNumericTextbox:
            <br />
            <telerik:RadNumericTextBox ID="RadNumericTextBox2" runat="server">
            </telerik:RadNumericTextBox>
            <asp:Button ID="Button2" runat="server" CssClass="qsfButton" Text="Set value" OnClientClick="SetInputValue('RadNumericTextBox1','RadNumericTextBox2'); return false" />
            <asp:Button ID="Button6" runat="server" CssClass="qsfButton" Text="Get value" OnClientClick="GetInputValue('RadNumericTextBox1');return false" />
            <br />
            <br />
            RadMaskedTextbox:
            <br />
            <telerik:RadMaskedTextBox ID="RadMaskedTextBox2" PromptChar="_" Mask="############"
                runat="server">
            </telerik:RadMaskedTextBox>
            <asp:Button ID="Button3" runat="server" CssClass="qsfButton" Text="Set value" OnClientClick="SetInputValue('RadMaskedTextBox1','RadMaskedTextBox2'); return false" />
            <asp:Button ID="Button7" runat="server" CssClass="qsfButton" Text="Get value" OnClientClick="GetInputValue('RadMaskedTextBox1');return false" />
            <br />
            <br />
            RadDateInput:
            <br />
            <telerik:RadDateInput ID="RadDateInput2" runat="server">
            </telerik:RadDateInput>
            <asp:Button ID="Button4" runat="server" CssClass="qsfButton" Text="Set value" OnClientClick="SetInputValue('RadDateInput1','RadDateInput2'); return false" />
            <asp:Button ID="Button8" runat="server" CssClass="qsfButton" Text="Get value" OnClientClick="GetInputValue('RadDateInput1');return false" />
        </qsf:ConfiguratorPanel>
        <qsf:EventLogConsole runat="server" ID="EventLogConsole1" />
        <!-- content end -->
        <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </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