RealGrid2 가이드
Tip 🆕
동적 에디터 변경

동적으로 에디터 변경하기

구분값에 따라 동적으로 에디터를 변경하는 예제 입니다. 구분값이 'T'인 경우 일반 텍스트, 'D'인 경우 드롭다운 에디터로 동작합니다. styleCallback(), displayCallback()을 확인하세요.

var columns = [{
  "fieldName": "field1",
  "name": "field1",
  "width": 90,
  "header": { "text": "구분" }
}, {
  "fieldName": "field2",
  "name": "field2",
  "width": 150,
  "header": { "text": "text/dropdown" },
  "styleCallback": function(grid, dataCell){
    var gubun = grid.getValue(dataCell.index.itemIndex, "field1");
    var ret = {};
 
    switch (gubun) {
        //구분값이 T이면 text에디터를 표시
        case 'T':  
            ret.editor = {
                type: "text"
            };
            break;
        //구분값이 D이면 드롭다운 에디터를 표시
        case 'D':  
            ret.editor = {
                type: "dropdown",
                values: ['A01', 'A02', 'A03', 'A04', 'A05'],
                labels: ['감자', '고구마', '오이', '토마토', '당근']
            }
    }
    return ret;
  },
  //기본적으로 드롭다운 데이터의 경우 코드값으로 표시되기에 라벨값으로 표시되게 처리
  "displayCallback": function (grid, index, value) {
    var retValue = value;
    var gubun = grid.getValue(index.itemIndex, "field1");
 
    if (gubun === 'D') {
        var idx = ['A01', 'A02', 'A03', 'A04', 'A05'].indexOf(value);
 
        retValue = ['감자', '고구마', '오이', '토마토', '당근'][idx];
    }
 
    return retValue;
  }
}];