ImageCellRenderer
이미지 렌더러
Signature:
export interface ImageCellRenderer extends CellRenderer Extends: CellRenderer
Remarks
데이터 셀의 값을 url 로 해석해서 그 이미지를 내려받고 표시한다.
[상위 클래스]
Example
// string type
column.renderer = 'image';
// object type
column.renderer = {
type: "image",
imageMap: {
"value1": "images/apple.jpg",
"value2": "images/banana.jpg"
},
titleField: "fruits"
}Events
| Property | Type | Description |
|---|---|---|
| imageCallback | GetImageCallback | 이미지를 렌더링을 위해 이미지의 경로를 지정하는 콜백 |
| titleCallback | GetCellTitleCallback | 이미지의 alt 텍스트를 설정하기 위한 콜백 |
Properties
| Property | Type | Description |
|---|---|---|
| enterKey | boolean | true이면 enterKey를 입력했을때 onCellItemClicked가 실행된다. |
| exportImage | boolean | true이면 excel로 이미지를 export한다. |
| imageField | string | 이미지 렌더링을 위해 url 값으로 읽어올 필드의 필드명 |
| imageHeight | number | 이미지 높이 |
| imageMap | { [value: string]: string; } | 셀 값과 해당 셀 값에 대응시킬 url 의 키-값 쌍 |
| imageWidth | number | 이미지 너비 |
| spaceKey | boolean | true이면 스페이스바를 입력했을때 onCellItemClicked가 실행된다. |
| titleField | string | 이미지의 alt 텍스트 값으로 읽어올 필드의 필드명 |
| type | "image" | 종류: 이미지 |
Events Desc
imageCallback
이미지를 렌더링을 위해 이미지의 경로를 지정하는 콜백
Type - GetImageCallback
Remarks:
false 반환 시 해당 콜백에 의한 렌더링이 취소된다.
GetImageCallback 의 형식을 따른다.
[프로퍼티 목록]
grid - GridBase 컨트롤
model - 그리드의 셀
Example:
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
이미지의 alt 텍스트를 설정하기 위한 콜백
Type - GetCellTitleCallback
Remarks:
설정할 alt 텍스트를 반환해야 한다.
GetCellTitleCallback 의 형식을 따른다.
Example:
const f = function(grid, model) {
return 'cat image'
}
column.renderer = {
type: 'image',
imageMap: {
value1: 'images/fatcat.jpg',
value2: 'images/bluecat.jpg'
},
titleCallback: f
}Properties Desc
enterKey
true이면 enterKey를 입력했을때 onCellItemClicked가 실행된다.
Type - boolean
exportImage
true이면 excel로 이미지를 export한다.
Type - boolean
Remarks:
GridExportOptions.exportImage가 false이면 출력되지 않는다.
imageField
이미지 렌더링을 위해 url 값으로 읽어올 필드의 필드명
Type - string
Remarks:
ImageCellRenderer.imageCallback 이 할당되어 있지 않거나 undefined를 반환한 경우 적용된다.
Example:
column.renderer = {
"type": "image",
"imageField": "Cats"
}imageHeight
이미지 높이
Type - number
imageMap
셀 값과 해당 셀 값에 대응시킬 url 의 키-값 쌍
Type - { [value: string]: string; }
Remarks:
ImageCellRenderer.imageCallback 이 할당되어 있지 않거나 undefined를 반환한 경우 적용된다.
Example:
column.renderer = {
type: 'image',
imageMap: {
value1: 'images/e_equals_mc_square.jpg'
}
}imageWidth
이미지 너비
Type - number
spaceKey
true이면 스페이스바를 입력했을때 onCellItemClicked가 실행된다.
Type - boolean
titleField
이미지의 alt 텍스트 값으로 읽어올 필드의 필드명
Type - string
Example:
column.renderer = {
"type": "image",
"imageMap": {
"value1": "images/fatcat.jpg",
"value2": "images/bluecat.jpg"
},
"titleField": "CatName"
}type
종류: 이미지
Type - "image"