在Kendo UI网格列标题上添加悬停文本

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Kendo UI网格列标题上添加悬停文本相关的知识,希望对你有一定的参考价值。

我正在尝试将自定义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"
        },
        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"
});
另一答案

如果要在每个列标题上定义工具提示,可以在grid thead元素上定义qazxsw poi,如下所示:

kendoTooltip

当您将标题悬停在任何位置时,这会显示悬停文本,而不仅仅是标题中的文本。即使列具有最小宽度并且标题的文本未以其全长显示/显示或根本未显示,也显示工具提示。见grid.thead.kendoTooltip({ filter: "th", content: function (e) { var target = e.target; return $(target).text(); } });


Here's the complete code from the example at jsbin.com, in case it needs to be reproduced in the future:

html:*

example

javascript的:

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <div id="grid"></div>  
</body>
</html>
另一答案

对于任何尝试使用Kendo UI MVC执行此操作的人,可以使用以下逻辑来实现:

在网格var grid = $("#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 }, height: 430, columns: [{ field: "OrderID", width: 250 }, { field: "ShipName", title: "Ship Name", width: 200 } ] }).data("kendoGrid"); grid.thead.kendoTooltip({ filter: "th", content: function (e) { var target = e.target; // element for which the tooltip is shown return $(target).text(); } }); 事件创建一个DataBound函数来处理数据绑定。

在该JavaScript函数中添加以下代码(对于我的示例,我将我的函数命名为JavaScript

createToolTip()

这将创建一个工具提示,以显示在网格标题上,工具提示位于标题上方。

以上是关于在Kendo UI网格列标题上添加悬停文本的主要内容,如果未能解决你的问题,请参考以下文章

Kendo UI 网格过滤器在引导模式中不起作用

Kendo UI 网格 URL 列

MVC 中的 KENDO UI 网格:有没有办法在某些列上隐藏过滤器?

Kendo UI 网格复选框列

在 kendo-ui 网格中显示/隐藏列后,有啥方法可以自动调整网格列宽?

如何以编程方式设置 Kendo UI 网格列宽