중요 업데이트 알림사용해보기제품구매도움영상문의
RealGrid2v2.6.2

  • 튜토리얼
      • 인디케이터
      • 상태바
      • 체크바
      • 체크바와 데이터 필드의 연동
      • 컨텍스트 메뉴
      • 토스트 메시지 창
      • 커서
      • 열 고정하기
      • 행 고정하기
      • 선택
      • 다중 선택
      • 같은 값의 셀 생략하기
      • 셀 버튼
      • 팝업 메뉴 버튼
      • 셀 병합
      • Lookup 컬럼
      • Lookup 트리
      • 툴팁
      • 그룹헤더 툴팁
      • 화면 표시값 변경하기
      • Place Holder
      • 컬럼 만들기
      • 컬럼 속성 동적 변경하기(visible, editable)
      • 컬럼 너비 자동 조정
      • 데이터 정렬
      • 컬럼 이동
      • 자동 필터링
      • 데이터 필터링
      • 컬럼 레이아웃(컬럼 그룹)
      • 컬럼 레이아웃(컬럼 그룹) 속성 동적 변경하기
      • 컬럼 너비 조절
      • 그룹컬럼 접기
      • 셀 가로병합
      • 레이아웃(추가, 삭제)
      • 라인 편집기
      • 멀티라인 편집기
      • 숫자 편집기
      • 드롭다운 편집기
      • 날짜 편집기
      • 마스크 편집기
      • 입력제한 편집기
      • 행 추가/삽입
      • 행 삭제
      • 행 데이터 수정
      • 행/셀 데이터 가져오기
      • 셀 데이터 수정
      • 헤더 높이
      • 헤더 체크박스 사용
      • 컬럼 푸터
      • 컬럼 푸터 병합
      • 상단 요약 표시
      • 컬럼 헤더 HTML Template
      • 컬럼 레이아웃(그룹 컬럼) 헤더 HTML Template
      • 행 높이
      • 행 그룹핑
      • 그룹핑 API
      • 행 병합 그룹핑
      • 아이템 모델
      • 그리드 동적 높이
      • JSON 데이터 가져오기
      • XML 데이터 가져오기
      • 그리드 Lazy Loading 구현
      • 마스터 디테일 예
      • provider 공유하기
      • 데이터 타입
      • 불린 타입 필드
      • 날짜 타입 필드
      • Object 타입 필드
      • Subtypes
      • 롤백
      • 검색
      • 계산 필드
      • 그리드에서 페이징 처리 1
      • 그리드에서 페이징 처리 2
      • 행 Drag & Drop
      • Grid To Grid
      • 텍스트 렌더러
      • 체크 렌더러
      • 바 렌더러
      • 이미지 렌더러
      • 아이콘 렌더러
      • 도형 렌더러
      • 시그널 렌더러
      • 링크 렌더러
      • HTML 렌더러
      • 바코드 렌더러
      • 커스텀 렌더러 - 이미지버튼
      • 구글차트 연동
      • 하이차트 연동
      • 시리즈 컬럼
      • 스파크 컬럼
      • 행 상태
      • Undo / Redo
      • 복사하기/붙여넣기
      • 병합 일괄 수정
      • RealGrid2 스타일
      • 사용자 스타일 - 개요
      • 바디 영역 스타일
      • 헤더, 풋터, 상태바 스타일
      • 셀, 데이터 영역 스타일
      • 편집 영역 스타일
      • styleName 속성 및 콜백
      • 컬럼 동적 스타일
      • 행 동적 스타일
      • 셀 동적 스타일
      • RealGrid2 테마
      • 포커스 스타일
      • 엑셀 내보내기
      • 행 그룹된 그리드 내보내기
      • 여러 레이아웃으로 구성된 그리드 내보내기
      • 다중 그리드 Excel 내보내기
      • Excel문서에 제목 추가하기
      • 엑셀 스타일
      • 이미지 엑셀 내보내기
      • 사용자 지정 문자 출력
      • 엑셀 시트 보호
      • Mobile FormView
      • 대량 데이터 불러오기
      • 트리뷰
      • 트리 구현 - Array데이터
      • 트리 구현 - Object데이터
      • 트리 구현 - Xml데이터
      • 트리 노드 조작하기
      • 트리 아이콘 1
      • 트리 아이콘 2
      • 트리 이벤트
      • 트리 Lazy Loading
      • 사용자 지정 컬럼 유효성 검사
      • 사용자 지정 행 유효성 검사
      • 전체 유효성 검사
      • 유효성 검사 통과
      • 이벤트 발생 순서
      • 클릭 이벤트
      • 렌더링 완료 이벤트
      • 하이차트 연동 컬럼 선택
      • 하이차트 연동 컬럼 필터링
      • 하이차트 연동 행 선택
      • amchart 연동 체크 선택
      • amchart 연동 행 선택
      • 추천 설정
      • 필드와 컬럼 일괄 생성
      • SPAN(컬럼그룹)
      • 행 상태에 따른 특정 컬럼 편집 제어
      • CheckBar에서 자식 노드 연동하여 체크하기
      • Excel Import
      • Group Footer 표시여부 조작하기
      • 체크바와 관계된 팁
      • 상태바와 관계된 팁
      • 동적 에디터 변경
      • text타입 날짜 편집기
      • ColorPicker 연결
      • 파일 Drag and Drop
      • 셀 병합에서 텍스트를 상단으로 이동
      • 병합된 셀의 합계 계산
      • HEADER와 FOOTER에 여러줄로 표시하기
      • 행 삭제와 관계된 팁

숫자 편집기

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

화면에 표시될때 천 단위, 백만 단위 구분기호를 표시하고 싶은 경우 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 으로 표시
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"
  }
}
...
];