Cellrenderer

Base model for cell renderers

Signature:

export interface CellRenderer

Remarks

It is a device for displaying the values of data cells on a grid.

All properties of CellRenderer can be called/set only in classes that inherit them. Please refer to the list below.

Previous versions of the cell renderer basically render using style information generated from the column, but from 2.0 onwards, it is applied as a CSS style class.

Specify the type and properties of the renderer for each column.

There are properties that can be specified for each cell renderer, and if not specified in DataColumn, TextCellRenderer is set as default.

Also, when it is in object form, the type property can be specified in the form of a string in column.renderer.

[List]

TextCellRenderer: Default text renderer

BarCellRenderer: Bar renderer

ImageCellRenderer: Image renderer

IconCellRenderer: Icon renderer

CheckCellRenderer: Check cell renderer

ButtonCellRenderer: Button renderer

ShapeCellRenderer: Shape renderer

LinkCellRenderer: Link cell renderer

SignalBarCellRenderer: Signal bar renderer

Code39CellRenderer: Barcode renderer

Code128CellRenderer: Barcode renderer

SeriesTextCellRenderer: Series text renderer

SparkLineRenderer: Series spark line renderer

SparkColumnRenderer: Series column renderer

SparkWinLossRenderer: Series Win Loss Renderer

TemplateCellRenderer: Template renderer

Example

//string type
column.renderer = "text"
 
// object type
column.renderer = { type: "text", showTooltip: true}

Events

Property	Type	Description
ariaLabelCallback	GetAriaLabelCallback	Callback used when setting aria-label directly

Properties

Property	Type	Description
clickOnlyFocusedCell	boolean	If `true`, the click event occurs only when the cell is focused or a cell where the focus can be moved.
showTooltip	boolean	Tooltip visibility
tooltipEllipsisOnly	boolean	Whether to display tooltips only in cells in ellipsis state
type	string	Types of renderers

Events Desc

ariaLabelCallback

Callback used when setting aria-label directly

Type - GetAriaLabelCallback

Remarks:

Sets the string to be used when the screen reader reads cell information.

It follows the format of GetAriaLabelCallback.

[Property List]

grid - GridBase control

model - a cell in the grid

Example:

const f = function(grid, model) {
 var s = model.value;
 var date = grid.getValue(model.item.index, "date")
 s += (date.getTime() > Date.now() - 60*60*24*7*1000) ? " new" : "";
 return s;
}
 
column.renderer = {
 type: 'text',
 ariaLabelCallback: f
}