class custom renderer

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 a radio button operating in one cell. Unlike the renderer method applied to the existing “Custom Renderer - Image Button”, this function is used in a class method.

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 renderer class settings

class CustomRadioRenderer extends RealGrid.CustomCellRendererImpl {
   getstyleName() {
       return 'rg-renderer custom-radio-renderer';
   }
   _checks = [];
   createInput(parent, value, label) {
       const span = document.createElement("label");
       const check = document.createElement("input");
       check.type = "radio";
       check.value = value;
       span.appendChild(check);
       span.appendChild(document.createTextNode(` ${label} `));
       parent.appendChild(span);
       return {check, label: span};
   }
 
   _doInitContent(parent) {
    
       const column = this.index.column;
       this._checks = new Array(column.values.length).fill(null);
         this._checks.forEach((v, i, array) => {
             array[i] = this.createInput(parent, column.values[i], column.labels[i]);
         });
   }
 
   _doClearContent(parent) {
       this._checks.forEach(v => {
           v.check.parentElement?.removeChild(v.check);
           v.label.parentElement?.removeChild(v.label);
       })
       this._checks = [];
       parent.innerHTML = "";
   }
  
   render(grid, model, w, h) {
       this._checks.forEach(v => {
           v.check.checked = model.value === v.check.value;
       });
   }
 
   canEditClickAt(event) {
       // Enables the HTMLInputElement to enter the editing state only when it is clicked.
       return (event.target instanceof HTMLInputElement);
      
   }
 
   canClick(event) {
       return true;
   }
 
   canEdit(){
       return true;
   }
 
   canClickSpaceKey(event){
       if (['1','2'].includes(event.key)) {
           return true;
       }
       return false;
   }
 
   itemClick(event) {
       if ([49, 50, 51].includes(event.keyCode)) {
           const idx = event.keyCode - 49;
           this._checks[idx] && this._checks[idx].check.click();
       }
   }
   _doEditClick(index, event, result) {
       const target = event.target
       result.value = target.value;
       return target instanceof HTMLInputElement;
   }
 
   get showTooltip() {
       return true
   }
 
   tooltip(model, index) {
       if (!model.value) {
           return 'Please select a value'
       }
       return ""
   }
}

Register and apply renderer

RealGrid.registerCustomRenderer("radio_renderer", CustomRadioRenderer);
 
//Register renderer when setting column
var columns = [
   ...
   {
     name: "Gender",
     fieldName: "Gender",
     width: "100",
     header: {
       text: "Gender"
     },
     values:["Male", "Female"],
     labels:["Male", "Female"],
     renderer: {
       type: "radio_renderer"
     }
   }
]

Real chart integration series column