我正在尝试在网格单元上显示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();
这些都不管用！销毁是最接近的，但当我再次需要它时，我无法重新创建工具提示。有什么建议吗？
工具提示的实现方式使这一点变得困难。您可以调用封装在setTimeout中的this.hide()，但它将具有闪烁效果。因此，您可能需要推出自己的解决方案。这里有一个让你开始的想法：
创建一个在工具提示显示之前触发的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");
（演示）
我刚刚遇到了这个问题，并找到了一个运行良好的解决方案。content事件可以像beforeShow事件一样工作，因为它实际上是在启动show事件之前调用的。如果我们将其视为beforeShow事件，我们可以进行
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 "";
}
});
我希望我的帖子不会太晚，但会对我们中的一些人有所帮助。这可以通过显示和隐藏事件来实现，在这些事件中，我们可以验证工具提示文本并显示或隐藏工具提示，如下所示，对我有效。
show: function(e){
if(this.content.text() !=""){
$('[role="tooltip"]').css("visibility", "visible");
}
},
hide: function(){
$('[role="tooltip"]').css("visibility", "hidden");
},
完整代码：
$("#GridId").kendoTooltip({
filter: "td:nth-child(1)", //this filter selects the second column's cells
position: "right",
autoHide: false,
show: function(e){
if(this.content.text() !=""){
$('[role="tooltip"]').css("visibility", "visible");
}
},
hide: function(){
$('[role="tooltip"]').css("visibility", "hidden");
},
content: function(e){
var dataItem = $("#GridId").data("kendoTreeList").dataItem(e.target.closest("tr"));
var content = dataItem.ToolTip;
if (content!=null) {
return content;
}
else {
return "";
}
}
}).data("kendoTooltip");
如果在内容方法中抛出错误，这将阻止工具提示显示。
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 message = 'Loading...';
if (!$(e.target).attr('name')) {
throw 'No name yet, don't show tooltip!';
}
//Do ajax call, show tool tip
}
});
如果您正在等待ajax响应，那么只需在调用完成时创建工具提示即可。
考虑类似的东西
jQuery('#searchCoursesMainGrid').kendoTooltip({
//The ">" which is the expand arrow is in its own table column. So add one more column
//":not(:empty) is a css3 selector that checks if there is a value inside the td element"
filter: 'td:nth-child(6):not(:empty)', //this filter selects the webNote column cells that are not empty
position: 'right',
autoHide: false,
width: 500,
content: function (e) {
//.data('kendoGrid') is a reserved word by Kendo
//http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields
var dataItem = jQuery('#searchCoursesMainGrid').data('kendoGrid').dataItem(e.target.closest('tr'));
var content = dataItem.webNote;
return content;
}
}).data('kendoTooltip');
在最新版本的剑道中，大多数答案都不是很好。他们让事情变得更容易了。
首先，你可以设置你的过滤器来检查一个属性：
ak-tooltip="k-filter: td[tooltip]; k-content.call: getTooltipDataTemplate($event);
k-width:auto; k-position: top;
然后，在网格的模板中，您将声明希望工具提示显示的列的属性：
{
title: 'Column A',
field: 'ColumnA',
sortable: {
initialDirection: "asc"
},
hidden: true
},
{
title: 'ShowToolTip',
field: 'ShowToolTip',
width: 500,
attributes: {
tooltip: true
}
},
{
title: 'NoToolTip',
field: 'NoToolTip'
},