Пользовательский интерфейс Kendo: Условное запрещение отображения всплывающей подсказки в ячейке сетки

Я работаю над попыткой отобразить подсказку инструмента 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;
            }
        }
    });

В этом нижнем "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 является самым близким, но я не могу воссоздать подсказку инструмента, когда мне это нужно. Любой совет?

Ответ 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");

(демо)

Ответ 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, тогда просто создайте подсказку, когда вызов будет завершен.

Ответ 4

рассмотрим что-то вроде

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

Большинство из этих ответов не очень хороши в самой последней версии Kendo. Они упростили работу.

Сначала вы установите фильтр для проверки атрибута:

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

Ответ 6

Я надеюсь, что мой пост не слишком поздно, но поможет немногим из нас. Этого можно достичь с помощью событий show и hide, где мы можем проверить текст подсказки и показать или скрыть подсказку, как показано ниже, и это работает для меня.

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