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

Client-side API

  • Demo Configurator
Enable/Disable/Focus
Get/Set Value
Separator

The WebForms OTP Input comes with an extensive set of API configurations. This demo shows how to utilize some of its functions and events such as enabling and disabling the component and selecting the first iinput element by using the enable method and the focus method.

The OTP Input also provides methods for setting the separator by using arbitrary characters or the default Kendo icon toolset by using the separator configuration.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • script.js
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb"  Inherits="OTPInput_Client_Side_Programming_ClientSideAPI_DefaultVB" %>

<%@ 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="script.js"></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-container no-bg flex-center" runat="server">
        <telerik:RadCard ID="RadCard1" runat="server">
            <telerik:CardBodyComponent runat="server">
                <telerik:RadOTPInput ID="OTPInput1" runat="server">
                    <Items>
                        <telerik:OTPInputItem GroupLength="3" />
                        <telerik:OTPInputItem GroupLength="2" />
                        <telerik:OTPInputItem GroupLength="3" />
                    </Items>
                    <ClientEvents OnLoad="onLoad" />
                </telerik:RadOTPInput>
            </telerik:CardBodyComponent>
        </telerik:RadCard>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Enable/Disable/Focus" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button Width="100" ID="Button1" Text="Disable" AutoPostBack="false" runat="server" OnClientClicked="onEnableDisableClick" />
                        </li>
                        <li>
                            <qsf:Button Width="100" ID="Button2" Text="Readoly" AutoPostBack="false" runat="server" OnClientClicked="onReadonlyClick" />
                        </li>
                        <li>
                            <qsf:Button Width="100" ID="Button3" Text="Focus" AutoPostBack="false" runat="server" OnClientClicked="onFocusClick" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Get/Set Value" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button Width="100" ID="Button4" Text="Get Value" AutoPostBack="false" runat="server" OnClientClicked="onGetValueClick" />
                        </li>
                        <li>
                            <qsf:Button Width="100" ID="Button5" Text="Clear Value" AutoPostBack="false" runat="server" OnClientClicked="onClearValueClick" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Separator" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ComboBox1" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="onClientSelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Minus" Value="minus" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Star" Value="star" />
                                    <telerik:RadComboBoxItem Text="Arrows" Value="arrows-left-right" />
                                    <telerik:RadComboBoxItem Text="Code" Value="code" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance