Number Editor

Number Editor is an editor that allows you to input numbers.

If you want to display thousands and millions separators when displayed on the screen, just set numberFormat to "#,##0", and when using a fixed decimal point, display "0" after the decimal point as many digits as necessary. , When using variable decimal points, use "#". For example, if you use a thousand separator and 3 fixed decimal places, you can use "#,##0.000", and if you use 4 fixed decimal places, you can use "#,##0.0000".

When numberFormat is applied, only the value of the cell displayed on the screen is changed, and the original value in the field of the dataProvider does not change.

Specify Number Format

In Number Format, '0' means a fixed digit. '#' means variable digits. For example, in the case of '#,##0.###', if the number to be displayed is an integer, only the integer will be displayed.

In case of '#,##0.###' 100 -> 100 10000 -> 10,000 100.1 -> 100.1 1000.12 -> 1,000.12 1000.1234 -> 1,000.123 1000.1237 -> 1,000.124

In case of '#,##0.000' 100 -> 100.000 10000 -> 10,000.000 100.1 -> 100.100 1000.12 -> 1,000.120 1000.1234 -> 1,000.123 1000.1237 -> 1,000.124

In case of '#,##0.0##' 100 -> 100.0 10000 -> 10,000.0 100.1 -> 100.1 1000.12 -> 1,000.12 1000.1234 -> 1,000.123 1000.1237 -> 1,000.124

...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editor: {
     type: "number",
     textAlignment: "far",
     //Format applied when inputting (only up to 3 decimal places can be entered)
     editFormat: "#,##0.###",
     multipleChar: "+",
   },
   //Format displayed in grid cells (displayed up to one decimal place)
   numberFormat: "#,##0.#",
   header: {
     "text": "Number Edit"
   }
}
...

Formatting can also be applied when the user enters a key.

If editor.editFormat is specified as "#,##0.###", a maximum of 3 decimal places are entered. (Note: If you write 0 as the decimal place in editFormat, it is treated the same as #.)

The example below is an example where up to 3 decimal places are entered when the user inputs, and only 1 decimal place is displayed in the cell displayed on the screen.

...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editor: {
     type: "number",
     textAlignment: "far",
     //Format applied when inputting (only up to 3 decimal places can be entered)
     editFormat: "#,##0.###",
     multipleChar: "+",
   },
   //Format displayed in grid cells (displayed up to one decimal place)
   numberFormat: "#,##0.#",
   header: {
     "text": "Number Edit"
   }
}
...

Thousands, and decimal points. change seats

In some countries, the thousands separator ',' and decimal point '.' are used in reverse (thousand separator '.', decimal point ','). In this case, the format string is ; The first specifies the format for expressing numbers, the second specifies the decimal point symbol, and the third specifies the thousand separator.

Number format; Decimal point symbol; Thousand separator symbol

numberFormat: "#,##0.##;,;." //If 12345.67, displayed as 12.345,56

If you want to have the same format in the editor when inputting, just specify the same format.

editFormat: "#,##0.##;,;." //If 12345.67, displayed as 12.345,56

Note

If you change the separator for the thousands and decimal points, it will be displayed as changed in the grid, but when exporting to Excel, it will be displayed as a separator that matches the system country setting that opens the Excel file.
For example, even if you change the separator, it will be displayed as thousands and decimal points in Korea, and as German separators.
If you want to see the changed symbols in Korea as well as in the grid, you need to change the separator in the Windows system or change it in the options of Excel itself.
Also, in the grid, you can set the separator for the thousands and decimal points differently for each column, but Excel cannot set the separator for each column differently as in the grid due to its characteristics.

var column = [
...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editor: {
     type: "number",
     textAlignment: "far",
     editFormat: "#,##0.##;,;.",
     multipleChar: "+",
   },
   numberFormat: "#,##0.##;,;.",
   header: {
     "text": "Number Edit"
   }
}
...
];

Absolute value, round up, round down

The displayed value can be displayed as an absolute value or rounded up or down. Only the value displayed on the screen is changed, and the value contained in the dataProvider is not changed. (If nothing is specified, rounding is performed.)

After the format string specified with numberFormat, separate it with a semicolon (;) and then specify a, c, and f.

numberFormat: "#,##0.###;a" //Display as absolute value
numberFormat: "#,##0.###;c" //Round up to display
numberFormat: "#,##0.###;f" //Round down to display
 
numberFormat: "#,##0.###;,;.;a" //Thousands, and decimal point. Change the position of and display it as an absolute value
numberFormat: "#,##0.###;,;.;c" //Thousands, and decimal point. Change the position of and display by rounding up.
numberFormat: "#,##0.###;,;.;f" //Thousands, and decimal point. Change the position of and display by rounding down

Step button

You can manipulate numeric values by displaying step buttons in cells.

var column = [
...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editButtonVisibility: "always",
   editor: {
     type: "number",
     showStepButton: true, //Whether to display the number edit button
     direction: "horizontal", //Set the button display direction, vertical when set to "vertical"
     step: 1, // unit of increase/decrease value when button is clicked
     //min: 20, //minimum value
     //max: 999, //maximum value
     //delay: 100 //Interval for applying value when button is pressed
   },
   numberFormat: "#,##0",
   header: {
     "text": "Number Edit"
   }
}
...
];

Controlling the visibility of the step button

Set the display method by specifying always, default, hidden, rowfocused, and visible in column.editButtonVisibility.

var column = [
...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editButtonVisibility: "always", //default, hidden, rowfocused, visible
   editor: {
     type: "number",
     showStepButton: true, //Whether to display the number edit button
     direction: "vertical", //Set the button display direction, horizontal when set to "horizontal"
     step: 1, // unit of increase/decrease value when button is clicked
     //min: 20, //minimum value
     //max: 999, //maximum value
     //delay: 100 //Interval for applying value when button is pressed
   },
   numberFormat: "#,##0",
   header: {
     "text": "always"
   }
}
...
];

Multiline editor Dropdown Editor