web-dev-qa-db-ja.com

剣道UI：ツールチップがグリッドセルに表示されないようにする条件付き

剣道のツールチップをグリッドセルに表示して、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」では、コンテンツを表示するためにajax呼び出しに渡される属性「name」がないため、ツールチップを閉じるか非表示にします。私は次のすべてを試しました：

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

これらのどれも機能しません！破棄が最も近いですが、再度必要になったときにツールチップを再作成できません。何かアドバイス？

jquerykendo-uikendo-gridkendo-asp.net-mvckendo-tooltip
11
loxdog

ツールチップは、これを困難にする方法で実装されています。 setTimeoutにラップされたthis.hide()を呼び出すこともできますが、ちらつき効果があります。したがって、おそらくこれに対して独自のソリューションを展開する必要があります。始めるためのアイデアは次のとおりです。

ツールチップが表示される前にトリガーされる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");

（ デモ ）

16
Lars Höppner

私はちょうどこれに出くわし、非常にうまく機能する解決策を見つけました。 contentイベントは、showイベントが発生する前に実際に呼び出されるため、beforeShowイベントのように機能します。それを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 "";
    }
});
12
TheMiddleMan

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の応答を待っている場合は、呼び出しが完了したときにツールチップを作成するだけです。

2
KthProg

私の投稿が遅すぎないことを願っていますが、私たちのほとんどを助けてくれるでしょう。これは、ツールチップテキストを検証し、以下のようにツールチップを表示または非表示にできる表示イベントと非表示イベントで実現できます。

  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");
1
Arjun V

これらの答えのほとんどは、剣道の最新バージョンではあまり良くありません。彼らはそれを簡単にしました。

まず、属性をチェックするようにフィルターを設定します。

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

次のようなものを検討してください

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');
0
Nick Skriloff