Intermediate

Number Formatting Methods

There are predefined methods for number formatting:

Localization

var string1 = webix.i18n.numberFormat("123.45");
var string2 = webix.i18n.intFormat("123.45")
var string3 = webix.i18n.priceFormat("123.45");

They will format data according to the rules stated in the current locale.

Applying locales within a component:

// datatable
{ header:"LongDate", width:170,  id:"start", format:webix.i18n.numberFormat }
 
// other components
template:function(obj) {return webix.i18n.numberFormat(obj.start); }

Dive into Date and Number localization article.

Custom Formatting

If you need to format a number with custom formatting rules, you can use methods in the Number class that offers a set of necessary methods:

Here you need to specify rules right in a data component:

var string1 = webix.Number.format("123.45",{
    groupDelimiter:",",
    groupSize:3,
    decimalDelimiter:".",
    decimalSize:2
});

Applying format within a component:

// datatable
{ header:"LongDate", width:170,  id:"votes", format:webix.Number.numToStr({
        groupDelimiter:"",
        groupSize:0,
        decimalDelimiter:",",
        decimalSize:5
   }); 
}
 
// other components
template:function(obj) {
    return webix.Number.numToStr({
        groupDelimiter:"",
        groupSize:0,
        decimalDelimiter:",",
        decimalSize:5   
    });
}

Related sample: Using Number Templates

You can also get the object with configuration options used for formatting:

var cfg = webix.Number.getConfig("1'111.00"); 
// ->{decimalSize: 2, groupSize: 3, decimalDelimiter: ".", groupDelimiter: "'"}

and define the format of a parsed value:

var num1 = webix.Number.parse("10'009.00", {
    decimalSize: 2, groupSize: 3, 
    decimalDelimiter: ".", groupDelimiter: "'"
});
// -> 10009