在KendoUI网格列标题上添加Hovertext

本文介绍了在KendoUI网格列标题上添加Hovertext的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试将自定义悬停文本(如工具提示)添加到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.

谢谢.

推荐答案

如果工具提示的内容是静态的，则可以使用 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" });