RealGrid2 Guide
Renderer
Image renderer

Image Renderer

The Image cell renderer interprets the value of the data cell as an image URL and downloads and displays the image.

How to display the image renderer

  1. If the value of the cell data is the address of an image, the image at this address is displayed.
  2. Use callback to use the image address as the return value.
  3. Display the image using the imageMap function.
    (In the example below, the "image Map" column only specifies 'EUR' and 'USD' to display only two images.)
var columns = [
   ... skip ...
     {
         name: "imageUrl",
         fieldName: "imageUrl",
         width: "150",
         renderer: {
             type: "image",
             imageField: "imageUrl",
             imageHeight: 80;
         },
         header: {
           text: "Image URL"
         }
     },
     {
         name: "imageUrl1",
         fieldName: "Monetary",
         width: "150",
         renderer: {
             type: "image",
             imageCallback: function (grid, cell) {
                 var monetary = grid.getValue(cell.item.index, "Monetary");
                 return "/images/monetaryFlag/" + monetary + ".png";
             },
             imageHeight: 80
         },
         header: {
           text: "Image Callback"
         }
     },
     {
         name: "imageUrl2",
         fieldName: "Monetary",
         width: "150",
         renderer: {
             type: "image",
             imageMap: {
                 "EUR": "/images/monetaryFlag/EUR.png",
                 "USD": "/images/monetaryFlag/USD.png"
             },
             imageHeight: 80;
            
         },
         header: {
           text: "Image Map"
         }
     },
   ... skip ...
];
 
gridView.setColumns(columns);
Bar RendererIcon Renderer