CustomCellRenderer

사용자 지정 셀 렌더러를 설정할 때 사용하는 오브젝트

상세 설명

GridBase.registerCustomRenderer() 로 사용 가능하다.

예제 코드

gridView.registerCustomRenderer("renderer01", {
    initContent(parent) {
        var span = this._span = document.createElement("span");
        parent.append(span);
    },
    ...
}

콜백 정보

canClick


canClick: (event: MouseEvent) => boolean

그리드의 클릭 이벤트를 사용할지 결정하기 위한 콜백

상세 설명

false 를 반환하면 그리드는 더 이상 이벤트를 처리하지 않고, element 의 기본동작이 실행된다.

해당 콜백을 등록하지 않는 경우 false 를 반환한다.

CustomCellRenderer.click 을 사용하기 위해서는 true를 반환하는 함수로 설정해야 한다.

[매개변수 목록]

event - 마우스 클릭 이벤트

예제 코드

grid.registerCustomRenderer("renderer01", {
     canClick : function() {
         return true;
     }
}

canEdit


canEdit: (event: MouseEvent) => boolean

편집 가능한 렌더러인지의 여부

상세 설명

[매개변수 목록]

event - 마우스 이벤트

예제 코드

grid.registerCustomRenderer("renderer01", {
     canEdit: function() {
         return true;
     }
}

canEditKey


canEditKey: (event: KeyboardEvent) => boolean

편집 단축키를 지정하는 것을 결정하기 위한 콜백

상세 설명

false 를 반환하면 특정 키를 눌렀을 때 편집하는 기능을 반영하지 않는다.

[매개변수 목록]

event - 키보드 이벤트

예제 코드

grid.registerCustomRenderer("renderer01", {
     canEditKey: function(event) {
         return event.ctrlKey && event.keyCode === 65;
     }
}

clearContent


clearContent: (dom: HTMLElement) => void

내용 초기화 시에 실행 될 콜백

상세 설명

grid.destroy 를 실행했을때 호출되는 method 이다.

메모리 누수를 방지하기 위해서 initContent 에서 생성되거나 참조하는 객체들을 모두 해제해 주어야 한다.

addEventListener 또는 onclick등으로 연결한 이벤트가 있는 경우 반드시 해제를 해주어야 한다

[매개변수 목록]

dom - parent element

예제 코드

grid.registerCustomRenderer("renderer01", {
     clearContent: function(dom) {
         dom.innerHTML = "";
     }
}

click


click: (event: MouseEvent) => any

클릭 시에 실행 될 콜백

상세 설명

element 의 click event 와는 별개로 처리된다.

event.target이 클릭 가능하면 ClickData 를 반환해야 한다.

반환 된 데이터는 GridBase.onCellItemClicked 이벤트로 전달된다.

false 반환 시 해당 이벤트를 중지시킨 후 preventClick 을 호출한다.

[매개변수 목록]

event - 마우스 클릭 이벤트

예제 코드

grid.registerCustomRenderer("renderer01", {
     click: function(event) {
         let index = this.index.toProxy();
         if ( event.target === this._button1 ||  event.target === this._button2 || event.target === this._href) {
             return {
                 cellType:"data",
                 target : event.target,
                 index: index,
                 value: this._value
             }
         }
     }
}

editClick


editClick: (index: CellIndex, event: MouseEvent, result: RendererEditResult) => boolean

편집 완료 행위를 결정하는 콜백

상세 설명

false 반환 시 CustomCellRenderer.preventEditClick 을 호출한다.

[매개변수 목록]

index - 편집

event - 마우스 이벤트

result - 편집 완료 결과

editKey


editKey: (index: CellIndex, event: KeyboardEvent, result: RendererEditResult) => boolean

설정한 편집 단축키로 편집을 하기 위한 콜백

상세 설명

false 반환 시 편집을 취소한다.

[매개변수 목록]

index - 편집

event - 마우스 이벤트

result - 편집 완료 결과

예제 코드

grid.registerCustomRenderer("renderer01", {
     editKey: function(index, event, result) {
         result.commit = false;
         if (event.ctrlKey && event.keyCode === 65) {
             result.commit = true;
             result.value = '가나다라';
             return true;
         }
         return false;
     }
}

initContent


initContent: (dom: HTMLElement) => void

내용 초기화 시에 실행 될 콜백

[매개변수 목록]

dom - parent element

예제 코드

grid.registerCustomRenderer("renderer01", {
     initContent: function(dom) {
         let span = this._span = document.createElement("span");
         span.className = "custom_render_span"
         dom.appendChild(span);

         dom.appendChild(this._button1 = document.createElement("span"));
         dom.appendChild(this._button2 = document.createElement("span"));

         let a = this._href = document.createElement("a");
         a.href = "http://realgrid.com";
         a.target = "_blank";
         a.tabIndex = -1;
         a.textContent = "real";
         dom.appendChild(a);
     }
}

preventClick


preventClick: (event: MouseEvent) => void

클릭을 중지시키기 위한 콜백

상세 설명

event.preventDefault() 를 자유롭게 호출하기 위해 만들어졌다.

해당 콜백을 지정하지 않으면, Event.preventDefault 가 호출한다.

[매개변수 목록]

event - 마우스 클릭 이벤트

preventEditClick


preventEditClick: (event: MouseEvent) => void

편집 시 편집 완료를 중지시키기 위한 콜백

상세 설명

event.preventDefault() 를 자유롭게 호출하기 위해 만들어졌다.

해당 콜백을 지정하지 않으면, Event.preventDefault 가 호출한다.

[매개변수 목록]

event - 마우스 이벤트

render


render: (grid: any, model: GridCell, w: number, h: number, info: any) => void

렌더링 시에 실행 될 콜백

상세 설명

element 내의 text 나 style 을 적용 시킬 수 있다.

[매개변수 목록]

grid - GridBase 컨트롤

model - GridCell 객체

w - 폭

h - 너비

info - 추가정보

예제 코드

grid.registerCustomRenderer("renderer01", {
     render: function(grid, model, w, h, info) {
          let span = this._span;

          // text설정.
          span.textContent = model.value + "-YYY";
          this._value = model.value;

          // className 또는 style에 직접설정
          // style에 직접설정하는 경우 className을 이용하는것보다 속도가 느려질수 있다.
          // 가능하다면 className을 이용한다.
          this._button1.className = "custom_none";
          this._button2.className = "custom_none";

          switch(model.value) {
              case "Germany":
                  this._button1.className = "custom_search custom-hover";
                  this._button2.className = "custom_de custom-hover";
                  break;
              case "France":
                  this._button1.className = "custom_fr custom-hover";
                  break;
              case "Brazil":
                  this._button1.className = "custom_br custom-hover";
                  break;
          }
     }
}