上一篇: css – ASP.NET MVC – 基于控制... 下一篇:css – div宽度100％10px：相对于...

css – 在KendoUI网格列标题上添加Hovertext

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 在KendoUI网格列标题上添加Hovertext，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试将自定义hovertext(如工具提示)添加到KendoUI网格中的列标题中.文本应特定于每列,理想情况下不显示在标题行之外的任何内容上. Grid对象没有工具提示选项,但我不确定是否可以使用CSS或其 row template配置来执行此操作.

有兴趣听听是否有人之前已经这样做过,如果有的话,或者如果有可能的话.

谢谢.

解决方法

如果工具提示的内容是静态的,那么您可以使用 columns.headerTemplate然后在标题中添加 tooltip.

Example jsFiddle.

代码：

$("#grid").kendoGrid({
    datasource: {
        type: "odata",transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/orders"
        },scheR_439_11845@a: {
            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"
});