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

Question

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

Answer 1

这是使用 JS 的方法；您需要做的就是使用适当的 MVC 包装器(Html.Kendo().Grid()、@(Html.Kendo().Tooltip() 和 >Html.Kendo().Window()(尽管如果您想使用 jQuery 单击事件，您可能需要对窗口使用纯 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 )