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".
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>
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.
===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;
}
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.
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:
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);
}
}