Setting value on the fly

4 posts, 0 answers
  1. Ivo
    Ivo avatar
    7 posts
    Member since:
    Aug 2016

    Posted 12 May 2017 Link to this post

    Hi everybody,

    I have two RadNumericTextBox which represent initial and final values. I added two js functions, one goes for ini and the other goes for fin. These check values entered by user to verify that initial value is minor or equal to final value and viceversa.

    The issue with my code is that ini value isnot being set when I call ini.set_value(fin.get_value()). It will only work if I enter (for the second time) a new bigger initial value (initial value cannot be bigger than final value).

    I already debugged the js and it works fine but it has to be executed twice in order to see the corrected value at initial RadNumericTextBox.

    Here is the RadNumericTextBox declaration

    1.<telerik:RadNumericTextBox ID="TextInicio" runat="server" Value="0" DataType="System.Int32" MinValue="1">
    2.   <NegativeStyle Resize="None"></NegativeStyle>
    3.   <NumberFormat ZeroPattern="n" DecimalDigits="0"></NumberFormat>
    4.   <ClientEvents OnValueChanging="VerificarValorInicio" />
    5.</telerik:RadNumericTextBox>

     

    And the javascript function

    01.function VerificarValorInicio(sender,args)
    02.{
    03.   var txtIni = $find("<%=TextInicio.ClientID%>");
    04.   var ini = txtIni.get_value();
    05.   var txtFin = $find("<%=TextFin.ClientID%>");
    06.   var fin    = txtFin.get_value();
    07. 
    08.// If user entered an ini value bigger than fin value (which is not allowed)
    09.   if (ini > fin) {
    10.       txtIni.set_value(fin); // txtIni won´t show the value passed by fin variable
    11.   }
    12.}

     

    Any ideas about this??

    Thanks in advance

     

  2. Ivo
    Ivo avatar
    7 posts
    Member since:
    Aug 2016

    Posted 02 Jun 2017 Link to this post

    Hello again,
    after a huge dive into Telerik´s unorganized documentation I found out the way to solve this issue.

    Firsth I had to call my javascript validation function at OnValueChanging client side event handler. With this I had acces to args.get_newValue() and args.set_newValue() methods.

    Here is the code

    01.function checkInitialValue(sender, args) {
    02.        var txtFin = $find("<%=TextFin.ClientID%>");
    03.        var ini = args.get_newValue();
    04.        var fin = txtFin.get_value();
    05.        if (ini > fin) {
    06.            args.set_newValue(fin);
    07.        }
    08.    }
    09.function checkFinalValue(sender, args) {
    10.        var txtIni = $find("<%=TextIni.ClientID%>");
    11.        var ini = txtIni.get_value();
    12.        var fin = args.get_newValue();
    13.            if (ini > fin) {
    14.            args.set_newValue(ini);
    15.        }
    16.    }

     

    The HTML

    01.<telerik:RadNumericTextBox ID="TextIni" runat="server" Value="0" DataType="System.Int32" MinValue="1">
    02.    <NegativeStyle Resize="None"></NegativeStyle>
    03.    <NumberFormat ZeroPattern="n" DecimalDigits="0"></NumberFormat>
    04.    <ClientEvents OnValueChanging="checkInitialValue" />
    05.</telerik:RadNumericTextBox>
    06. 
    07.<telerik:RadNumericTextBox ID="TextFin" runat="server" Value="0" DataType="System.Int32" MinValue="1">
    08.    <NegativeStyle Resize="None"></NegativeStyle>
    09.    <NumberFormat ZeroPattern="n" DecimalDigits="0"></NumberFormat>
    10.    <ClientEvents OnValueChanging="checkFinalValue" />
    11.</telerik:RadNumericTextBox>

    That made the difference.

  3. Albert Shenker
    Albert Shenker avatar
    578 posts
    Member since:
    Mar 2004

    Posted 14 May Link to this post

    is there a way to change the numeric formatting of a numerictextbox client-sdie? The documentation here:

    https://docs.telerik.com/devtools/aspnet-ajax/controls/numerictextbox/client-side-programming/numberformat-client-object

    doesn't list any getter/setter functions.

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    354 posts

    Posted 17 May Link to this post

    Hello Albert,

    The get_numberFormat() method of the NumericTextBox returns a NumberFormat Client-side Object. Once you have the reference to the NumberFormat object you can change its properties listed in https://docs.telerik.com/devtools/aspnet-ajax/controls/numerictextbox/client-side-programming/numberformat-client-object.

    Once you apply the desired changes, the display value should be manually updated as explained in this KB article which we just created for this scenario - Change NumericTextBox number format dynamically.

    <script type="text/javascript">
        function OnClientClicked() {
            var numeric = $find("<%= RadNumericTextBox1.ClientID%>");
            var numberFormat = numeric.get_numberFormat();
            numberFormat.DecimalSeparator = ",";
            numberFormat.DecimalDigits = 4;
            numeric.set_displayValue(numeric._constructDisplayText(numeric.get_value()))
        }
    </script>
    <telerik:RadButton runat="server" Text="Change number format and update NumericTextBox" AutoPostBack="false"
        OnClientClicked="OnClientClicked" />
    <br />
    <telerik:RadNumericTextBox RenderMode="Lightweight" ID="RadNumericTextBox1" runat="server" EmptyMessage="Enter some value"
        Width="200px" Type="Currency" Value="195">
    </telerik:RadNumericTextBox>

    Regards,
    Peter Milchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top