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.
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.
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)
When running as Spanish (es) the control correctly shows commas as the decimal separator but see below. The control seems pretty broken when running under Spanish.
1) When I focus into the text box above that started off bound to a value I am unable to change the value by typing more numbers. I should be able to put my cursor in front of "33,300" and type "4" it should result in "433,300". Instead, nothing happens when I type "4". If I delete ",300" from the end the control then allows numeric entry.
2) If I delete the full number and type in a new one I am unable to enter "." or ",". Those keys are being ignored.
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.