How to show a unit (e.g. EUR) while editing in a NumericTextBox (ASP.NET Core)

[Martin]

Hi,

is there a way to show the unit during editing in the NumericTextBox.

 

Right now the behavior is like this:

• Editing: 123,55  (without EUR)--> After losing the focus it's formating the value to 123,55 EUR

The desired behavior would be that the EUR would be showing up already in the editing mode.

• Editing 125,55 EUR 

 

Regards
Martin

[Stoyan]

Hi Martin,

The NumericTextBox Component is design to only enable digits as its input. Therefore modifying its value by adding a string may cause unexpected behaviors like posting wrongs values to the server.

That being said there are several alternatives to achieve the desired behavior:

1. Use the label of the NumericTextBox to add a permanent text that resembles the used currency.

               @(Html.Kendo().NumericTextBox()
                   .Name("euro1")
                   .Spinners(false)
                   .Label(l=>l.Content("EUR"))
               )

2. Use a MaskedTextBox to add the EUR text to the input. A drawback of this approach is the Mask requires you to predetermine the number of digits that can be entered.

    @(Html.Kendo().MaskedTextBox()
                     .Name("mask")
                     .Mask("000.00EUR")
     )

3. Use a TextBox and handle the keypress event of the input to add the EUR text at the end of the input. Using this approach requires further customisation to prevent the user to enter letters and non-alphanumeric characters.

   @(Html.Kendo().TextBox()
                     .Name("euro")
    )

  $(document).ready(function () {
        $("#euro").on("keypress", function (e) {
            var value = $("#euro").val();
            if (!value.includes("EUR")) {
                $("#euro").val(value + e.key + "EUR");
            } else { 
                $("#euro").val(value.replace("EUR", "") + e.key + "EUR");
            }
            e.preventDefault();
        })
    })

Please review this REPL that showcases the approaches listed above.

I hope the information above is helpful. If additional questions arise, please don't hesitate to contact us. Thank you.

Regards,
Stoyan
Progress Telerik