Kendo UI: Conditionally preventing a Tooltip from being displayed on a Grid cell
The tooltip is implemented in a way that makes this difficult. You could call this.hide()
wrapped in a setTimeout
, but it will have a flicker effect. So you'll probably have to roll your own solution for this. Here's an idea to get you started:
Create a beforeShow
pseudo-event which is triggered before the tooltip is shown (this could all be done in a more sophisticated fashion):
// customize the _show method to call options.beforeShow
// to allow preventing the tooltip from being shown..
kendo.ui.Tooltip.fn._show = function (show) {
return function (target) {
var e = {
sender: this,
target: target,
preventDefault: function () {
this.isDefaultPrevented = true;
}
};
if (typeof this.options.beforeShow === "function") {
this.options.beforeShow.call(this, e);
}
if (!e.isDefaultPrevented) {
// only show the tooltip if preventDefault() wasn't called..
show.call(this, target);
}
};
}(kendo.ui.Tooltip.fn._show);
Use it like this to conditionally prevent showing the tooltip:
var toolTip = $('#grid').kendoTooltip({
filter: ".tooltip",
beforeShow: function (e) {
if ($(e.target).data("name") === null) {
// don't show the tooltip if the name attribute contains null
e.preventDefault();
}
},
content: function (e) {
var row = $(e.target).closest("tr");
var dataItem = grid.dataItem(row);
return "<div>Hi, this is a tool tip for id " + dataItem.Id + "! </div>";
}
}).data("kendoTooltip");
(demo)
I just came across this and found a solution that works very well. The content
event can work like a beforeShow
event, because it is actually called before the show event is fired. If we treat it like a beforeShow
event we can do this
var grid = $("#myGrid").data("kendoGrid");
grid.table.kendoTooltip({
width: 300,
height: 200,
opacity: 0,
callout: true,
position: 'right',
animation:
{
close: {
effects: "fade:out"
},
open: {
effects: "fade:in",
duration: 1000
}
},
contentTemplateId: "tooltipTemplate",
filter: "td",
show: function (e) {
},
content: function (e) {
var target = e.target,
currentTarget = target;
// hide popup as default action
e.sender.popup.element.css("visibility", "hidden");
if ($(currentTarget[0]).attr("name") !== undefined) {
e.sender.popup.element.css("visibility", "visible");
//Do ajax call, show tool tip
$.getJSON("SomeUrl").then(function(response) {
$(target).text(response);
});
return "Loading...";
}
return "";
}
});