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;
  }
}];