RealGrid2 Guide
Renderer 🆕
Icon Renderer

Icon Renderer

The ICON cell renderer displays an image at the iconLocation location along with text.

How to display the icon renderer

  1. You can use callback to return the icon address and display it.
  2. 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).
Loading RealGrid...
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".

Loading RealGrid...
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.

Loading RealGrid...
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);
Image rendererShape renderer