텍스트 렌더러

TextCellRenderer는 리얼그리드의 기본 Data 셀 렌더러입니다. 별도로 추가된 속성없이 컬럼에 설정된 스타일 값들을 이용해 셀에 표시할 값을 텍스트로 표시합니다.

텍스트 셀 렌더러에 스타일을 지정하려면 컬럼의 styleName 속성에 CSS 스타일명을 지정하면 됩니다.

스타일 지정

1. 전화번호 컬럼의 글자색을 파란색으로 지정.
2. 제품번호 컬럼의 글자를 BOLD로 처리.
3. 투자국가 컬럼의 글자색을 파란색으로 지정하고 BOLD 처리.

//css
.rgsample-blue-column {
    color: blue;
}

.rgsample-bold-column {
    font-weight: bold;
}

//js
var columns = [
  ... 생략 ...
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    styleName: "rgsample-blue-column",
    header: {
      text: "전화번호",
      styleName: "orange-column"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    styleName: "rgsample-bold-column",
    header: {
      text: "제품번호",
      styleName: "orange-column"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    styleName: "rgsample-blue-column rgsample-bold-column",
    header: {
      text: "투자국가",
      styleName: "orange-column"
    }
  },
  ... 생략 ...
];

gridView.setColumns(columns);

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

1. 이율 컬럼은 고정 소수점 2자리까지 표현
2. 납입금 컬럼은 천단위 , 표시하고 뒤에 $를 표시
3. 만기금액 컬럼은 천단위 , 표시, 고정소수점 3자리, $를 앞에 표시

//css
.right-column {
  text-align: right;
}

//js
var columns = [
  ... 생략 ...
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    numberFormat: "0.00",
    header: {
      text: "이율",
      styleName: "orange-column"
    },
    styleName: "right-column"
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    suffix: " $",
    header: {
      text: "납입금",
      styleName: "orange-column"
    },
    styleName: "right-column"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0.000",
    prefix: "$ ",
    header: {
      text: "만기금액",
      styleName: "orange-column"
    },
    styleName: "right-column"
  },
  ... 생략 ...
];

gridView.setColumns(columns);

Datetime Format 지정

Datetime Format의 형식은 YYYY: 년, YY: 2000년 기준 년, MM:월, DD:일, HH:시간, NN:분, SS:초 의 조합으로 설정합니다.

1. 최초납입일 'yy-MM-dd' 로 지정
2. 종료일 'yyyy.MM.dd' 로 지정

var columns = [
  ... 생략 ...
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    datetimeFormat: "yy-MM-dd",
    header: {
      text: "최초납입일",
      styleName: "orange-column"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    datetimeFormat: "yyyy.MM.dd",
    header: {
      text: "종료일",
      styleName: "orange-column"
    }
  },
  ... 생략 ...
];

gridView.setColumns(columns);