Customcellrenderer

CustomCellRenderer

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

Signature:

export interface CustomCellRenderer

Remarks

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

Example

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

Events

Property	Type	Description
canClick	(event: MouseEvent) => boolean	그리드의 클릭 이벤트를 사용할지 결정하기 위한 콜백
canEdit	(event: MouseEvent) => boolean	편집 가능한 렌더러인지의 여부
canEditKey	(event: KeyboardEvent) => boolean	편집 단축키를 지정하는 것을 결정하기 위한 콜백
clearContent	(dom: HTMLElement) => void	내용 초기화 시에 실행 될 콜백
click	(event: MouseEvent) => any	클릭 시에 실행 될 콜백
editClick	(index: CellIndex, event: MouseEvent, result: RendererEditResult) => boolean	편집 완료 행위를 결정하는 콜백
editKey	(index: CellIndex, event: KeyboardEvent, result: RendererEditResult) => boolean	설정한 편집 단축키로 편집을 하기 위한 콜백
initContent	(dom: HTMLElement) => void	내용 초기화 시에 실행 될 콜백 [매개변수 목록] `dom` - parent element
preventClick	(event: MouseEvent) => void	클릭을 중지시키기 위한 콜백
preventEditClick	(event: MouseEvent) => void	편집 시 편집 완료를 중지시키기 위한 콜백
render	(grid: any, model: GridCell, w: number, h: number, info: any) => void	렌더링 시에 실행 될 콜백

Properties

Property	Type	Description
index	CellIndex	셀의 위치정보
inputFocusable	boolean	renderer에 input element가 있을때 focus를 가질수 있는지 여부
tags	ConfigObject	사용자가 필요한 임의값을 입력한다.

Events Desc

canClick

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

Type - (event: MouseEvent) => boolean

Remarks:

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

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

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

[매개변수 목록]

event - 마우스 클릭 이벤트

Example:

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

canEdit

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

Type - (event: MouseEvent) => boolean

Remarks:

[매개변수 목록]

event - 마우스 이벤트

Example:

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

canEditKey

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

Type - (event: KeyboardEvent) => boolean

Remarks:

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

[매개변수 목록]

event - 키보드 이벤트

Example:

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

clearContent

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

Type - (dom: HTMLElement) => void

Remarks:

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

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

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

[매개변수 목록]

dom - parent element

Example:

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

click

클릭 시에 실행 될 콜백

Type - (event: MouseEvent) => any

Remarks:

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

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

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

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

[매개변수 목록]

event - 마우스 클릭 이벤트

Example:

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

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

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

Remarks:

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

[매개변수 목록]

index - 편집

event - 마우스 이벤트

result - 편집 완료 결과

editKey

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

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

Remarks:

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

[매개변수 목록]

index - 셀의 위치정보

event - 마우스 이벤트

result - 편집 완료 결과

Example:

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

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

[매개변수 목록]

dom - parent element

Type - (dom: HTMLElement) => void

Example:

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

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

Type - (event: MouseEvent) => void

Remarks:

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

해당 콜백을 지정하지 않으면, Event.preventDefault (opens in a new tab) 가 호출한다.

[매개변수 목록]

event - 마우스 클릭 이벤트

preventEditClick

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

Type - (event: MouseEvent) => void

Remarks:

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

해당 콜백을 지정하지 않으면, Event.preventDefault (opens in a new tab) 가 호출한다.

[매개변수 목록]

event - 마우스 이벤트

render

렌더링 시에 실행 될 콜백

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

Remarks:

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

[매개변수 목록]

grid - GridBase 컨트롤

model - GridCell 객체

w - 폭

h - 너비

info - 추가정보

Example:

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;
          }
     }
}

Properties Desc

index

셀의 위치정보

Type - CellIndex

inputFocusable

renderer에 input element가 있을때 focus를 가질수 있는지 여부

Type - boolean

Remarks:

true로 지정하면 input element가 focus를 가질수 있다. false이면 input element를 클릭해도 그리드가 focus를 가져간다. 그리드의 editor가 아닌 사용자의 input이 focus를 가지는 경우 키보드를 이용한 이동/Tab/편집은 사용자가 관리해야 한다.