TemplateCellRenderer

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

상세 설명

CellRenderer 를 상속한다.

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

{value}: 데이터 값

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

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

[상위 클래스]

CellRenderer

예제 코드

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

프로퍼티 목록


콜백 목록



프로퍼티 정보

inputFocusable


inputFocusable: boolean

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

상세 설명

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

template


template: string

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

상세 설명

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

type


type: 'html'

종류: html 템플릿

콜백 정보

callback



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

상세 설명

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

예제 코드

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


valueCallback: RealizeValueCallback

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

상세 설명

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

예제 코드

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