Imagecellrenderer

ImageCellRenderer

이미지 렌더러

Signature:

export interface ImageCellRenderer extends CellRenderer

Extends: CellRenderer

Remarks

데이터 셀의 값을 url 로 해석해서 그 이미지를 내려받고 표시한다.

[상위 클래스]

CellRenderer

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	Modifiers	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 의 키-값 쌍
spaceKey	boolean	true이면 스페이스바를 입력했을때 onCellItemClicked가 실행된다.
titleField	string	이미지의 alt 텍스트 값으로 읽어올 필드의 필드명
type	"image"	종류: 이미지

Events Desc

imageCallback

이미지를 렌더링을 위해 이미지의 경로를 지정하는 콜백

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 텍스트를 설정하기 위한 콜백

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가 실행된다.

exportImage

true이면 excel로 이미지를 export한다.

Remarks:

GridExportOptions.exportImage가 false이면 출력되지 않는다.

imageField

이미지 렌더링을 위해 url 값으로 읽어올 필드의 필드명

Remarks:

ImageCellRenderer.imageCallback 이 할당되어 있지 않거나 undefined를 반환한 경우 적용된다.

Example:

column.renderer = {
     "type": "image",
     "imageField": "Cats"
}

imageHeight

이미지 높이

imageMap

셀 값과 해당 셀 값에 대응시킬 url 의 키-값 쌍

Remarks:

ImageCellRenderer.imageCallback 이 할당되어 있지 않거나 undefined를 반환한 경우 적용된다.

Example:

column.renderer = {
     type: 'image',
     imageMap: {
         value1: 'images/e_equals_mc_square.jpg'
     }
}

spaceKey

true이면 스페이스바를 입력했을때 onCellItemClicked가 실행된다.

titleField

이미지의 alt 텍스트 값으로 읽어올 필드의 필드명

Example:

column.renderer = {
     "type": "image",
     "imageMap": {
         "value1": "images/fatcat.jpg",
         "value2": "images/bluecat.jpg"
     },
     "titleField": "CatName"
}

type

종류: 이미지

IconCellRenderer InvalidCell