ImageCellRenderer
이미지 렌더러
상세 설명
예제 코드
// string type
column.renderer = 'image';
// object type
column.renderer = {
type: "image",
imageMap: {
"value1": "images/apple.jpg",
"value2": "images/banana.jpg"
},
titleField: "fruits"
}
프로퍼티 정보
exportImage: boolean
imageField: string
이미지 렌더링을 위해 url 값으로 읽어올 필드의 필드명
상세 설명
ImageCellRenderer.imageCallback 이 할당되어 있지 않거나 undefined
를 반환한 경우 적용된다.
예제 코드
column.renderer = {
"type": "image",
"imageField": "Cats"
}
imageMap: {
[value: string]: string;
}
셀 값과 해당 셀 값에 대응시킬 url 의 키-값 쌍
상세 설명
ImageCellRenderer.imageCallback 이 할당되어 있지 않거나 undefined
를 반환한 경우 적용된다.
예제 코드
column.renderer = {
type: 'image',
imageMap: {
value1: 'images/e_equals_mc_square.jpg'
}
}
titleField: string
이미지의 alt 텍스트 값으로 읽어올 필드의 필드명
예제 코드
column.renderer = {
"type": "image",
"imageMap": {
"value1": "images/fatcat.jpg",
"value2": "images/bluecat.jpg"
},
"titleField": "CatName"
}
콜백 정보
imageCallback: GetImageCallback
이미지를 렌더링을 위해 이미지의 경로를 지정하는 콜백
상세 설명
false
반환 시 해당 콜백에 의한 렌더링이 취소된다.
GetImageCallback 의 형식을 따른다.
[프로퍼티 목록]
grid
- GridBase 컨트롤
model
- 그리드의 셀
예제 코드
const f = function(grid, model) {
const base = '/images/';
if (jpgSet.indexOf(model.value)){
return base + model.value + '.jpg';
}
else base + 'default.jpg';
}
column.renderer = {
type: 'image',
imageCallback: f
}
titleCallback: GetCellTitleCallback
이미지의 alt 텍스트를 설정하기 위한 콜백
예제 코드
const f = function(grid, model) {
return 'cat image'
}
column.renderer = {
type: 'image',
imageMap: {
value1: 'images/fatcat.jpg',
value2: 'images/bluecat.jpg'
},
titleCallback: f
}