Как настроить всплывающую подсказку, например, кнопку в ячейке сетки в Kendo UI MVC?

Question

Во всплывающую подсказку я хочу добавить некоторую кнопку или меню, например, кнопку "Открыть". Когда я наведу указатель мыши над ячейкой, во всплывающей подсказке отображается кнопка. Когда я нажимаю кнопку, открывается окно. Может ли сетка Кендо сделать это?

Answer 1

Вот как бы вы сделали это с JS; все, что вам нужно сделать, это использовать соответствующие обертки MVC (Html.Kendo().Grid(), @(Html.Kendo().Tooltip() а также Html.Kendo().Window() (хотя вам может понадобиться использовать обычный JS для окна, если вы хотите использовать событие щелчка jQuery)):

Сетка:

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

( демо)