chg value of a RadNumericTextBox from elsewhere

3 posts, 1 answers
  1. Morten
    Morten avatar
    267 posts
    Member since:
    Jul 2012

    Posted 22 Nov 2008 Link to this post

    I'd like to change the value of a RadNumericTextBox clientside by clicking another page control:

    By control:
    <telerik:RadNumericTextBox id="txtQtyPoster" NumberFormat-DecimalDigits="0" NumberFormat-GroupSeparator="" runat="server" Type="Number" Skin="Vista" Width="30" Value="0" TabIndex="0"></telerik:RadNumericTextBox>

    Rendered to:
    <span id="ctl00_cph_cnt_txtQtyPoster_wrapper" class="radInput_Vista" style="white-space:nowrap;"><input type="text" id="ctl00_cph_cnt_txtQtyPoster_text" name="ctl00_cph_cnt_txtQtyPoster_text" class="radEnabledCss_Vista  inputCell" style="width:30px;" /><input style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_cph_cnt_txtQtyPoster" value="" type="text" /><input style="visibility:hidden;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_cph_cnt_txtQtyPoster_Value" name="ctl00$cph_cnt$txtQtyPoster" value="" type="text" /><input id="ctl00_cph_cnt_txtQtyPoster_ClientState" name="ctl00_cph_cnt_txtQtyPoster_ClientState" type="hidden" /></span>

    My javascript:
    var Poster = document.getElementById("<%= txtQtyPoster.ClientID  %>");
    Poster.value == "0";

    Triying the code below I dont get the RadNumericTextBox object:
    var poster = $find("<%= txtQtyPoster.ClientID %>");
    Poster.value == "0";

    Also,
    - when to use document.getElementById and $find?
    - what (if any) are the requirements of using $find?

  2. Answer
    Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 23 Nov 2008 Link to this post

    Hi Morten71,

    You should be able to get a reference to the client-side RadNumericTextBox object by using $find('<%= RadNumericTextBoxID.ClientID %>'). Once you have a reference to it, you can call set_value(value) to set a new value. Here is a quick example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Telerik.Examples._Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title>Example - Change RadNumericTextBox Value on the Client</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
                <script type="text/javascript"
                    function changeValue() { 
                        var textbox = $find('<%= RadNumericTextBox1.ClientID %>'); 
                        textbox.set_value(2); 
                    } 
                </script> 
            </telerik:RadCodeBlock> 
             
            <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" 
                Value="1"
            </telerik:RadNumericTextBox> 
             
            <asp:Button ID="Button1" runat="server" 
                Text="Change Value" 
                OnClientClick="changeValue(); return false;" /> 
        </form> 
    </body> 
    </html> 
     

    The difference between $get() and $find() is that $get() returns the DOM element that has the ID you provide, and $find() returns the client-side component associated with the id you provide. So if you want to get a reference to the client-side DOM element of the RadNumericTextBox, you would call $get(), and if you want to get a copy of the client-side RadNumericTextBox object (along with all it's built-in functionality), you would call $find(). If you'd like to read more about the differences between the two functions, check out Matt Berseth's blog post: The Ever-Useful $get and $find ASP.NET AJAX Shortcut Functions





    I hope this helps. Let me know if you have more questions.

    Regards,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Morten
    Morten avatar
    267 posts
    Member since:
    Jul 2012

    Posted 24 Nov 2008 Link to this post

    Hi Kevin
    thanks, It works... it was a case of caseSensitivity (poster != Poster)
Back to Top