RealGrid2 API
Interface
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

PropertyModifiersTypeDescription
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

PropertyModifiersTypeDescription
indexCellIndex셀의 위치정보
inputFocusablebooleanrenderer에 input element가 있을때 focus를 가질수 있는지 여부
tagsConfigObject사용자가 필요한 임의값을 입력한다.

Events Desc

canClick

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

Remarks:

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

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

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

[매개변수 목록]

event - 마우스 클릭 이벤트

Example:

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

canEdit

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

Remarks:

[매개변수 목록]

event - 마우스 이벤트

Example:

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

canEditKey

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

Remarks:

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

[매개변수 목록]

event - 키보드 이벤트

Example:

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

clearContent

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

Remarks:

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

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

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

[매개변수 목록]

dom - parent element

Example:

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

click

클릭 시에 실행 될 콜백

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

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

Remarks:

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

[매개변수 목록]

index - 편집

event - 마우스 이벤트

result - 편집 완료 결과

editKey

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

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

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

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

Remarks:

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

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

[매개변수 목록]

event - 마우스 클릭 이벤트

preventEditClick

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

Remarks:

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

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

[매개변수 목록]

event - 마우스 이벤트

render

렌더링 시에 실행 될 콜백

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

셀의 위치정보

inputFocusable

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

Remarks:

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

tags

사용자가 필요한 임의값을 입력한다.

CopyOptionsDataCell