ImageCellRenderer

이미지 렌더러

상세 설명

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

[상위 클래스]

CellRenderer

예제 코드

// string type
column.renderer = 'image';

// object type
column.renderer = {
     type: "image",
     imageMap: {
         "value1": "images/apple.jpg",
         "value2": "images/banana.jpg"
     },
     titleField: "fruits"
}

프로퍼티 정보

enterKey


enterKey: boolean

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

기본값

false

exportImage


exportImage: boolean

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

상세 설명

GridExportOptions.exportImagefalse이면 출력되지 않는다.

기본값

undefined

imageField


imageField: string

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

상세 설명

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

예제 코드

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

imageHeight


imageHeight: number

이미지 높이

imageMap


imageMap: { [value: string]: string; }

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

상세 설명

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

예제 코드

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

spaceKey


spaceKey: boolean

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

기본값

false

titleField


titleField: string

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

예제 코드

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

type


type: "image"

종류: 이미지

콜백 정보

imageCallback


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


titleCallback: GetCellTitleCallback

이미지의 alt 텍스트를 설정하기 위한 콜백

상세 설명

설정할 alt 텍스트를 반환해야 한다.

GetCellTitleCallback 의 형식을 따른다.

예제 코드

const f = function(grid, model) {
     return 'cat image'
}
column.renderer = {
     type: 'image',
     imageMap: {
         value1: 'images/fatcat.jpg',
         value2: 'images/bluecat.jpg'
     },
     titleCallback: f
}