ImageCellRenderer

image renderer

Signature:

export interface ImageCellRenderer extends CellRenderer

Extends: CellRenderer

Remarks

The value of the data cell is interpreted as a URL, and the image is downloaded and displayed.

[Superclass]

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

Properties

Events Desc

imageCallback

A callback that specifies the path to the image for rendering it.

Type - GetImageCallback

Remarks:

If false is returned, rendering by the corresponding callback is canceled.

It follows the format of GetImageCallback.

[Property List]

grid - GridBase control

model - a cell in the grid

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

Callback to set alt text of image

Type - GetCellTitleCallback

Remarks:

It should return the alt text to be set.

It follows the format of 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

If true, onCellItemClicked is executed when enterKey is entered.

Type - boolean

exportImage

If true, the image is exported to Excel.

Type - boolean

Remarks:

If GridExportOptions.exportImage is false, it is not output.

imageField

Field name of the field to be read as a url value for image rendering

Type - string

Remarks:

Applies when ImageCellRenderer.imageCallback is not assigned or returns undefined.

Example:

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

imageHeight

image height

Type - number

imageMap

Key-value pair of cell value and url to correspond to that cell value

Type - { [value: string]: string; }

Remarks:

Applies when ImageCellRenderer.imageCallback is not assigned or returns undefined.

Example:

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

imageWidth

image width

Type - number

spaceKey

If true, onCellItemClicked is executed when the space bar is entered.

Type - boolean

titleField

Field name of the field to be read as the alt text value of the image

Type - string

Example:

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

type

Category: Image

Type - "image"