How can I set a format for input numbers in Blazor

user_5472737 0
Viewed 9170

I have the following input

<input type="number" @bind="@object.AllocationPercentage" />

the binding is fine but it is showing a lot of digits

enter image description here

How can I set a specific number format like "F2" or "C2" ?

I know that it is possible for dates

using @bind-format

blazor input html c#
3 Answers

Work around could be:

<input type="number" value="@(numberVariable.ToString("G29"))" @onchange="@(e => numberVariable = decimal.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture))" />

@code{
    private decimal numberVariable {get;set;}
}

Basically you set value without binding and update it during onchange event.

user_97187080

At this time it is not possible with native Blazor controls. However, it is available in a number of third party libraries. This is a free one: Radzen

It is also available in premium ones, such as Telerik and Syncfusion.

user_141719770

I could found a solution returning a specific format in the property of the object.

In this way, I could remove the 0 decimals at the end.

  private MyClass _object;

        public MyClass object
        {
            get => _object;
            set
            {
                _object = value;
                _object. AllocationPercentage = _object.AllocationPercentage / 1.000000000000000000000000000000000m;

            }
        }
user_54727370
Related