class 커스텀 렌더러

class CustomRadioRenderer extends RealGrid.CustomCellRendererImpl {
  get styleName() {
      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) {
      // HTMLInputElement가 클릭되었을때만 편집상태로 들어갈수 있도록 한다.
      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 '값을 선택하세요'
      }
      return ""
  }
}

RealGrid.registerCustomRenderer("radio_renderer", CustomRadioRenderer);
 
//컬럼 설정 시 렌더러 등록
var columns = [
  ...
  {
    name: "Gender",
    fieldName: "Gender",
    width: "100",
    header: {
      text: "성별"
    },
    values:["남", "여"],
    labels:["남", "여"],
    renderer: {
      type: "radio_renderer"
    }
  }
]