IconCellRenderer
아이콘 렌더러
상세 설명
이미지 아이콘과 텍스트를 같이 표시한다.
url을 직접 지정하여 표시할 수도 있다.
CellRenderer 를 상속한다.
[제한 사항]
1. iconLocation = RIGHT: 텍스트가 길면 아이콘이 표시되지 않을 수 있다.
2. 자동 높이에서 TOP_EDGE
, BOTTOM_EDGE
를 사용할 수 없다.
[상위 클래스]
예제 코드
// string type
column.renderer = 'icon';
// object type
column.renderer = {
"type": "icon",
"iconMap": {
"UPQRK": "images/particles/uquark.png",
"DOWNQRK": "images/particles/dquark.png",
"ELECTRN": "images/particles/e.png",
"ELECNEU": "images/particles/eneutrino.png",
},
"iconHeight": 11
},
프로퍼티 정보
exportImage: boolean
iconField: string
아이콘 이미지 렌더링을 위해 url 값으로 읽어올 필드의 필드명
상세 설명
IconCellRenderer.iconCallback 이 할당되어 있지 않거나 undefined
를 반환한 경우 적용된다.
예제 코드
column.renderer = {
"type": "icon",
"iconField": "Cats"
}
iconMap: {
[value: string]: string;
}
셀 값과 해당 셀 값에 대응시킬 url 의 키-값 쌍
상세 설명
IconCellRenderer.iconCallback 이 할당되어 있지 않거나 undefined
를 반환한 경우 적용된다.
예제 코드
column.renderer = {
type: 'icon'
iconMap: {
value1: 'images/e_equals_mc_square.jpg'
}
}
콜백 정보
iconCallback: GetImageCallback
아이콘 이미지의 렌더링을 위한 콜백
예제 코드
column.renderer = {
"type": "icon",
"iconCallback": function (grid, cell) {
return "images/teraforming/mars.jpg";
}
}
titleCallback: GetCellTitleCallback
이미지의 alt 텍스트를 설정하기 위한 콜백
예제 코드
const f = function(grid, model) {
return 'cat image'
}
column.renderer = {
type: 'icon',
titleCallback: f
}