Shape Renderer
The Shape cell renderer displays one of several shape icons included in the grid as text.
How to display the shape renderer
- It can be displayed by returning the shape name using callback.
- You can display icons using the shapeMap function. (In the icon map, only 'EUR' and 'USD' are specified, so only two images are displayed).
//css settings
.rgsample-shape-blue .rg-shape-renderer-shape {
fill: blue;
}
//Renderer settings
var columns = [
{
name: "KorName",
fieldName: "KorName",
width: "80",
renderer: {
type: "shape",
shape: "star"
},
header: {
text: "Types of shapes"
}
},
{
name: "Gender",
fieldName: "Gender",
width: "100",
renderer: {
type: "shape",
shapeMap: {
“M”: “plus”,
“Yeo”: “minus”
},
shapeHeight: 15;
shapeWidth: 15
},
header: {
text: "Shape Map"
}
},
{
name: "Month",
fieldName: "Month",
width: "70",
renderer: {
type: "shape",
shapeCallback: function (grid, cell) {
var value = cell. value;
var retValue;
if (value < 10) {
retValue = 'downarrow';
} else if (value < 20) {
retValue = 'itriangle';
} else if (value < 30) {
retValue = 'triangle';
} else {
retValue = 'uparrow';
}
return retValue;
},
shapeHeight: 15;
shapeWidth: 15
},
header: {
text: "Shape Callback"
},
styleName: "right-column"
},
... skip ...
];
gridView.setColumns(columns);
//Apply dynamic style
gridView.columnByName("Gender").styleCallback = function (column, cell) {
if (cell.value == 'M') return "rgsample-shape-blue";
};
gridView.columnByName("Month").styleCallback = function (column, cell) {
if (cell.value < 20) return "right-column rgsample-shape-blue";
};Specify the position of the shape
You can specify where the icon will be displayed by specifying shapeLocation.
ShapeLocations that can be specified are "left", "right", "top", "bottom", "leftedge", "rightedge", "topedge", "bottomedge", and "center".
var columns = [
... skip ...
{
name: "shape1",
fieldName: "Gender",
width: "100",
renderer: {
type: "shape",
shapeCallback: function (grid, cell) {
var sex = cell.value == 'Male' ? 'plus' : 'minus';
return sex;
},
shapeLocation: "left", //<---
shapeHeight: 15;
shapeWidth: 15
},
header: {
text: "LEFT"
}
},
... skip ...
];
gridView.setColumns(columns);