Question

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

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）

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

1 个答案: