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

Here's how you would do it with JS; all you need to do is use the appropriate MVC wrappers (Html.Kendo().Grid(), @(Html.Kendo().Tooltip() and Html.Kendo().Window() (although you may need to use plain JS for the window if you want to use the jQuery click event)):

Grid:

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");

Tooltip:

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");

Window:

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

(demo)