Number Box - Formatting

Use the format property to specify the integer, currency, accounting, percent, and other formats of the NumberBox value.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

​x
 
<div class="dx-fieldset">    <div class="dx-field">        <div class="dx-field-label">Integer format</div>        <div class="dx-field-value">            @(Html.DevExtreme().NumberBox()                .Format("#")                .InputAttr("aria-label", "Integer Format")                .Value(14500)            )        </div>    </div>    <div class="dx-field">        <div class="dx-field-label">Currency format</div>        <div class="dx-field-value">            @(Html.DevExtreme().NumberBox()                .Format("$ #,##0.##")                .InputAttr("aria-label", "Currency Format")                .Value(14500.55)            )        </div>    </div>    <div class="dx-field">        <div class="dx-field-label">Accounting format</div>        <div class="dx-field-value">            @(Html.DevExtreme().NumberBox()                .Format("$ #,##0.##;($ #,##0.##)")                .InputAttr("aria-label", "Accounting Format")                .Value(-2314.12)            )        </div>    </div>    <div class="dx-field">        <div class="dx-field-label">Percent format</div>        <div class="dx-field-value">            @(Html.DevExtreme().NumberBox()                .Format("#0%")                .Value(0.15)                .InputAttr("aria-label", "Percent Format")                .Step(0.01)            )        </div>    </div>    <div class="dx-field">        <div class="dx-field-label">Fixed point format</div>        <div class="dx-field-value">            @(Html.DevExtreme().NumberBox()                .Format("#,##0.00")                .InputAttr("aria-label", "Fixed Point Format")                .Value(13415.24)            )        </div>    </div>    <div class="dx-field">        <div class="dx-field-label">Weight format</div>        <div class="dx-field-value">            @(Html.DevExtreme().NumberBox()                .Format("#0.## kg")                .InputAttr("aria-label", "Weight Format")                .Value(3.14)            )        </div>    </div></div>​

xxxxxxxxxx
 
using Microsoft.AspNetCore.Mvc;​namespace DevExtreme.NETCore.Demos.Controllers {    public class NumberBoxController : Controller {        public ActionResult Formatting() {            return View();        }    }}

xxxxxxxxxx
 
.dx-field {    margin-bottom: 20px;}

The format property can accept the following value types:

Predefined format
See the type property description for a list of accepted values.
Custom format string
Use a LDML pattern to specify a custom format. Refer to the following article for more information: Custom Format String.
Function
A function should apply a custom format to a value and return the formatted value as a string. Functions are useful for advanced formatting.
Object
Full format configuration. The object structure is shown in the format API section.