class 커스텀 렌더러

커스텀 렌더러는 리얼그리드에서 제공하는 기본 렌더러로 기능이 불충분할때 렌더러를 직접 만들어서 사용할 수 있는 기능입니다.
아래 데모는 라디오 버튼을 하나의 셀에서 동작되도록 표현한 데모 입니다.
기존 "커스텀 렌더러 - 이미지 버튼"에 적용된 렌더러 방식과 다르게 class 방식으로 사용하는 기능입니다.

참고사항

커스텀렌더러를 사용한다는 것은 그리드의 기능을 사용하지 않고 직접 개발자분이 컨트롤을 한다는 의미입니다. 그렇기 때문에 기본적으로 기술지원영역은 아닙니다.
하지만 작성하신 코드가 문제가 되는 경우 반드시 실행가능한 소스 코드를 보내주셔야 기술지원이 가능합니다.
커스텀 렌더러는 view 용도로 개발되었으며, 입력용도로는 적합하지 않습니다.
외부 컴포넌트를 사용하여 전체를 그릴수있도록 고려해서 개발되지 않았기 때문에 행 높이보다 큰 영역을 그린다면 문제가 있을 수 있습니다.

custom renderer 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"
    }
  }
]

리얼차트 연동 시리즈 컬럼