如何自定义工具提示，例如在 Kendo UI MVC 的网格单元工具提示中包含一些按钮？

Question

在单元格的工具提示中，我想添加一些按钮或菜单，例如打开按钮。当我将鼠标悬停在单元格上方时，工具提示显示按钮。当我单击按钮时，它将打开一个窗口。剑道网格能做到吗？

Answer 1

以下是您将如何使用 JS 进行操作；您需要做的就是使用适当的 MVC 包装器（Html.Kendo().Grid()、@(Html.Kendo().Tooltip() 和 Html.Kendo().Window()（尽管如果您想使用 jQuery click 事件，您可能需要对窗口使用纯 JS））：

网格：

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [{
        field: "Id",
        title: "Id",
        filterable: false
    }, {
        field: "StatusText",
        title: "String value"
    }, {
        field: "ToolTip",
        title: "Tool tip column",
        template: "<span class='tooltip'>#= data.ToolTip #</span>"
    }]
}).data("kendoGrid");

工具提示：

var currentDataItem;
var toolTip = $('#grid').kendoTooltip({
    filter: ".tooltip",
    content: function (e) {
        var row = $(e.target).closest("tr");
        currentDataItem = grid.dataItem(row);
        return "<div>Hi, this is a tool tip for id " + currentDataItem.Id + "! <br/> <button class='open'>Open window</button></div>";
    }
}).data("kendoTooltip");

窗口：

$(document).on("click", ".open", function () {
    var currentContent = currentDataItem.get("StatusText");
    $("<div>Current status: " + currentContent + "</div>").kendoWindow({
        modal: true
    }).getKendoWindow().center().open();
});

(demo)