12

我正在尝试将自定义悬停文本（如工具提示）添加到 KendoUI 网格中的列标题。文本应该特定于每一列，最好不要显示在标题行之外的任何内容上。Grid 对象没有工具提示选项，但我不确定是否有办法使用 CSS 或其行模板配置来实现。

有兴趣了解以前是否有人这样做过，如果是这样，如何做，或者是否不可能。

谢谢。

4

3 回答 3

11

如果工具提示的内容是静态的，那么您可以使用columns.headerTemplate然后将工具提示添加到标题。

示例 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"
});
于 2013-10-29T00:36:02.173 回答
6

如果要在每个列标题上定义工具提示，可以在网格 thead 元素上定义kendoTooltip ，如下所示：

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
        var target = e.target;
        return $(target).text();
    }
});

当您将标题悬停在任何地方时，这会显示悬停文本，而不仅仅是标题中的文本。即使列具有最小宽度并且标题的文本未以其全长显示/显示或根本未显示，也会显示工具提示。见例子。

以下是 jsbin.com 上示例的完整代码，以防将来需要复制：

HTML:*

<!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>

JavaScript：

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();
    }
});
于 2014-11-26T22:46:17.120 回答
1

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

在网格DataBound事件上创建一个JavaScript函数来处理数据绑定。

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

function createToolTip() {

    $("tr > th").kendoTooltip({
        position: "top"
    });
}

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

于 2019-03-14T13:11:12.720 回答