Completed
Last Updated: 01 Apr 2024 13:16 by ADMIN
Release 2024 Q2 (May)
Created by: Jamie
Comments: 10
Category: NumericTextBox
Type: Feature Request
68

At the moment, the selection behavior of the NumericTextBox can vary depending on the Format - the Format is what is shown when the input does not have focus, and the Decimals control the actual number the user will see when they focus. Of both differ (for example, the Format has more decimal places, or some other information like a unit of measurement), the input value changes on focus, which removes the selection (highglight).

I would like the numeric textbox to always select all its content when it gets focused (either with the Tab key, or with a click).

Note on general input behavior - using Tab to focus in a field usually defaults to all the contents being selected, while a click results in a cursor without selection.

Completed
Last Updated: 15 Feb 2022 15:24 by ADMIN
Release 3.1.0
Created by: Avromi
Comments: 13
Category: NumericTextBox
Type: Feature Request
17
There should be a way to add a placeholder text to the numeric input just like other inputs. Otherwise, you cannot use this feature for a form that includes this input as it would be inconsistent with other controls. is there a way to accomplish this?
Unplanned
Last Updated: 29 Oct 2021 15:17 by ADMIN

Try with culture es-ES and you will see the problem.

When es-ES, "dot [.]" is not a decimal separator, therefore you can't use the "NumpadDecimal" key to write a decimal number.

@using System.Globalization

<b>Culture:</b> @CultureInfo.CurrentCulture.Name;
<br />
<b>Culture UI:</b> @CultureInfo.CurrentUICulture.Name
<br />
<b>DefaultThreadCurrentCulture:</b> @CultureInfo.DefaultThreadCurrentCulture?.Name
<br />
<b>DefaultThreadCurrentUICulture:</b> @CultureInfo.DefaultThreadCurrentUICulture?.Name
<br /><br />
<b>Val 1:</b>
<TelerikNumericTextBox @bind-Value="@Val1" Decimals="6" Width="100px" />
&nbsp;&nbsp;
<TelerikNumericTextBox @bind-Value="@Val1" Decimals="6" Width="100px" />
<input type="number" @bind-value="@Val1" step="any" style="width: 100px" />

<br />
<b>Val 2:</b>
<input type="number" @bind-value="@Val2" step="any" style="width: 100px" />
&nbsp;&nbsp;
<input type="number" @bind-value="@Val2" step="any" style="width: 100px" />

@code {
    decimal Val1 { get; set; }
    decimal Val2 { get; set; }

    protected override void OnInitialized()
    {
        CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("es-ES");
        //CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-US");
    }
}

 

[ADMIN EDIT]

In general, our components obey the culture that is set in the application. If the current culture requires a "," decimal separator, our component will accept commas and ignore dots. Our component doesn't know if the user is pressing the decimal separator key on the numeric pad, or the "standard"  [ > . ] key.

What we can do to improve the behavior is to implement a feature for automatic handling of the decimal separator character. In other words, if the component detects invalid decimal separator input, it will switch to the correct one. This feature will handle the Numpad key and output it in the right culture.

Here is a possible workaround that uses JavaScript to intercept the "other" decimal separator and insert the "correct" one in the NumericTextBox.

@inject IJSRuntime js

<span @onkeydown="@( (KeyboardEventArgs args) => OnSpanKeyDown(args, "ntb1") )">
    <TelerikNumericTextBox @bind-Value="@DValue"
                           Width="200px"
                           Id="ntb1" />
</span>

Code: @LogCode , Key: @LogKey

<!-- Move JS to external JS file in production apps -->
<script suppress-error="BL9992">
    function addDot(ntbId) {
        var textbox = document.querySelector("#" + ntbId);
        if (textbox && textbox.value.indexOf(".") == -1) { // or ","
            textbox.value += "."; // or ","
        }
    }
</script>

@code {
    decimal DValue { get; set; }

    string LogCode { get; set; }
    string LogKey { get; set; }

    async Task OnSpanKeyDown(KeyboardEventArgs args, string ntbId)
    {
        LogCode = args.Code;
        LogKey = args.Key;

        if (args.Key == ",") // or "."
        {
            await js.InvokeVoidAsync("addDot", ntbId);
        }
    }
}

Another option in the meantime is to use a standard HTML input or InputNumber with the Telerik CSS class "k-textbox". This way the input will look the same as a Telerik textbox and keep the app look consistent.

Completed
Last Updated: 08 Sep 2020 12:21 by ADMIN
Release 2.17.0

I am getting the following Exception when I:

  • Navigate to a page that has a component that uses NumericTextBox.
  • Hit refresh (F5)
  • Wait for about 60 seconds while leaving the page idle

Trace stack of the error:

 

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'pPIYHdNTGKpuLp_f48NvOZyLpp6b2uJIdLYu2ndwIlc'.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikNumericTextBoxBase`1.Dispose()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

 

Completed
Last Updated: 31 Mar 2022 10:30 by ADMIN
Release 3.2.0
Created by: Larry
Comments: 1
Category: NumericTextBox
Type: Feature Request
7
This lets mobile devices with a virtual keyboard show the proper keyboard when the input is focused (that is, for numbers).
Unplanned
Last Updated: 18 Jul 2024 17:19 by shah

Subject says it all.  I've got a grid that contains multiple NumericTextBoxes....  my users need to be able to copy and paste price values that contain formatting...commas, periods, dollar signs.

Can there be an option to automatically strip off / ignore formatting values in pasted data?

Completed
Last Updated: 05 May 2020 14:13 by ADMIN
Release 2.13.0
Created by: Sylvain
Comments: 3
Category: NumericTextBox
Type: Bug Report
5
The textbox renders its custom Class on the span, not the main wrapping div:
Completed
Last Updated: 19 Aug 2022 08:31 by Nitesh
Release 3.2.0
Created by: Javier
Comments: 2
Category: NumericTextBox
Type: Feature Request
5
I would like to prevent the browser from suggesting inputs on the numeric texbox, like the "regular" textbox has an Autocomplete parameter.
Unplanned
Last Updated: 29 Jul 2021 07:34 by ADMIN
Created by: JOSHUA
Comments: 0
Category: NumericTextBox
Type: Feature Request
5
Is it possible to get the Telerik Calculator DropDown as seen in the WinForms?
Completed
Last Updated: 22 Apr 2024 09:54 by ADMIN
Release 2024 Q2 (May)

Hi,

I have found a bug with the TelerikNumericTextBox in that it doesn't function correctly with nullable types (at least it doesn't with Nullable<int>). I have confirmed this is the case for both 2.28 and 2.29 versions of Kendo for Blazor.

Description of the issue:

If "TelerikNumericTextBox" is "@bind-Value" to a nullable int, the control exhibits some unusual behaviour. If you manually type 0 into the control, it is accepted and the value updates the view-model property. However, if you use either the down-arrow button or arrow keys to select 0 (on a fresh load so there is no existing value selected/set), it does not set/update the view-model property. However, it does work correctly if you select another value first (such as 1) and then select 0.

Unfortunately, this is confusing the end-users of my application and I believe it is a bug (I haven't noticed this when using the Kendo for Angular or Kendo for JQuery).

In my application, I need users to be able to set the value of 0 but we do not want to set an initial value for the NumericTextBox to be 0 as this could lead our customers on; the application in question is requiring the end-user to manually select the number rather than allowing them to just leave it as default. Therefore, the view-model property I am binding to has been put as "int?" so that the default value is null and validation will require the user to select a valid value if they just try and press save without making any changes. Please note, for our use case, the number 0 is a valid option!

Steps to reproduce the issue:

Use the following razor HTML

The new value is: @TheValue

<TelerikNumericTextBox Format="D" Max="10" Min="0" Step="1" @bind-Value="@TheValue"></TelerikNumericTextBox>

@code {
    public int? TheValue { get; set; }
}

Click into the control and either press "down" on the keyboard arrow keys or press the "down" icon next to the control, so the value is set to be 0. The number 0 will not be set/persisted to the view-model property even though the control shows a 0 value.

If you have multiple controls on the page, following the above steps will mean that as soon as you click into another control, 0 is deleted (I believe because the VM prop has not been set), this does not happen if you type 0 into the control.

HOWEVER

If you continue to use the same Razor code above and any of the following workflows, it will set the controls view-model property correctly:

  • Type 0 into the control - value is set correctly and property on the view-model is updated
  • Select "up" on the keyboard (so the value is 1) and then press down (so the value is 0) - 0 is set correctly and property on the view-model is updated
  • Select "up" on the numeric textbox's up arrow button (so the value 1) and then press "down" on the down arrow button (so the new value is 0) - 0 is set correctly and property on the view-model is updated

Additional notes:

  • I have noticed this only seems to apply to the nullable version of the int type, if the prop is just an int, the control works fine but is automatically defaulted to 0 (which is not appropriate for my use case)
  • It seems that as soon as the control/view model property has an initial value, the control behaves normally and the issue no longer happens anymore (both with keyboard navigation and the control's up/down buttons).
  • I have not tested with any other types/primitives, just on INT so far
  • I have confirmed this happens if you have the control in an "<EditForm/>" or outside of an EditForm. 

I have attached a sample project where I have replicated the issue, it is just a simple NET5 WASM Blazor project (generated from the default template) and I have just added the latest Kendo for Blazor. Nothing else has been done except for demoing on the "index.razor" both binding approaches I have tried/been able to replicate this issue on.

 

I hope the above makes sense, let me know if you need any further clarification.

Unplanned
Last Updated: 07 Nov 2024 07:54 by René

With
<TelerikNumericTextBox @bind-Value="myValue" Format="C" SelectOnFocus="true">
the content of the input is not selected upon focussing.  Without the Format="C" it is.

Completed
Last Updated: 09 Dec 2019 15:12 by ADMIN

When running as Spanish (es) the control correctly shows commas as the decimal separator but see below.  The control seems pretty broken when running under Spanish.

 

1) When I focus into the text box above that started off bound to a value I am unable to change the value by typing more numbers.  I should be able to put my cursor in front of "33,300" and type "4" it should result in "433,300".  Instead, nothing happens when I type "4".  If I delete ",300" from the end the control then allows numeric entry.

2) If I delete the full number and type in a new one I am unable to enter "." or ",".  Those keys are being ignored.

 

 


Declined
Last Updated: 03 Oct 2024 22:14 by Kris Nobels
I believe that the OnChange event should fire when the up or down arrows are clicked.  Clicking the up and down arrow buttons is making a concrete decision to change the value of the textbox.  Similar to selecting a date in DatePicker fires OnChange, this should have the same expectation.
Unplanned
Last Updated: 05 Sep 2023 07:02 by Carlos
Created by: Carlos
Comments: 0
Category: NumericTextBox
Type: Feature Request
4
I want to prevent the input of emojis in the NumericTextBox, just like with characters. 
Completed
Last Updated: 26 Apr 2022 20:30 by ADMIN
Release 3.3.0
Created by: Timothy J
Comments: 1
Category: NumericTextBox
Type: Feature Request
3

Can NumericTextBox Format Be Updatedat run time?  In other words, if numerictextbox is being used for dimensions and the user changes the preferred dimensional unit from "centimeters" to "inches" can the Format be changed from "0.## cm" to "0.## in" at runtime?

Same applies if I want to dynamically change the Decimals or Step values. Currently it looks like a dynamic change in the NumericTextBox parameters is not possible.

---

ADMIN EDIT

Here is a workaround that re-initializes the component:

 

<TelerikButton OnClick="@ChangeFormat">Change format</TelerikButton>
<br />
The value is: @theValue
<br />
@if (isVisible) {
<TelerikNumericTextBox Format="@theFormat" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@theValue"></TelerikNumericTextBox>
}
@code {
    private decimal theValue { get; set; } = 1.234m;
    string theFormat { get; set; } = "0.## cm";

    bool isVisible { get; set; } = true;
    async Task ChangeFormat()
    {
        //workaround
        isVisible = false;
        await Task.Delay(30);
        await InvokeAsync(StateHasChanged);

        // change the format
        theFormat = "0.## in";

        //workaround
        isVisible = true;
        //await InvokeAsync(StateHasChanged);
    }
}

 

---

Duplicated
Last Updated: 07 Mar 2024 13:49 by ADMIN

I have a NumericTextBox inside a Grid EditorTemplate. The edit more is InCell.

The OnChange event of the NumericTextBox will not fire if the user tabs out of the NumericTextBox.

Completed
Last Updated: 11 Nov 2023 07:51 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
Created by: Dev
Comments: 0
Category: NumericTextBox
Type: Bug Report
3
NumericTextBox does not allow copy and paste on Mac/Safari. It works on Chrome/Mac.
Unplanned
Last Updated: 26 Sep 2024 12:33 by ADMIN

If I type the maximum value for a decimal (79228162514264337593543950335) and then try to increase the number through the arrow buttons, I get the following exception:

System.OverflowException: Value was either too large or too small for a Decimal.

The behavior is reproducible with or without setting the Max parameter to decimal.MaxValue: https://blazorrepl.telerik.com/mSuFwebI299wPCzV25.

Duplicated
Last Updated: 07 Nov 2024 07:12 by ADMIN
Created by: Justin
Comments: 4
Category: NumericTextBox
Type: Bug Report
3

When SelectOnFocus="true" is enabled on the NumericTextBox control, and a format (e.g., Format="N1") is set, the SelectOnFocus functionality does not select all text if the decimal value has no trailing digits. For instance, with the value 76, the text is not selected on focus, but with the value 76.1, the text is selected correctly.


<TelerikNumericTextBox @bind-Value="@DecimalValue" Format="N1" SelectOnFocus="true"/>

@code {
    private decimal DecimalValue = 76;
}

 

Steps to Reproduce:

  1. Add a NumericTextBox control to a Blazor Server application.
  2. Set SelectOnFocus="true".
  3. Set a format, e.g., Format="N1".
  4. Enter a value such as 76 (with no trailing digits after the decimal point).
  5. Focus on the NumericTextBox.

Expected Behavior: The entire text (in this case, 76.0) should be selected when the NumericTextBox gains focus.

Actual Behavior: The text is not selected when the NumericTextBox gains focus if the value has no trailing digits after the decimal point (e.g., 76). However, if the value includes trailing digits (e.g., 76.1), the text is selected as expected.

Completed
Last Updated: 06 Jan 2021 08:06 by ADMIN
Release 2.21.0
Created by: Wei
Comments: 0
Category: NumericTextBox
Type: Bug Report
2
if the binding type of the NumericTextBox is short or int, the input only allows numeric chars. 

for type decimal for example, input box allows one Letter and the box got red border highlight. user can't enter more letters,  but why is it not behaving the same as type int?

https://demos.telerik.com/blazor-ui/numerictextbox/overview

you can try on the demo link - first 2 input only allows numeric chars. 
1 2