How to custom tooltip such as contains some button in grid's cell tooltip in Kendo UI MVC?
-
21-12-2019 - |
Pergunta
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?
Solução
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)
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow