At the moment, the selection behavior of the NumericTextBox can vary depending on the Format - the Format is what is shown when the input does not have focus, and the Decimals control the actual number the user will see when they focus. Of both differ (for example, the Format has more decimal places, or some other information like a unit of measurement), the input value changes on focus, which removes the selection (highglight).
I would like the numeric textbox to always select all its content when it gets focused (either with the Tab key, or with a click).
Note on general input behavior - using Tab to focus in a field usually defaults to all the contents being selected, while a click results in a cursor without selection.
---
ADMIN EDIT
---
The request is initially opened for the NumericTextBox but also targets some other components that incorporate inputs, such as DatePicker.
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.
Can NumericTextBox Format Be Updatedat run time? In other words, if numerictextbox is being used for dimensions and the user changes the preferred dimensional unit from "centimeters" to "inches" can the Format be changed from "0.## cm" to "0.## in" at runtime?
Same applies if I want to dynamically change the Decimals or Step values. Currently it looks like a dynamic change in the NumericTextBox parameters is not possible.
---
ADMIN EDIT
Here is a workaround that re-initializes the component:
<TelerikButton OnClick="@ChangeFormat">Change format</TelerikButton>
<br />
The value is: @theValue
<br />
@if (isVisible) {
<TelerikNumericTextBox Format="@theFormat" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@theValue"></TelerikNumericTextBox>
}
@code {
private decimal theValue { get; set; } = 1.234m;
string theFormat { get; set; } = "0.## cm";
bool isVisible { get; set; } = true;
async Task ChangeFormat()
{
//workaround
isVisible = false;
await Task.Delay(30);
await InvokeAsync(StateHasChanged);
// change the format
theFormat = "0.## in";
//workaround
isVisible = true;
//await InvokeAsync(StateHasChanged);
}
}
---
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.
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.
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.