동적으로 에디터 변경하기
구분값에 따라 동적으로 에디터를 변경하는 예제 입니다. 구분값이 '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;
}
}];