RealGrid2 API
Interface
TemplateCellRenderer

TemplateCellRenderer

HTML 형식의 템플릿을 표시하는 렌더러

Signature:

export interface TemplateCellRenderer extends CellRenderer

Extends: CellRenderer

Remarks

CellRenderer 를 상속한다.

템플릿 설정 시 중괄호 안에 있는 형식에 따라 다르게 해석된다.

{value}: 데이터 값

{value: fieldName}: 필드명에 해당하는 데이터 값

나머지: 필드명으로 간주 될 변수명

[상위 클래스]

CellRenderer

Example

let column.renderer = {
    type:"html",
    template: "<img src='images/realgrid-logo.png' height='20'/><span>${value}-${value:unitprice}-</span><span style='color: red;font-weight: bold;'>${xxx}</span>",
    valueCallback: function (grid, model, field) {
    if (field == "xxx") {
        return "1234";
    }
}

Events

PropertyTypeDescription
callbackGetTemplateCallback렌더링 시 표시할 html을 만들기 위한 콜백
valueCallbackRealizeValueCallbacktemplate에 ${xxx} 형태로 감싸진 값을 실제 값으로 치환하기 위한 콜백

Properties

PropertyTypeDescription
inputFocusablebooleanrenderer에 input element가 있을때 focus를 가질수 있는지 여부
templatestring입력되는 html 템플릿 형태의 문자열
templateEventsTemplateEvent | TemplateEvent[]element의 event를 지정한다.
type'html'종류: html 템플릿

Events Desc

callback

렌더링 시 표시할 html을 만들기 위한 콜백

Type - GetTemplateCallback

Remarks:

화면에 표시되어야 할 내용이 값에 따라 변경되는 경우 표시되는 html을 만들기 위해 사용한다.

Example:

column.renderer = {
    type:"html",
    callback: function (grid, model, width, height) {
        const value = model.value;
        if (value === 'xxx') {
            return "<img src='images/realgrid-logo.png' height='" + height / 2 + "'></img>" + "<div>" + model.value + "</div>";
        } else {
            return "<div>" + model.value + "</div>"
        }
 
    }
}

valueCallback

template에 ${xxx} 형태로 감싸진 값을 실제 값으로 치환하기 위한 콜백

Type - RealizeValueCallback

Remarks:

셀의 값에 따라 template를 변경하는 경우 ${xxx}형태로 template에 지정하면 rendering시 valueCallback을 호출하고 return된 문자열로 ${xxx}을 대체한다.

Example:

column.renderer = {
    type:"html",
    template: "<img src='images/realgrid-logo.png' height='20'/><span>${value}-${value:unitprice}-</span><span style='color: red;font-weight: bold;'>${xxx}</span>",
    valueCallback: function (grid, model, field) {
        if (field == "xxx") {
            return "1234";
        }
    }
}

Properties Desc

inputFocusable

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

Type - boolean

Remarks:

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

template

입력되는 html 템플릿 형태의 문자열

Type - string

Remarks:

callback이 지정되지 않으면 사용한다.

templateEvents

element의 event를 지정한다.

Type - TemplateEvent | TemplateEvent[]

Remarks:

Example:

const htmlRenderer = {
    type: "html",
    template: `<input type='button' value='click' data-itemindex=\${itemindex}></input>`,
    templateEvents: {
        selector: 'input[type="button"]',
        event: {
            onclick: function(e) {console.log(e)}
        }
    }
}

type

종류: html 템플릿

Type - 'html'

StyledCellTextCellEditor