New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side API

  • Set/Get values on client
  • Get value with Prompt and Literals




  • Other Methods


RadMaskedTextBox provides a flexible client-side API that allows you to easily interact with the control on the client.

In this demo you can examine how to use the client-side API to change or retrieve the current value Value of the control and to test some of the exposed methods in the API.

You can find more useful information and help in the provided related resources.

Related Resources

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</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">
            <div class="contentContainer">
                <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" Label="MaskedTextBox"
                    Width="100%" LabelWidth="120px" Mask="(###) ###-####-####">
                    <ClientEvents OnLoad="demo.load" />
                </telerik:RadMaskedTextBox>
            </div>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Set/Get values on client">
        <Views>
            <qsf:View CssClass="customized-labels">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadNumericTextBox2">Set/Get Value</label><br />
                            <qsf:NumericTextBox ID="RadNumericTextBox2" Value="21233199872312" runat="server" Width="216px" NumberFormat-DecimalDigits="0" NumberFormat-GroupSeparator=""></qsf:NumericTextBox><br />
                            <br />
                            <qsf:Button ID="Button1" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setInputValue('RadNumericTextBox2');}"></qsf:Button>
                            <qsf:Button ID="Button5" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getInputValue();}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <span>Get value with Prompt and Literals</span><br />
                            <qsf:Button ID="Button3" runat="server" Text="Value with Prompt" Width="216px" AutoPostBack="false" OnClientClicked="function(){alert(demo.getDemoInputControl().get_valueWithPrompt());}"></qsf:Button>
                            <br />
                            <br />
                            <qsf:Button ID="Button11" runat="server" Text="Value with Literals" Width="216px" AutoPostBack="false" OnClientClicked="function(){alert(demo.getDemoInputControl().get_valueWithLiterals());}"></qsf:Button>
                            <br />
                            <br />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <span>Other Methods</span><br />
                            <qsf:Button ID="Button9" runat="server" Text="Clear value" Width="216px" AutoPostBack="false" OnClientClicked="function(){demo.getDemoInputControl().clear();}"></qsf:Button>
                            <br />
                            <br />
                            <qsf:Button ID="Button7" runat="server" Text="Get Display Value" Width="216px" AutoPostBack="false" OnClientClicked="function(){alert('Display value: ' + demo.getDemoInputControl().get_displayValue());}"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance