RealGrid2 API
Interface
ShapeCellRenderer

ShapeCellRenderer

Renderer that displays shapes included in the grid

Signature:

export interface ShapeCellRenderer extends CellRenderer

Extends: CellRenderer

Remarks

You cannot use TOP_EDGE and BOTTOM_EDGE in auto height.

[Superclass]

CellRenderer

Example

//string type
column.renderer = 'shape';
 
// object type
column.renderer = {
     "type": "shape",
     "shape": "diamond"
}

Events

PropertyTypeDescription
shapeCallbackGetShapeCallbackCallback to specify type of shape

Properties

PropertyTypeDescription
shapestringShape type
shapeHeightnumberHeight of shape
shapeLocationIconLocationLocation of shapes
shapeMap{ [cellValue: string]: PolygonShape; }Cell value - shape type pair
shapeStylestringStyle class name of shape
shapeWidthnumberWidth of shape
type'shape'Type: Shape

Events Desc

shapeCallback

Callback to specify the type of shape

Type - GetShapeCallback

Remarks:

It follows the format of GetShapeCallback.

Example:

const f = function(grid, model) {
 if (model.value) {
 return 'ellipse';
 }
 else {
 return 'minus';
 }
}
 
column.renderer = {
 type: 'shape',
 shapeCallback: f
}

Properties Desc

shape

shape type

Type - string

Remarks:

You can set the shapes in PolygonShape.

If you want to set the circle shape, just set it to 'ellipse'.

Applies when shape or shapeCallback is not specified.


shapeHeight

height of shape

Type - number


shapeLocation

location of shapes

Type - IconLocation


shapeMap

Cell value - shape type pair

Type - { [cellValue: string]: PolygonShape; }

Remarks:

It takes precedence over shape.

Applies when shapeCallback is not specified.

Example:

 
let sMap = {
 "value1": "triangle",
 "value2": "diamond"
}
 
column.renderer = {
 "type": "shape",
 "shapeMap": sMap
}

shapeStyle

Style class name of shape

Type - string


shapeWidth

width of shape

Type - number


type

Type: Shape

Type - 'shape'