我正在尝试将自定义悬停文本(如工具提示)添加到 KendoUI 网格中的列标题.文本应特定于每一列,理想情况下不显示在标题行以外的任何内容上.Grid 对象没有工具提示选项,但我不确定是否有办法使用 CSS 或它们的 行模板 配置.
I'm trying to add custom hovertext (like a tooltip), to the column headers in a KendoUI grid. The text should be specific to each column and ideally not displayed on anything but the header row. There isn't a tooltip option for the Grid object but I'm not sure if there might be a way to do it either using CSS or their row template configuration.
有兴趣听听是否有人以前这样做过,如果是这样,如何做,或者是否不可能.
Would be interested in hearing if anyone has done this before and if so how, or if it may not be possible.
谢谢.
推荐答案如果 tooltip 的内容是静态的,那么你可以使用 columns.headerTemplate 然后添加一个 工具提示 到标题.
If the contents of the tooltip is static, then you could use the columns.headerTemplate to then add a tooltip to the header.
示例 jsFiddle.
代码:
$("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "demos.kendoui/service/Northwind.svc/Orders" }, schema: { model: { fields: { OrderID: { type: "number" }, Freight: { type: "number" }, ShipName: { type: "string" }, OrderDate: { type: "date" }, ShipCity: { type: "string" } } } }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true }, height: 430, filterable: true, sortable: true, pageable: true, columns: [{ field: "OrderID", filterable: false }, "Freight", { field: "OrderDate", title: "Order Date", width: 120, format: "{0:MM/dd/yyyy}", headerTemplate: '<span title="This is the date the order was made.">Order Date</span>' }, { field: "ShipName", title: "Ship Name", width: 260, headerTemplate: '<span title="The company the order was shipped to.">Ship Name</span>' }, { field: "ShipCity", title: "Ship City", width: 150, headerTemplate: '<span title="The city the order was shipped to.">Ship City</span>' }] }); $("#grid").kendoTooltip({ filter: ".k-header span" });更多推荐
在 KendoUI 网格列标题上添加 Hovertext
发布评论