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.

Unplanned
Last Updated: 24 Jan 2024 14:34 by Patrik Madliak

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.

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.
Completed
Last Updated: 19 Jul 2022 13:52 by ADMIN
Release 3.5.0

===ADMIN EDIT===

In the meantime, a possible workaround is to set the "DebounceDelay" parameter to "0".

================

I use 2 different numeric Text Boxes (one for the cost of a product and another for the tax):

The expected behavior that I am trying to get is:

    - If I type a cost and leave the field (OnBlur event) then it calculates automatically 5% and set the value for the tax

    - However, I want also to allow users to go to the Tax textbox and type a different value (zero for instance)

If I just keep typing different costs the Tax is always calculated and bound correctly as expected:

However, if I go directly to the Tax textbox and type any value there, then this value is always used as a cached value, even if type a new cost and recalculated it:

Eg. Let's say that I typed 10.00 in the tax:

Then if I go to the cost and type 25.00 we would expect that the tax bound variable is 1.25. This is correct while the control still has the focus:

But as soon as I leave the field then the value is reverted back to 10.00:

This is the code that I have:

<div class="form-group col-4">
      <label for="prodCost">Cost</label>
      <TelerikNumericTextBox Id="prodCost" Arrows="false" T="decimal" Decimals="2" Format="C" Min="0.00m" @bind-Value="@product.Cost" OnBlur="BlurCost" ></TelerikNumericTextBox>                                                       
</div>     
                        
<div class="form-group col-4">
      <label for="prodTax">Tax</label>
      <TelerikNumericTextBox  Id="prodTax" Arrows="false" T="decimal" Decimals="2" Format="C" Min="0.00m" @bind-Value="@product.Tax"></TelerikNumericTextBox>                                                                                   
</div>

private void BlurCost()
 {   
     var newTax = product.Cost * (decimal)0.05;
     product.Tax = newTax;               
 }

 

Completed
Last Updated: 17 May 2022 11:19 by ADMIN
Release 3.4.0
Created by: Jason
Comments: 0
Category: NumericTextBox
Type: Bug Report
0

The NumericTextBox does not allow pasting from an Excel cell. Pasting from the plain text textbox at the top of the Excel interface works.

The problem is caused by a new line character, which Excel adds to the clipboard value when copying the cell directly. A possible workaround is:

  1. Subscribe to the paste event of the NumericTextBox <input>
  2. Check for "invalid" pasted content that you need
  3. Set the <input> value manually with JavaScript
  4. Notify the component's instance in the .NET runtime

The important thing to keep in mind is: the JavaScript workaround should work only for pasted content, which the NumericTextBox does not allow. Otherwise the app will edit the value one extra time. In the example below, the script checks specifically for a new line at the end of the pasted value.

@inject IJSRuntime js

<TelerikNumericTextBox @bind-Value="@NumValue" Width="200px" Class="fix-paste" />

@* suppress-error allows script tags in Razor components. Move this script to a proper place in production environment. *@
<script suppress-error="BL9992">function fixPaste() {
    var inputs = document.querySelectorAll(".fix-paste .k-input-inner");
    inputs.forEach(element => {
        element.addEventListener("paste", function(e) {
            // get pasted content
            debugger;
            var pastedString = e.clipboardData.getData("text/plain");
            // check for specific content, which DOES NOT pass the built-in validation
            // adjust this conditional statement, according to the application scenario
            if (pastedString.indexOf("\n") == pastedString.length - 1) {
                // assign the pasted content manually
                e.target.value = pastedString.trim();
                // tell the component's .NET instance to change the value
                e.target.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
            }
        });
    });
}</script>

@code {
    double NumValue { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("fixPaste");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

 

Completed
Last Updated: 28 Feb 2022 09:50 by ADMIN
Release 3.1.0

In versions of Telerik.UI.for.Blazor v2 all the way up to v2.30.0, the NumericTextBox, when provided a Min and Max would display an indication that a number is out-of-range by marking the input as invalid while the focus remained within the input.

After upgrading to v3, the invalid indication no longer happens.

In the attached example project, you'll find that using v3 NumericTextBox with Min=0 and Max=5, does not indicate invalidity if you enter "9" for instance. The input just snaps to 5 when the input loses focus.

If you instead use v2.30.0, it will show the border of the input in red when entering "9".

Unplanned
Last Updated: 19 Nov 2021 08:56 by ADMIN

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.

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. 
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: 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: 18 Sep 2019 06:56 by ADMIN
Release 2.0.0

 

Create a variable like below and bind the numeric text box to it:

 

decimal? myNumber = 9;

decimal? MyNumber

{

   get { return this.myNumber; }

   set { this.myNumber = value; }

}

 

Put a breakpoint on the setter, run the application, and clear out the text box.  The breakpoint will never be hit.  If you enter a numeric value the breakpoint will be hit.  The problem appears to only be with clearing the text box.