===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:
- Subscribe to the paste event of the NumericTextBox <input>
- Check for "invalid" pasted content that you need
- Set the <input> value manually with JavaScript
- 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);
}
}