Your search did not match any results.
Number Box

Formatting

Use the format property to specify the currency, accounting, percentage, and other NumberBox formats.

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

Backend API
Copy to CodePen
Apply
Reset
const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.currencyFormat = { format: '$ #,##0.##', value: 14500.55, }; $scope.accountingFormat = { format: '$ #,##0.##;($ #,##0.##)', value: -2314.12, }; $scope.percentFormat = { format: '#0%', value: 0.15, step: 0.01, }; $scope.fixedPointFormat = { format: '#,##0.00', value: 13415.24, }; $scope.weightFormat = { format: '#0.## kg', value: 3.14, }; });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/21.2.7/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Currency format</div> <div class="dx-field-value"> <div dx-number-box="currencyFormat"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Accounting format</div> <div class="dx-field-value"> <div dx-number-box="accountingFormat"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Percent format</div> <div class="dx-field-value"> <div dx-number-box="percentFormat"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Fixed point format</div> <div class="dx-field-value"> <div dx-number-box="fixedPointFormat"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Weight format</div> <div class="dx-field-value"> <div dx-number-box="weightFormat"></div> </div> </div> </div> </div> </body> </html>
.dx-field { margin-bottom: 20px; }