5

次のようなグリッドのツールチップを作成しようとしています:

$("#grid").kendoTooltip({
    autoHide: true,
    showOn: "mouseenter",
    width:125,
    height:125,
    position: "right",
    filter: ".k-grid-content a.hasTooltip",
    content: kendo.template($("#storeTerritory").html())
});

テンプレート定義:

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #for(var i = 0; i < Territories.length; i++){#
        #if (Territories != 'null' && Territories != '')  {#
            <p>#=Territories[i].TerritoryDescription#</p>
        #} else{#
            <p>Information not available</p>
      #}#
    #}#
</div>
</script>

ここにサンプルをセットアップしました:
http://jsbin.com/iJunOsa/21/edit

ReferenceError: Territories is not defined「Wilton」にマウスを合わせると、コンソールにエラーが表示されます

storeTerritoryテンプレートのコンテンツをプレーンな HTMLに置き換えると、ツールチップが表示されます。

<p>Wilton</p>

問題は何ですか？

4

3 に答える 3

6

問題は、ツールチップに関連付けられたモデルがないことです。必要なことを行うには、関数を使用してコンテンツを作成する必要があります。

$("#grid").kendoTooltip({
    autoHide: true,
    showOn: "mouseenter",
    width: 125,
    height: 125,
    position: "right",
    filter: ".k-grid-content a.hasTooltip",
    content: function (e) {
        var row = $(e.target).closest("tr");
        var dataItem = $("#grid").data("kendoGrid").dataItem(row);

        var template = kendo.template($("#storeTerritory").html());
        return template(dataItem);
    }
});

(更新されたデモ)

于 2014-04-23T01:48:53.233 に答える
0

問題は、テンプレートのコンテキスト (実行時) にあります。

<script type="text/x-kendo-template" id="storeTerritory">
    <div class="tooltipcontent">
        #if (Territories != 'null' && Territories != '')  {#
            <p>#=Territories[i].TerritoryDescription#</p>
        #} else{#
            <p>Information not available</p>
        #}#
    </div>
</script>

それが失敗するようなものTerritoriesは何もありません。i

于 2014-04-22T11:58:18.617 に答える