설명
GRID 스타일에서 사용자 정의 열을 다양한 방식으로 표현하는데 도움을 주기 위해서 4.1.0.0 버전부터 onDX5ColumnDataDisplaying 이벤트 핸들러를 지원한다.
dx.createColumn({ key: "country", display: "나라", width: 80, position: 3, type: "list", items: [
{ display: "오스트리아", value: "at" },
{ display: "독일", value: "de" },
{ display: "이탈리아", value: "it" },
{ display: "러시아", value: "ru" },
{ display: "기타", value: "xx" }
]
});
dx.addVirtualFileList([
{ ..., name: "운명.mp3", ..., meta: { "composer": "베토벤", "country": "de" } },
{ ..., name: "주피터.mp3", ..., meta: { "composer": "모차르트", "country": "at" } },
{ ..., name: "미완성.mp3", ..., meta: { "composer": "슈베르트", "country": "at" } },
{ ..., name: "비창.mp3", ..., meta: { "composer": "차이코프스키", "country": "ru" } },
{ ..., name: "사계.mp3", ..., meta: { "composer": "비발디", "country": "it" } }
]);
function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) {
if (columnKey === "country") {
// 'country' 열의 값을 이미지로 표현한다.
return Object.assign(document.createElement("img"), {
style: "max-height: 20px;",
src: `${location.origin}/common/images/${columnValue}.svg`, title: columnValue
});
}
}
'country' 열은 'list' 형식을 사용하여 각각의 약어에 해당하는 국가명을 출력한다. 그러나 onDX5ColumnDataDisplaying를 사용하면 텍스트로 출력하는 과정은 무시하고 국가명이 아닌 국기 이미지를 출력할 수 있다.
onDX5ColumnDataDisplaying는 반환값이 HTML 객체이면, 해당 HTML 객체를 해당 항목의 열에 렌더링한다. 더불어 문자열이라고 하더라도 내부적으로 innerHTML 속성을 사용하므로 HTML 태그가 포함된 문자열인 경우에는 HTML 객체를 사용한 것처럼 렌더링할 수 있다.
예제