Date and Number Formatting

Number Formatting

To set the required format for number fields, you should use the format attribute.

Using number templates

webix.grid({
  columns:[
    {
      id:"votes", format:webix.Number.numToStr({
        groupDelimiter:",",
        groupSize:3,
        decimalDelimiter:".",
        decimalSize:2
      })
    },
    // ...
  ]
});

Related sample:  Using Number Templates

The numToStr method allows you to set the following properties for fractional numbers:

• groupDelimiter - a symbol that will be used to divide numbers with many digits into groups;
• groupSize - the number of digits in a group;
• decimalDelimiter - a symbol that will be used as the decimal delimiter;
• decimalSize - the number of digits after the decimal delimiter.

There are two default presets: numberFormat and priceFormat. They provide number and price formatting according to the current locale:

webix.grid({
  columns:[
    { id:"votes", format:webix.i18n.numberFormat },
        { id:"price", format:webix.i18n.priceFormat }
  ]
});

For details on number formatting methods, see Number Formatting Methods.

Setting numeric format for editors

You can apply the number format for datagrid editors via the numberFormat attribute of the columns:

webix.grid({
    columns:[
        { id:"votes", editor:"text", numberFormat:"1'111.00", header:"Votes"},
        { id:"rating", editor:"text", numberFormat:"1.111,00", header:"Rating"}
    ]
});

The format string must follow the same rules as the format property of the Text control.

Custom number format for editors

You can also specify a custom number format for datagrid editors via functions set in the format, editParse, and editFormat attributes of the columns:

webix.grid({
    columns:[
        {
      id:"phone", editor:"text", header:"Votes",
         format:function(value){
            return webix.i18n.numberFormat(value)
          },
          editParse: function(value){
            return webix.Number.parse(value, {
          groupSize:webix.i18n.groupSize,
          groupDelimiter:webix.i18n.groupDelimiter,
          decimalSize : webix.i18n.decimalSize,
          decimalDelimiter : webix.i18n.decimalDelimiter
        });
      },
      editFormat:function(value){
        return webix.i18n.numberFormat(value)
          }
    }
    ]
});

Date Formatting

Dates in DataGrid can be both DateTime and string, but formatting can be applied only to DateTime objects. Therefore, to format string values you should convert them to DateTime format first.

Common date formatting

To set the required format for date and time, set the format attribute as:

• Members of the i18n object;
• The webix.Date.dateToStr method of the Date object.

Setting date formats

webix.grid({
  columns:[
    { template:"#start#", header:"Date",  format:webix.i18n.dateFormatStr},
    {
      template:"#start#",
      header:"Y-m-d",
      format:webix.Date.dateToStr("%Y-%m-%d")
    }
  ],
  data:[
    { text:"Finish", start:new Date(2012,11,12) },
    { text:"Start",  start:new Date(1988,1,29) }
  ]
});

Related sample:  Using Date Templates

For details on date formatting methods, see Date Formatting Methods.

Converting string values to DateTime format

To correctly work with dates, you need to have data in the grid as a valid Date object, but in all common formats data are presented as a string. DataGrid provides a way to mark columns for auto-conversion from Date string to Date objects:

webix.grid({
  columns:[
    { map:"(date)#start#", header:"Date",  format:webix.i18n.dateFormatStr}
  ]
});

Related sample:  Converting Strings to Dates

The (date) marker at the start of a map declaration forces data conversion from string to object. By default, a datagrid will assume that data will be in the “%Y-%m-%d” format (mysql date format), but you can change it as follows:

webix.i18n.parseFormat = "%m.%d.%Y";
webix.i18n.setLocale();

Read more in Date Formatting Methods.

Custom Formatting

You can apply custom formatting to a column with the format attribute defined as a function (the function accepts a raw value and returns a formatted one).

webix.grid({
    columns:[
    { id:"title", header:"Film title" },
    {
      id:"votes", header:"Votes",
      format:function(value){
        value = some_custom_logic(value);
        return value;
      }
    }
    ],
    // ...
});