In the kendo ui treelist the headerTemplate works for a multi-column only in the lowest column of the hierarchy. Not in the root column.
Sample:
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
title: "Personal Info",
/* headerTemplate: "Personal Info Template", */ /* do not works */
columns: [{
field: "LastName", title: "Last Name", width: 120,
}, {
title: "Location",
columns: [{
field: "City", width: 140,
headerTemplate: "City Template", /* works */
}, {
field: "Country", width: 140
}]
}]
}]
Sample Link
How can a button/html be placed in the root column of a multi-column header?
I've checked the console and it has a runtime error when that headerTemplate was uncommented:
Uncaught TypeError: i.headerTemplate is not a function
So i suposed it was expecting a template function, like:
headerTemplate: kendo.template("Personal Info Template"),
And it works, hence you can use html in that template:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/multicolumnheaders">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
sortable: true,
resizable: true,
reorderable: true,
columnMenu: true,
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
title: "Personal Info",
headerTemplate: kendo.template("Personal Info <button>Button</button>"),
columns: [{
field: "LastName", title: "Last Name", width: 120,
}, {
title: "Location",
columns: [{
field: "City", width: 140,
headerTemplate: "City Template", /* works */
}, {
field: "Country", width: 140
}]
}]
}]
});
});
</script>
</div>
</body>
</html>