在KendoUI网格列标题上添加Hovertext [英] Adding Hovertext on KendoUI Grid Column Headers

问题描述

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

谢谢.

推荐答案

如果工具提示的内容是静态的，则可以使用工具提示.

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: "http://demos.kendoui.com/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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！