11

我正在尝试在网格单元格上显示剑道工具提示，从 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 是最接近的，但是当我再次需要它时，我无法重新创建工具提示。有什么建议吗？

4

6 回答 6

17

工具提示的实现方式使这变得困难。您可以调用this.hide()Wrapped in a 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");

（演示）

于 2014-04-25T17:43:53.193 回答
11

我刚刚遇到了这个问题，并找到了一个非常有效的解决方案。该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 "";
    }
});
于 2016-09-28T21:42:48.670 回答
2

如果您在 content 方法中抛出错误，这将阻止工具提示显示。

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 响应，那么只需在调用完成时创建工具提示。

于 2016-04-18T18:54:10.253 回答
2

我希望我的帖子不会太晚，但会帮助我们中的少数人。这可以通过显示和隐藏事件来实现，我们可以在其中验证工具提示文本并显示或隐藏工具提示，如下所示并为我工作。

  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");
于 2019-01-28T07:23:29.793 回答
0

在最新版本的剑道中，这些答案中的大多数都不是很好。他们让它变得更容易了。

首先，您将过滤器设置为检查属性：

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'
},
于 2017-08-14T14:42:15.667 回答
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');
于 2017-02-23T15:16:38.730 回答