CODEWITHSUNDEEP
c#htmlinputblazor
Mteheran
Mteheran

Reputation: 293

How can I set a format for input numbers in Blazor

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

Upvotes: 7

Views: 17712

Answers (3)

Mteheran
Mteheran

Reputation: 293

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;

            }
        }

Upvotes: 0

Artiom
Artiom

Reputation: 267

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.

Upvotes: 11

Tiny Town Software
Tiny Town Software

Reputation: 177

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.

Upvotes: 0

Related Questions