Column header HTML Template
You can use HTML code directly by using HTML telmplate in the column header.
Loading RealGrid...
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.
Loading RealGrid...
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);