Custom Renderer - Image Button

Custom Renderer is a function that allows you to create and use your own renderer when the basic renderer provided by RealGrid is insufficient.
The demo below shows one or more image buttons depending on the conditions.

If the investment country is Mozambique, the ‘Pop-up’ and ‘Inquiry’ buttons are displayed.
In Canada, a ‘pop-up’ button is displayed.
In the case of Bouvet Island, the ‘Search’ button is displayed.

Note

Using a custom renderer means that the developer directly controls the grid without using its functions. Therefore, it is not basically a technical support area.
However, if there is a problem with the code you wrote, you must send us the executable source code to receive technical support.
The custom renderer was developed for view purposes and is not suitable for input purposes.
Since it was not developed with the idea of being able to draw the entire thing using external components, there may be problems if you draw an area larger than the row height.

.custom_none {
display:none;
}
 
.custom_render_span {
flex: 1;
text-align: left;
overflow: hidden;
}
 
.custom_renderer > div {
   display: flex;
   align-items: center;
}
 
.custom_renderer .rg-renderer:hover .custom-hover {
visibility:visible;
}
 
.custom_renderer .rg-renderer .custom-hover {
visibility:hidden;
}
 
.custom_renderer .rg-renderer .custom-focused {
visibility:visible;
}
 
.custom_search {
height: 26px;
margin-left: 2px;
background: url("/images/btnImages/search_normal.png") center center no-repeat;
     flex: 0 0 45px;
}
.custom_search:hover {
background: url("/images/btnImages/search_hover.png") center center no-repeat;
}
.custom_search:active {
background: url("/images/btnImages/search_click.png") center center no-repeat;
}
 
.custom_popup {
height: 26px;
margin-left: 2px;
background: url("/images/btnImages/popup_normal.png") center center no-repeat;
     flex: 0 0 45px;
}
.custom_popup:hover {
background: url("/images/btnImages/popup_hover.png") center center no-repeat;
}
.custom_popup:active {
background: url("/images/btnImages/popup_click.png") center center no-repeat;
}

var columns = [
   ...
   {
     name: "KorCountry",
     fieldName: "KorCountry",
     width: "150",
     renderer: "renderer_imgbtn", //renderer with registerCustomRenderer
     styleName: "left-column custom_renderer",
     header: {
       text: "Investment country",
       styleName: "orange-column"
     }
   },
   ...
];
 
gridView.setColumns(columns);

gridView.registerCustomRenderer("renderer_imgbtn", {
   initContent : function (parent) {
       var span = this._span = document.createElement("span");
       span.className = "custom_render_span"
       parent.appendChild(span);
       parent.appendChild(this._button1 = document.createElement("span"));
       parent.appendChild(this._button2 = document.createElement("span"));
   },
 
   canClick : function() {
       return true;
   },
 
   clearContent : function(parent) {
       console.log("DISPOSED......");
       parent.innerHTML = "";
   },
 
   render : function(grid, model, width, height, info) {
       info = info || {};
       var span = this._span;
       // text settings.
       span.textContent = model.value;
 
       this._value = model.value;
       this._button1.className = "";
       this._button2.className = "";
       switch(model.value) {
           case "Mozambique":
               this._button1.className = "custom_search custom-hover" + (info.focused ? " custom-focused" : "");
               this._button2.className = "custom_popup custom-hover" + (info.focused ? " custom-focused" : "");
               break;
           case "Canada":
               this._button1.className = "custom_search custom-hover" + (info.focused ? " custom-focused" : "");
               break;
           case "Bouvet Island":
               this._button2.className = "custom_popup custom-hover" + (info.focused ? " custom-focused" : "");
               break;
       }
 
   },
 
   click : function(event) {
       var grid = this.grid.handler; //
       var index = this.index.toProxy(); //
       event.preventDefault;
 
       if (event.target === this._button1) {
         alert("Search button: " + this._value);
       } else if (event.target === this._button2) {
         alert("Popup button: " + this._value);
       }
   }
});

Barcode Renderer Real chart integration