컬럼 동적 스타일

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

자신의 컬럼 셀 값 참조

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

var columns = [
  ...생략...
  {
    name: "Gender",
    fieldName: "Gender",
    type: "data",
    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",
    type: "data",
    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);