我正在努力在网格单元格上显示Kendo工具提示,从ajax调用获取内容.我的工具提示声明如下所示：
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;
var message = "Loading...";
if ($(currentTarget[0]).attr("name") !== undefined) {
//Do ajax call,show tool tip
}
else {
//CLOSE THE TOOTLIP
return false;
}
}
});
在底部的“else”中,我想关闭或隐藏工具提示,因为我没有属性“name”,这被传递到我的ajax调用来显示内容.我已经尝试了以下所有内容：
$("#myGrid").data("kendoGrid").table.kendoTooltip.hide();
$("#myGrid").data("kendoTooltip").hide();
e.sender.popup.destroy();
e.sender.popup.hide();
e.sender.popup.close();
这些都不行！毁灭是最接近的,但是当我需要它时,我不能重新创建工具提示.任何建议？
解决方法
工具提示的实现方式使得这很困难.你可以调用this.hide()包装在一个setTimeout中,但它会有一个闪烁效果.所以你可能必须为自己的解决方案.这是一个让你开始的想法：
创建一个在显示工具提示之前触发的beforeShow伪事件(这可以全部以更复杂的方式完成)：
// 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);
像这样使用它有条件地阻止显示工具提示：
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)