Column header HTML Template
You can use HTML code directly by using HTML telmplate in the column header.
Displays the value set in values in $ of header.template.
var columns = [{
...skip
{
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":"Show gender image"}
}
},
...skip
}];
gridView.setColumns(columns);Adding Events to Elements Created via Column Header HTML Template
You can set events to elements created using HTML telmplate in the column header via the templateEvents property.
var columns = [{
...skip
{
name: "Gender",
fieldName: "Gender",
width: 150,
header: {
template:
"<input id='button1' type='button' value='button1'/> <input id='button2' type='button' value='button2' />",
templateEvents: [
{
selector: 'input[value="button1"]',
event: {
onclick: (event) => {
alert("Button1 clicked!");
},
},
},
{
selector: "#button2",
event: {
onclick: (event) => {
alert("Button2 clicked!");
},
},
},
],
},
},
...skip
}];
gridView.setColumns(columns);