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

Posted 2023-05-07

【中文标题】Kendo UI：有条件地阻止工具提示显示在网格单元格上

【英文标题】：Kendo UI: Conditionally preventing a Tooltip from being displayed on a Grid cell

【发布时间】：2014-06-11 10:24:45

【问题描述】：

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

【问题讨论】：

问题标题与您在内容方法中尝试执行的操作之间似乎存在一些差异；我建议将标题更改为“有条件地阻止显示 Kendo UI 工具提示”

我觉得这个标题比较好，我会根据你的建议调整一下

【参考方案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)

【讨论】：

再一次，你已经成功了 Lars。对此问题没有更优雅的解决方案有点失望，但您的解决方案非常好

这个答案很好，但我有一个问题：如果您忘记在 kendoTooltip 配置中指定“beforeShow”功能，会有问题吗？如果没有提供 'beforeShow'，您似乎正在用一个新的函数替换 _show 函数......也就是说，如果 typeof this.options.beforeShow = 你不想只调用 show.call(this, target) == “函数”是假的？

@snuggles 你是对的，当然 - 谢谢你的提示。我更新了代码。

Lars，你可以再添加一行代码让 Kendo 识别这个新事件：kendo.ui.Tooltip.fn.events.push('beforeShow');这可以实现角度整合 ()

当我的答案如此简单时，这被接受了，这让我很生气

【参考方案2】：

我刚刚遇到了这个问题，并找到了一个非常有效的解决方案。 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 "";
    
);

【讨论】：

很好的答案 - 完成工作，没有不必要的闪烁，也没有过于复杂

大声笑，这与我想发布的解决方案相似，但似乎没有任何兴趣。

【参考方案3】：

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

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

【讨论】：

如果开发人员控制台打开，这会破坏 javascript 调试器，并且会向日志发送错误信息。 Lar 的解决方案并不理想，但这些东西对我们中的一些人来说不是一个选择。

我有一个更好的解决方案，它涉及预先设置一些 css 规则，如果它有内容，你将其删除，但除非有人要求，否则我认为花时间是没有意义的。

您的回答包含错误。您需要在don\'t 中转义您的引号或用双引号将错误字符串括起来

谢谢你是对的！我喜欢用单引号，没想到

不客气，不希望你投反对票:)

【参考方案4】：

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

  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");

【讨论】：

我试过了，this 上下文只是我的窗口。

【参考方案5】：

考虑类似

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');

【参考方案6】：

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

首先，您需要设置过滤器来检查属性：

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'
,