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

Client-side API



  • Set/Get values on client



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

In this demo you can examine how to use the client-side API to change or retrieve the values from a TextBox controls with applied TextBoxSetting and DateInputSetting

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">
                <asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" Text="TextBoxSetting"></asp:Label>
                <asp:TextBox ID="TextBox1" runat="server" Width="165px"/>
                <br />
                <br />
                <asp:Label ID="Label2" runat="server" AssociatedControlID="TextBox2" Text="DateInputSetting"></asp:Label>
                <asp:TextBox ID="TextBox2" runat="server" Width="165px"/>
            </div>
        </div>
    </div>

    <telerik:RadInputManager RenderMode="Lightweight" runat="server" ID="RadInputManager1">
        <telerik:TextBoxSetting BehaviorID="TextBoxBehavior1" EmptyMessage="Enter some text">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox1" />
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:DateInputSetting BehaviorID="DateInputBehavior1" EmptyMessage="Enter some date">
            <TargetControls>
                <telerik:TargetInput ControlID="TextBox2" />
            </TargetControls>
        </telerik:DateInputSetting>
    </telerik:RadInputManager>

    <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="RadTextBox1">Set/Get Value to TextBoxSetting</label><br />
                            <qsf:TextBox ID="RadTextBox1" Text="Some value" runat="server" Width="216px"></qsf:TextBox><br />
                            <br />
                            <qsf:Button ID="Button1" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setInputValue('TextBox1','RadTextBox1');}"></qsf:Button>
                            <qsf:Button ID="Button5" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getInputValue('TextBox1');}"></qsf:Button>                            
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <label for="RadDatePicker1">Set/Get Date to DateInputSetting</label><br />
                            <qsf:DatePicker ID="RadDatePicker1" runat="server" Width="216px" SelectedDate="1/12/1999"></qsf:DatePicker><br />
                            <br />
                            <qsf:Button ID="Button2" runat="server" Text="Set value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.setInputDate('TextBox2', 'RadDatePicker1');}"></qsf:Button>
                            <qsf:Button ID="Button3" runat="server" Text="Get value" Width="106px" AutoPostBack="false" OnClientClicked="function(){demo.getInputDate('TextBox2');}"></qsf:Button>                            
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance