Kendo UI: Conditionally preventing a Tooltip from being displayed on a Grid cell

Question

I'm working on trying to display a Kendo tool tip on a grid cell, getting the content from an ajax call. My tooltip declaration looks like the below:

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

In that bottom "else", I want to close or hide the tooltip since I don't have the attribute "name", which is passed into my ajax call to show the content. I've tried all of the following:

$("#myGrid").data("kendoGrid").table.kendoTooltip.hide();
$("#myGrid").data("kendoTooltip").hide();
e.sender.popup.destroy();
e.sender.popup.hide();
e.sender.popup.close();

None of these work! Destroy is the closest, but I can't recreate the tool tip when I need it again. Any advice?

Answer 1

The tooltip is implemented in a way that makes this difficult. You could call this.hide() wrapped in a setTimeout, but it will have a flicker effect. So you'll probably have to roll your own solution for this. Here's an idea to get you started:

Create a beforeShow pseudo-event which is triggered before the tooltip is shown (this could all be done in a more sophisticated fashion):

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

Use it like this to conditionally prevent showing the tooltip:

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)

Answer 2

I just came across this and found a solution that works very well. The content event can work like a beforeShow event, because it is actually called before the show event is fired. If we treat it like a beforeShow event we can do this

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

Answer 3

I hope my post is not too late, but will help few of us. This can be achieved with show and hide events where we can validate the Tooltip text and show or hide the Tooltip as below and works for me.

  show: function(e){
        if(this.content.text() !=""){
            $('[role="tooltip"]').css("visibility", "visible");
        }
    },
    hide: function(){
        $('[role="tooltip"]').css("visibility", "hidden");
    },

Full code :

 $("#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");

Answer 4

If you throw an error in the content method, this will prevent the tooltip ever showing.

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

If you're waiting for an ajax response though, then just create the tooltip when the call is completed.

Answer 5

consider something like

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

Answer 6

Most of these answers aren't very good in the most recent version of Kendo. They've made it easier.

First, you'd set your filter to check for an attribute:

ak-tooltip="k-filter: td[tooltip]; k-content.call: getTooltipDataTemplate($event); 
k-width:auto; k-position: top;

Then, in the template for your grid, you'd declare the attribute for the columns that you want the tooltip to display on:

{
    title: 'Column A',
    field: 'ColumnA',
    sortable: {
        initialDirection: "asc"
    },
    hidden: true
},
{
    title: 'ShowToolTip',
    field: 'ShowToolTip',
    width: 500,
    attributes: {
      tooltip: true
    }
},
{
    title: 'NoToolTip',
    field: 'NoToolTip'
},