숫자 편집기

숫자 편집기는 숫자를 입력할 수 있는 편집기 입니다.

화면에 표시될때 천 단위, 백만 단위 구분기호를 표시하고 싶은 경우 numberFormat을 "#,##0" 으로만 설정하면 되고, 고정 소수점 사용시에는 필요한 자릿수만큼 소수점 이후에 "0"을 표시, 가변 소수점 사용시에는 "#"을 사용합니다.
예를 들어 천단위 구분기호를 사용하고 고정 소수점 3자리를 사용할 경우 "#,##0.000" 를 고정 소수점 4자리를 사용할 경우 "#,##0.0000" 를 사용하면 됩니다.

numberFormat을 적용한 경우 화면에 표시되는 셀의 값만 변경되는 것이고 dataProvider의 필드에 있는 원본값은 변함이 없습니다.

Number Format 지정

Number Format에서 '0'의 의미는 고정된 자리를 의미 합니다. '#'은 가변 자리를 의미 합니다. 예를 들어 '#,##0.###'의 경우 표시할 숫자가 정수인 경우 정수만 표시 됩니다.

'#,##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

'#,##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

'#,##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

...
//컬럼설정
{
  name: "Quantity",
  fieldName: "Quantity",
  width: 100,
  sortable: false,
  editor: {
    type: "number",
    textAlignment: "far",
    //입력시 적용되는 포맷(소수점 최대 3자리까지만 입력 가능)
    editFormat: "#,##0.###",
    multipleChar: "+",
  },
  //그리드 셀에 표시되는 포맷(소수점 최대 한자리까지만 표시)
  numberFormat: "#,##0.#",
  header: {
    "text": "Number Edit"
  }
}
...

사용자가 키 입력시에도 포맷을 적용할 수 있습니다.

editor.editFormat을 "#,##0.###"로 지정한 경우 소수점이하 자리는 최대 3자릿수만큼만 입력됩니다. (주: editFormat의 소수점 자리에 0을 쓰는 경우 #과 동일하게 처리됩니다.)

아래 예제는 사용자가 입력할 경우 소수점 3자리까지 입력되고 화면에 표시되는 셀에는 1자리까지만 표현되는 예제입니다.

...
//컬럼설정
{
  name: "Quantity",
  fieldName: "Quantity",
  width: 100,
  sortable: false,
  editor: {
    type: "number",
    textAlignment: "far",
    //입력시 적용되는 포맷(소수점 최대 3자리까지만 입력 가능)
    editFormat: "#,##0.###",
    multipleChar: "+",
  },
  //그리드 셀에 표시되는 포맷(소수점 최대 한자리까지만 표시)
  numberFormat: "#,##0.#",
  header: {
    "text": "Number Edit"
  }
}
...

천단위 , 와 소수점 . 자리 바꾸기

일부 국가에서는 천단위 구분기호 ','와 소수점 '.'을 반대로 사용하는 경우가 있습니다.(천단위 구분기호 '.', 소수점 ',')
이 경우 format 문자열을 ; 으로 구분하여 첫번째는 숫자를 표현하는 형식을 두번째는 소숫점 기호를 세번째는 천단위 구분기호를 지정합니다.

숫자포맷;소수점기호;천단위구분기호

numberFormat: "#,##0.##;,;."   //12345.67 인 경우 12.345,56 으로 표시

입력시 에디터에도 같은 포맷을 가지려면 동일하게 지정하면 됩니다.

editFormat: "#,##0.##;,;."   //12345.67 인 경우 12.345,56 으로 표시

참고사항

천단위와 소수점의 구분 기호를 변경하였을 경우 그리드에서는 변경되어서 보이지만 Excel Export 시에는 그 엑셀파일을 오픈하는 시스템 국가설정에 맞는 구분 기호로 표시 됩니다.
예를들어 구분기호를 변경하였다 하더라도 우리나라에선 천단위 , 소수점 . 으로 표시가 되고 독일에서는 독일에 맞는 구분기호로 표시됩니다.
만약 우리나라에서도 그리드와 동일하게 변경된 기호로 보고 싶다면 윈도우 시스템의 구분 기호를 변경하거나, 엑셀 자체의 옵션에서 변경 해야 합니다.
그리고 그리드에서는 천단위, 소수점 구분기호를 각 컬럼마다 다르게 설정 하실 수 있지만 엑셀은 특성상 그리드와 동일하게 각 컬럼마다 구분기호를 다르게 설정 하실 수는 없습니다.

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

절대값, 올림, 버림

표시되는 값을 절대값으로 표시하거나 올림, 내림 처리할 수 있습니다.
화면에 표시되는 값만 변경 되는 것이며 dataProvider에 담긴 값은 변경 되지 않습니다.
(아무것도 지정하지 않으면 반올림 처리 됩니다.)

numberFormat 으로 지정한 포맷 문자열 뒤에 세미콜론(;)으로 구분 지은 뒤 a, c, f 지정하면 됩니다.

numberFormat: "#,##0.###;a" //절대값으로 표시
numberFormat: "#,##0.###;c" //올림하여 표시
numberFormat: "#,##0.###;f" //내림하여 표시
 
numberFormat: "#,##0.###;,;.;a" //천단위 , 와 소수점 . 의 위치를 변경하고 절대값으로 표시
numberFormat: "#,##0.###;,;.;c" //천단위 , 와 소수점 . 의 위치를 변경하고 올림하여 표시
numberFormat: "#,##0.###;,;.;f" //천단위 , 와 소수점 . 의 위치를 변경하고 내림하여 표시

스텝 버튼

셀안에 스텝 버튼을 표시하여 숫자값을 조작할 수 있습니다.

var column = [
...
//컬럼설정
{
  name: "Quantity",
  fieldName: "Quantity",
  width: 100,
  sortable: false,
  editButtonVisibility: "always",
  editor: {
    type: "number",
    showStepButton: true, //숫자 편집 버튼 표시 여부
    direction: "horizontal", //버튼 표시 방향 설정, "vertical" 설정 시 세로방향
    step: 1, // 버튼 클릭 시 값 증감 단위
    //min: 20, //최소값
    //max: 999, //최대값
    //delay: 100 //버튼을 누르고 있을 때 값 적용 간격
  },
  numberFormat: "#,##0",
  header: {
    "text": "Number Edit"
  }
}
...
];

스텝 버튼의 표시 여부 조작하기

column.editButtonVisibility에 always, default, hidden, rowfocused, visible를 지정하여 보여지는 방식을 설정한다.

var column = [
...
//컬럼설정
{
  name: "Quantity",
  fieldName: "Quantity",
  width: 100,
  sortable: false,
  editButtonVisibility: "always",  //default, hidden, rowfocused, visible
  editor: {
    type: "number",
    showStepButton: true, //숫자 편집 버튼 표시 여부
    direction: "vertical", //버튼 표시 방향 설정, "horizontal" 설정 시 가로방향
    step: 1, // 버튼 클릭 시 값 증감 단위
    //min: 20, //최소값
    //max: 999, //최대값
    //delay: 100 //버튼을 누르고 있을 때 값 적용 간격
  },
  numberFormat: "#,##0",
  header: {
    "text": "always"
  }
}
...
];

멀티라인 편집기 드롭다운 편집기