如何在 kendo ui 樹列表中的多列 header 的根列中放置按鈕/html？
[英]How can a button/html be placed in the root column of a multi-column header in kendo ui treelist?
問題描述
在 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
}]
}]
}]
示例鏈接
如何在多列 header 的根列中放置按鈕/html？
1 個解決方案
解決方案1
1 已采納 2021-02-08 16:57:49
我檢查了控制台，當該headerTemplate未注釋時，它有一個運行時錯誤：
未捕獲的類型錯誤：i.headerTemplate 不是 function
所以我想它期待一個模板 function，比如：
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>
如何自動調整Kendo TreeList列的onExpand和onCollapse？
[英]How to autofit Kendo TreeList column onExpand & onCollapse?
僅當columnwidth <maxInt時，才如何自動調整Kendo TreeList中的第一列？
[英]How to autoFit the first column in a Kendo TreeList ONLY if columnwidth < maxInt?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.