guide Html Renderer
RealGrid-Touch 라이브러리가 제공하는 기본 렌더러들이 부족한 경우 직접 html로 데이터 필드 값을 표시할 수 있다. 두 가지 방식으로 구현할 수 있다.
1. 컨트롤 container의 element
리스트 컨트롤이 생성되는 container div의 자손 element로 작성하고,
element의 id를 템플릿에 지정한다.
렌더러로 사용할 element들은 반드시 'rtc-renderers'라는 div의 자식으로 포함되어야 한다.
이 div 엘리먼트는 컨트롤 생성시 layout 용으로 준비된 후 제거된다.
html 구문 속에 템플릿에 기본 layout을 지정하는 것과 동일하게 param을 사용할 수 있다.
<html>
<body>
<div id="realtouch">
<div class="rtc-renderers">
<div id="addr-renderer"><span style="color:${addr-color}">${@value}</span></div>
</div>
</div>
</body>
</html>
템플릿에서 렌더러 type을 'html'로 지정하고, domid 속성에 element의 id를 설정한다.
const row_template = {
template: {
layout: 'vlinear',
children: [{
...
}, {
field: 'ADDR',
left: 0,
renderer: {
type: 'html',
domid: 'addr-renderer',
useInner: true
}
}]
},
};
2. inline html
템플릿 속성에 직접 html 구문을 설정한다.
const row_template = {
template: {
type: 'html',
html: '<div id="addr-renderer"><span style="color:${addr-color}">${@value}</span></div>'
},
};
type은 생략할 수 있다.
const row_template = {
template: {
html: '<div id="addr-renderer"><span style="color:${addr-color}">${@value}</span></div>'
},
};