Allow formatted numbers (e.g. 1,234,567.89) to be pasted into a NumericTextBox

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 18 Jul 2024 17:19 by shah

Jeffrey

Created on: 07 Feb 2022 17:21

Category: NumericTextBox

Type: Feature Request

Allow formatted numbers (e.g. 1,234,567.89) to be pasted into a NumericTextBox

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?

4 comments

shah

Posted on: 18 Jul 2024 17:19

How can we get the same functionality in telerik blazor grid.

Jeffrey

Posted on: 11 Feb 2022 14:45

Thanks so much Dimo... I had actually stumbled upon dispatchEvent yesterday and sure enough.. it did the trick!!!

ADMIN

Dimo

Posted on: 11 Feb 2022 12:49

Hello Jeffrey,

In general, the Blazor framework ignores value changes "behind its back". The framework keeps the browser page state synchronized with the Razor component state in the .NET runtime. When something on the web page changes with JavaScript, it can be easily overridden in such scenarios.

You can "tell" the framework that the textbox value has changed - for example, dispatch the oninput event programmatically (we listen for it).

Here is a test page. The highlighted line makes all the difference.

<p>@NumValue.ToString()</p>

<TelerikNumericTextBox @bind-Value="@NumValue" Id="numtb" />

<script suppress-error="BL9992">
    var i = setInterval(function() {
        var input = document.getElementById("numtb");
        input.value = (new Date()).getMilliseconds();
        input.dispatchEvent(new Event('input', { bubbles: true, cancelable: true  }));
    }, 1234);
</script>

@code {
    int NumValue { get; set; }
}

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jeffrey

Posted on: 08 Feb 2022 18:10

As an aside... In javascript, I implemented a dynamic event listener to the input elements that get generated in the grid to handle the paste event. The handler works and strips out the non-numeric values and then sets the value in the input element. (e.g. event.target.value = scrubbedData).

I see the value as expected on the web page, but when I leave the field, it reverts to the original value in the field which makes me think that somehow the NumericTextBox component isn't recognizing the value that is set via javascript.