RealGrid2 API
Interface
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

PropertyTypeDescription
imageCallbackGetImageCallback이미지를 렌더링을 위해 이미지의 경로를 지정하는 콜백
titleCallbackGetCellTitleCallback이미지의 alt 텍스트를 설정하기 위한 콜백

Properties

PropertyTypeDescription
enterKeybooleantrue이면 enterKey를 입력했을때 onCellItemClicked가 실행된다.
exportImagebooleantrue이면 excel로 이미지를 export한다.
imageFieldstring이미지 렌더링을 위해 url 값으로 읽어올 필드의 필드명
imageHeightnumber이미지 높이
imageMap{ [value: string]: string; }셀 값과 해당 셀 값에 대응시킬 url 의 키-값 쌍
imageWidthnumber이미지 너비
spaceKeybooleantrue이면 스페이스바를 입력했을때 onCellItemClicked가 실행된다.
titleFieldstring이미지의 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.exportImagefalse이면 출력되지 않는다.


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'
     }
}

imageWidth

이미지 너비


spaceKey

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


titleField

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

Example:

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

type

종류: 이미지