텍스트 렌더러

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

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

스타일 지정

전화번호 컬럼의 글자색을 파란색으로 지정.
제품번호 컬럼의 글자를 BOLD로 처리.
투자국가 컬럼의 글자색을 파란색으로 지정하고 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

이율 컬럼은 고정 소수점 2자리까지 표현
납입금 컬럼은 천단위 , 표시하고 뒤에 $를 표시
만기금액 컬럼은 천단위 , 표시, 고정소수점 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:초 의 조합으로 설정합니다.

최초납입일 'yy-MM-dd' 로 지정
종료일 '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);

Grid To Div 체크 렌더러