체크 렌더러

Check 렌더러는 셀의 값을 true/false 두 가지 상태로 표시하는 렌더러입니다. 체크 컬럼에 체크 렌더러를 적용하였습니다.

데이터가 Boolean인 경우

//js
var fields = [
  {
    fieldName: "Bool1",
    dataType: "boolean"
  },
  ... 생략 ...
]
 
dataProvider.setFields(fields);
 
var columns = [
  ... 생략 ...
  {
    name: "Bool1",
    fieldName: "Bool1",
    width: "60",
    editable: false,
    renderer: {
      type: "check",
    },
    header: {
      text: "체크"
    }
  },
  ... 생략 ...
];
 
gridView.setColumns(columns);

데이터가 Text인 경우

체크렌더러에 사용할 데이터가 텍스트인 경우 trueValues, falseValues로 check, uncheck값을 지정합니다.

//js
var fields = [
  {
    fieldName: "Bool2",
    dataType: "text"
  },
  ... 생략 ...
]
 
dataProvider.setFields(fields);
 
var columns = [
  ... 생략 ...
  {
    name: "Bool2",
    fieldName: "Bool2",
    width: "60",
    editable: false,
    renderer: {
      type: "check",
      trueValues: "Y",
      falseValues: "N"
    },
    header: {
      text: "체크",
      styleName: "orange-column"
    }
  },
  ... 생략 ...
];
 
gridView.setColumns(columns);

체크로 처리할 값이 여러개인 경우 , 문자로 구분하여 나열 합니다.

var columns = [
  ... 생략 ...
  {
    name: "Bool2",
    fieldName: "Bool2",
    width: "60",
    editable: false,
    renderer: {
      type: "check",
      trueValues: "Y,y,YES,yes",   //체크로 처리할 값이 여러개인 경우 , 구분하여 나열
      falseValues: "N,n,NO,no"
    },
    header: {
      text: "체크",
      styleName: "orange-column"
    }
  },
  ... 생략 ...
];

체크 렌더러의 동적 적용 1

특정 컬럼값에 따라 체크렌더러를 동적으로 적용할 수 있습니다.
성별 컬럼의 값이 '여'인 경우 체크박스 표시를 하지 않는 예제입니다.

var columns = [
  ... 생략 ...
  {
    name: "Bool2",
    fieldName: "Bool2",
    width: "60",
    editable: false,
    renderer: {
      type: "check",
      trueValues: "Y,y,YES,yes",
      falseValues: "N,n,NO,no"
    },
    header: {
      text: "체크",
      styleName: "orange-column"
    },
    styleCallback: function(grid, dataCell){
      var ret = {}
      var gender = grid.getValue(dataCell.index.itemIndex, "Gender")
 
      if(gender == '여'){
        ret.renderer = {type: "text"},
        ret.editable = false;
      }
 
      return ret;
    },
    displayCallback: function() {
      return '';
    }
  },
  ... 생략 ...
];

체크 렌더러의 동적 적용 2

특정 컬럼값에 따라 체크렌더러를 동적으로 적용할 수 있습니다.
성별 컬럼의 값이 '여'인 경우 체크박스값을 수정할 수 없게 하는 예제입니다.

var columns = [
  ... 생략 ...
  {
    name: "Bool2",
    fieldName: "Bool2",
    width: "60",
    editable: false,
    renderer: {
      type: "check",
      trueValues: "Y,y,YES,yes",
      falseValues: "N,n,NO,no"
    },
    header: {
      text: "체크",
      styleName: "orange-column"
    },
    styleCallback: function(grid, dataCell){
      var ret = {}
      var gender = grid.getValue(dataCell.index.itemIndex, "Gender")
 
      if(gender == '여'){
        ret.renderer = {type: "check", editable: false},
      }
 
      return ret;
    },
    displayCallback: function() {
      return '';
    }
  },
  ... 생략 ...
];

텍스트 렌더러 바 렌더러