jquery - How to custom tooltip such as contains some button in grid's cell tooltip in Kendo UI MVC?

Question

In the cell's tooltip,I want to add some button or menu,such as open button.When I hover the mouse above the cell,the tooltip shows the button.When I click the button,it will open a window. Can Kendo grid can do that?

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();
});

（演示）