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?
===
TELERIK EDIT
A possible workaround is to:
- Intercept the JavaScript paste event for the NumericTextBox
- Obtain and parse the pasted formatted value. This requires JavaScript clipboard access.
- Insert the non-formatted value in the <input> element programmatically
- Simulate user typing with an input event.
@using System.Globalization
@inject IJSRuntime js
<TelerikNumericTextBox @bind-Value="@NumericValue"
Format="C2"
Id="ntb1"
Width="200px" />
@* Move JavaScript code to a separate JS file *@
<script suppress-error="BL9992">
var currencySymbol = "";
var groupSeparator = "";
function onAfterRenderJs(currencySym, groupSep) {
currencySymbol = currencySym;
groupSeparator = groupSep;
var input = document.getElementById("ntb1");
if (input) {
input.addEventListener("paste", onNumericTextBoxPaste);
}
}
async function onNumericTextBoxPaste(e) {
let pastedValue = await navigator.clipboard.readText();
if (pastedValue.indexOf(currencySymbol) == -1 && pastedValue.indexOf(groupSeparator) == -1) {
return;
}
e.target.value = pastedValue.replace(currencySymbol, "").trim().replace(groupSeparator, "");
e.target.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
}
</script>
@code {
private decimal NumericValue { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Task.Delay(1); // ensure HTML is ready
await js.InvokeVoidAsync("onAfterRenderJs",
CultureInfo.CurrentCulture.NumberFormat.CurrencySymbol,
CultureInfo.CurrentCulture.NumberFormat.NumberGroupSeparator);
}
await base.OnAfterRenderAsync(firstRender);
}
}
The NumericTextBox does not render the new Value that is set in ValueChanged if this new value is different than the event argument. Instead, the component clears the textbox, even though the component Value parameter is correct.
https://blazorrepl.telerik.com/wzaAHYas221go9xd48
The problem occurs only if there is an existing value and the user removes it with Backspace.
On the NumericTextBox example here
If you put the NumericTextBox in edit mode and hold the up or down key on the keyboard, the value auto increments/decrements.
1/ Can you please replicate this when the mouse is held down when clicking the up down spinner buttons? Users don't want to always use keyboard for this function.
2/ Can you add an acceleration property, eg when mouse/key is held down it increments at rate n1 for first few seconds, then after time s1 it will increment at rate n2 for remaining time mouse/key held?
Also, sharing a possible hotifix:
<fieldset disabled="@(CurrEdit.CanEdit != true)" @key="@RenderCycle">
<table id="rdt">
<caption class="form__header">header</caption>
<thead>....</thead>
<tbody>
<tr>
<td>1</td>
<td><TelerikNumericTextBox Id="era0_0" @bind-Value="@era[0].C0" Decimals="2" SelectOnFocus="true" Class="bg-yellow" Arrows="false" AutoComplete="off" /></td>
<td><TelerikNumericTextBox Id="era0_1" @bind-Value="@era[0].C1" Decimals="1" SelectOnFocus="true" Class="bg-yellow" Arrows="false" AutoComplete="off" /></td>
<td><TelerikNumericTextBox Id="era0_2" @bind-Value="@era[0].C2" Decimals="1" SelectOnFocus="true" Class="bg-yellow" Arrows="false" AutoComplete="off" /></td>
<td class="clblue">@era[0].C3?.ToString("N0")</td>
<td><TelerikNumericTextBox Id="era0_4" @bind-Value="@era[0].C4" Decimals="1" SelectOnFocus="true" Class="bg-yellow" Arrows="false" AutoComplete="off" /></td>
<td><TelerikNumericTextBox Id="era0_5" @bind-Value="@era[0].C5" Decimals="1" SelectOnFocus="true" Class="bg-yellow" Arrows="false" AutoComplete="off" /></td>
<td class="clblue">@era[0].C6?.ToString("N0")</td>
<td><TelerikNumericTextBox Id="era0_7" @bind-Value="@era[0].C7" Decimals="1" SelectOnFocus="true" Class="bg-yellow" Arrows="false" AutoComplete="off" /></td>
<td><TelerikNumericTextBox Id="era0_8" @bind-Value="@era[0].C8" Decimals="1" SelectOnFocus="true" Class="bg-yellow" Arrows="false" AutoComplete="off" /></td>
<td class="clblue">@era[0].C9?.ToString("N0")</td>
<td class="clblue">@era[0].C10?.ToString("N0")</td>
<td><TelerikNumericTextBox Id="era0_11" @bind-Value="@era[0].C11" Decimals="0" SelectOnFocus="true" Class="bg-yellow" Arrows="false" AutoComplete="off" /></td>
</tr>
....
</tbody>
</table>
</fieldset>
@code
{
protected int RenderCycle { get; set; } = 0;
protected override async Task OnInitializedAsync()
{
await LoadData(-1);
}
async Task LoadData(int typ)
{
if (IsBusy == true) return;
try
{
era=await LoadDataFromAnywhere();
erb=await LoadDataFromAnywhere();
erc=await LoadDataFromAnywhere();
...
} finally
{
IsBusy = false;
IsFirstLoad = false;
RenderCycle += 1;
}
}
}