Completed
Last Updated:
17 May 2022 11:19
by ADMIN
Release 3.4.0
Jason
Created on:
16 May 2022 12:26
Category:
NumericTextBox
Type:
Bug Report
Cannot paste number from Excel into NumericTextBox
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);
}
}
0 comments