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.
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>
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.
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?
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" />
<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" />
<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.