Kendo UI：有条件地阻止工具提示显示在网格单元格上

Question

我正在尝试在网格单元格上显示剑道工具提示，从 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();

这些都不起作用！ Destroy 是最接近的，但是当我再次需要它时，我无法重新创建工具提示。有什么建议吗？

Answer 1

工具提示的实现方式使这变得困难。您可以调用 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)