我正努力尝试在网格单元格上显示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;
}
}
});
在那个底部＆＃34;否则＆＃34;，我想关闭或隐藏工具提示，因为我没有属性＆＃34; name＆＃34;，这被传递到我的ajax调用显示内容。我已经尝试了以下所有方法：
$("#myGrid").data("kendoGrid").table.kendoTooltip.hide();
$("#myGrid").data("kendoTooltip").hide();
e.sender.popup.destroy();
e.sender.popup.hide();
e.sender.popup.close();
这些都不起作用！ Destroy是最接近的，但是当我再次需要时，我无法重新创建工具提示。有什么建议？
答案 0 :(得分：16)
工具提示的实施方式使这很困难。您可以在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）
答案 1 :(得分：8)
我刚刚遇到这个并找到了一个非常有效的解决方案。 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 "";
}
});
答案 2 :(得分：2)
如果在内容方法中引发错误，则会阻止工具提示显示。
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响应，那么只需在呼叫完成时创建工具提示。
答案 3 :(得分：1)
我希望我的帖子还不算太晚，但对我们中的几个人没有帮助。这可以通过显示和隐藏事件来实现，在这些事件中我们可以验证工具提示文本并按如下所示显示或隐藏工具提示，并为我工作。
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");
答案 4 :(得分：0)
考虑类似
的内容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');
答案 5 :(得分：0)
在最新版本的剑道中，大多数答案都不是很好。他们让它变得更容易。
首先，您需要设置过滤器以检查属性：
with t as (select clob001 from apex_collections where collection_name = 'ATOM')
SELECT title, summary,
json_value(content, '$.Context[0].WorkEmail') as work_email
FROM t,
XMLTable( XMLNamespaces(
'http://www.w3.org/2005/Atom' AS "ns0"
), 'ns0:feed/ns0:entry'
PASSING XMLTYPE.createXML(t.CLOB001)
COLUMNS title VARCHAR2(4000) path 'ns0:title' ,
summary VARCHAR2(240) path 'ns0:summary',
content VARCHAR2(4000) path 'ns0:content');
然后，在网格的模板中，您要声明要在工具提示中显示的列的属性：
ak-tooltip="k-filter: td[tooltip]; k-content.call: getTooltipDataTemplate($event);
k-width:auto; k-position: top;