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: 28 Oct 2024 18:02 by ADMIN

The value in a numeric textbox cannot be changed for negative numerbes unless you erase all the text and restart.

 

<TelerikNumericTextBox Decimals="4"Max="5"Value="-4.56m"Id="general"></TelerikNumericTextBox>

 

    
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.

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;               
 }

 

Declined
Last Updated: 25 Sep 2024 11:17 by ADMIN

I am creating a wrapper over the TelerikNumericTextBox component so that it works with all numeric data types (such as int, decimal, double, etc). I have added custom parameters for the Min and Max, and if they are not explicitly set I would like them to default to T.MinValue and T.MaxValue respectively. 

Completed
Last Updated: 06 Jan 2020 14:38 by ADMIN
Release 2.6.0
At the moment, if bound to an Int16 (short) field, the numeric textbox throws an exception - `"The type 'System.Int16' is not supproted by the Component"`
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);
    }
}

 

Declined
Last Updated: 03 May 2023 12:57 by ADMIN
Created by: Wes
Comments: 1
Category: NumericTextBox
Type: Feature Request
0
I have a numeric textbox that takes a large range and would never be changed sequentially.  For this reason, I would like to hide or disable the stepper control completely.  I think the most logical solution is to pass a null or empty value to the step parameter.  Can the control be updated to interpret the null such that the arrows are removed from the control?  I think this is a much better solution than modifying the appearance through CSS, and is less likely to be affected by subsequent control updates.
1 2