Javascript 剑道UI-网格中的工具提示

我正在尝试为我的网格创建工具提示，如下所示：

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

---

问题可能是什么？

问题是在模板的上下文中（运行模板时）：

#如果（地区！='null'&&Territions！=''）{#
#=地区[i].地区说明#

#}否则{#
信息不可用

#}#

---

没有任何东西像

区域

或

i

那样失败。

问题是没有与工具提示关联的模型；为了实现所需功能，您需要使用以下函数创建内容：

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

（更新）

---

（）

我的错，模板代码的某些部分丢失了。我已更新示例，但问题仍然存在。很抱歉打扰您，我在工具提示中显示图像时遇到问题。如果您能看一看编辑后的问题，我们将不胜感激。请不要对更改其含义的问题进行编辑；相反，问一个新问题。

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

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

 grid = $("#grid").kendoGrid({
      dataSource: dataSource,
      scrollable: true,
      filterable: true,
      toolbar: ["create"],
      columns: [
        { field: "ID", width: "50px" },
        { field: "Text", width: "200px", attributes: {
          style: 'white-space: nowrap '
        }  }],
      editable: "incell"
    }).data("kendoGrid");

    $("#grid").kendoTooltip({
      filter: "td:nth-child(2)", //this filter selects the second column's cells
      position: "right",
      content: function(e){
        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = dataItem.Text;
        return content;
      }
    }).data("kendoTooltip");