컬럼 헤더 HTML Template
컬럼 헤더에 html telmplate를 사용하여 html코드를 직접 사용할 수 있습니다.
header.template의 $에 values 에서 설정한 값을 표시합니다.
var columns = [{
...생략
{
name: "Gender",
fieldName: "Gender",
width: 150,
header: {
template: "${headerText} <img src='/images/common/man.png' alt='Man Image' width='15' height='15'><img src='/images/common/woman.png' alt='Woman Image' width='15' height='15'>",
values: { "headerText":"성별 이미지표시"}
}
},
...생략
}];
gridView.setColumns(columns);컬럼 헤더 HTML Template을 통해 생성한 요소에 이벤트 추가
컬럼 헤더에 html telmplate를 사용하여 생성한 요소에 templateEvents 속성을 통해 이벤트를 설정하실 수 있습니다.
var columns = [{
...생략
{
name: "Gender",
fieldName: "Gender",
width: 150,
header: {
template:
"<input id='button1' type='button' value='버튼1'/> <input id='button2' type='button' value='버튼2' />",
templateEvents: [
{
selector: 'input[value="버튼1"]',
event: {
onclick: (event) => {
alert("버튼1 클릭!");
},
},
},
{
selector: "#button2",
event: {
onclick: (event) => {
alert("버튼2 클릭!");
},
},
},
],
},
},
...생략
}];
gridView.setColumns(columns);