컬럼 동적 스타일

컬럼 동적 스타일은 styleCallback이 지정된 컬럼에만 값에 따라 스타일이 적용됩니다.

※ styleCallback안에서 시간이 오래 걸리는 연산이나 setValue()등 값을 변경하는 행위를 하면 안됩니다.

자신의 컬럼 셀 값 참조

값이 "남"인 경우에 오렌지 색으로 표시.

var columns = [
  ...생략...
  {
    name: "Gender",
    fieldName: "Gender",
    width: "55",
    header: {
      text: "성별",
      styleName: "orange-column"
    },
    styleCallback: function(grid, dataCell){
      var ret = {}

      if(dataCell.value == '남'){
        ret.styleName = "orange-column"
      }

      return ret;
    }
  },
  ...생략...
];

gridView.setColumns(columns);

다른 컬럼 셀 값을 참조

성별 컬럼의 값이 "남"이고 나이 컬럼의 값이 60~70인 경우 오렌지색, 편집불가 처리

var columns = [
  ...생략...
  {
    name: "Age",
    fieldName: "Age",
    width: "55",
    header: {
      text: "나이",
      styleName: "orange-column"
    },
    styleCallback: function(grid, dataCell){
      var ret = {}
      var gender = grid.getValue(dataCell.index.itemIndex, "Gender")

      if( (gender == '남') && (dataCell.value >= 50 && dataCell.value <= 60)){
        ret.styleName = "orange-column";
        ret.editable = false;
      }

      return ret;
    }
  },
  ...생략...
];

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"
    },
    styleCallback: function(grid, dataCell){
      var ret = {};
     
      ret.renderer = { 
        type: "check",
        trueValues: "Y,y,YES,yes",
        falseValues: "N,n,NO,no",
        editable: dataCell.item.itemState == "appending" || dataCell.item.rowState == "created"
      }

      return ret;
    }
  },
  ...생략...
];

gridView.setColumns(columns);