Number Box ▸ Formatting

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

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.

Integer format

Currency format

Accounting format

Percent format

Fixed point format

Weight format

<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>

using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class NumberBoxController : Controller {

        public ActionResult Formatting() {
            return View();
        }

    }
}

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