TemplateCellRenderer
HTML 형식의 템플릿을 표시하는 렌더러
상세 설명
CellRenderer 를 상속한다.
템플릿 설정 시 중괄호 안에 있는 형식에 따라 다르게 해석된다.
{value}
: 데이터 값
{value: fieldName}
: 필드명에 해당하는 데이터 값
나머지: 필드명으로 간주 될 변수명
[상위 클래스]
예제 코드
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: boolean
renderer에 input element가 있을때 focus를 가질수 있는지 여부
상세 설명
true
로 지정하면 input element가 focus를 가질수 있다. false
이면 input element를 클릭해도 그리드가 focus를 가져간다. 그리드의 editor가 아닌 사용자의 input이 focus를 가지는 경우 키보드를 이용한 이동/Tab/편집은 사용자가 관리해야 한다.
콜백 정보
callback: GetTemplateCallback
렌더링 시 표시할 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: 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";
}
}
}