Icon Renderer
The ICON cell renderer displays an image at the iconLocation location along with text.
How to display the icon renderer
- You can use callback to return the icon address and display it.
- You can display an icon using the iconMap function. (In the icon map, only 'EUR' and 'USD' are specified, so only two images are displayed).
var columns = [
... skip ...
{
name: "icon1",
fieldName: "Gender",
width: "100",
renderer: {
type: "icon",
iconCallback: function (grid, cell) {
var sex = cell.value == 'Male' ? 'man' : 'woman';
return "/images/common/" + sex + ".png";
},
iconHeight: 15,
iconWidth: 15
},
header: {
text: "Icon Callback"
}
},
{
name: "icon2",
fieldName: "Gender",
width: "100",
renderer: {
type: "icon",
iconMap: {
"M": "/images/common/man.png",
"Woman": "/images/common/woman.png"
},
iconHeight: 15,
iconWidth: 10
},
header: {
text: "Icon Map"
}
},
... skip ...
];
gridView.setColumns(columns);Specify the position of the icon
You can specify the location where the icon will be displayed by specifying iconLocation. The iconLocation that can be specified is "left", "right", "top", "bottom", "leftedge", "rightedge", "topedge", "bottomedge", and "center".
var columns = [
... skip ...
{
name: "icon1",
fieldName: "Gender",
width: "100",
renderer: {
type: "icon",
iconCallback: function (grid, cell) {
var sex = cell.value == 'Male' ? 'man' : 'woman';
return "/images/common/" + sex + ".png";
},
iconLocation: "left", //<----
iconHeight: 15,
iconWidth: 10
},
header: {
text: "LEFT"
}
},
... skip ...
];
gridView.setColumns(columns);Display icons based on conditions
You can use styleCallback to display icons in cells based on conditions. Below is an example of displaying an icon when the age is 60 years or older.
var columns = [
... skip ...
{
name: "icon1",
fieldName: "Gender",
width: "100",
styleCallback: function(grid, dataCell){
let ret = {};
var age = grid.getValue(dataCell.index.itemIndex, 'Age')
if(age > 60){
ret.renderer ={
type: "icon",
iconCallback: function (grid, cell) {
var sex = cell.value == 'Male' ? 'man' : 'woman';
return "/images/common/" + sex + ".png"
},
iconHeight: 15,
iconWidth: 15
}
}
return ret;
},
header: {
text: "Icon Callback",
styleName: "orange-column"
}
},
... skip ...
];
gridView.setColumns(columns);