Treetemplateoptions

TreeTemplateOptions

treeView 첫번째 컬럼의 data영역에 html을 표시하기 위한 설정 정보

Signature:

export interface TreeTemplateOptions

Remarks

input, textarea와 같이 사용자 상호작용을 가지는 HTMLElement는 기본동작이 제한된다.

Events

Property	Type	Description
callback	GetTemplateCallback	렌더링 시 표시할 html을 만들기 위한 콜백
valueCallback	RealizeValueCallback	template에 `${xxx}` 형태로 감싸진 값을 실제 값으로 치환하기 위한 콜백

Properties

Property	Type	Description
template	string	입력되는 html 템플릿 형태의 문자열
templateEvents	TreeTemplateEvent \| TreeTemplateEvent[]	element의 event를 지정한다.

Events Desc

callback

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

Type - GetTemplateCallback

Remarks:

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

Example:

treeView.treeOptions.templateOptions = {
    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:

treeView.treeOptions.templateOptions = {
    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

template

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

Type - string

Remarks:

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

templateEvents

element의 event를 지정한다.

Type - TreeTemplateEvent | TreeTemplateEvent[]

Remarks:

Example:

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

TreeTemplateEvent UpdatedCell