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?
Advertisement
Answer
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>