This is a migrated thread and some comments may be shown as answers.

Setting value on the fly

3 Answers 97 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Ivo
Top achievements
Rank 1
Ivo asked on 12 May 2017, 07:14 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Ivo
Top achievements
Rank 1
answered on 02 Jun 2017, 10:15 PM

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.

0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 14 May 2018, 06:42 PM

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.

0
Peter Milchev
Telerik team
answered on 17 May 2018, 02:43 PM
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.
Tags
NumericTextBox
Asked by
Ivo
Top achievements
Rank 1
Answers by
Ivo
Top achievements
Rank 1
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Peter Milchev
Telerik team
Share this question
or