问题描述
在 kendo ui 树列表中, headerTemplate 仅适用于层次结构的最低列中的多列。不在根列中。
示例:
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
}]
}]
}]
示例Link
如何在多列标题的根列中放置按钮/html?
解决方法
我检查了控制台,当 headerTemplate
被取消注释时,它有一个运行时错误:
未捕获的类型错误:i.headerTemplate 不是函数
所以我认为它需要一个模板函数,比如:
headerTemplate: kendo.template("Personal Info Template"),
它可以工作,因此您可以在该模板中使用 html:
<!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>