Kendo UI-网格中的工具提示

debugcn 发表于 Dev

无时间

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

$("#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在控制台错误，当我鼠标移到“威尔顿”

假设我storeTerritory要用普通的HTML替换模板的内容，然后出现工具提示：

<p>Wilton</p>

可能是什么问题？

拉斯·霍普纳（LarsHöppner）

问题在于没有与工具提示相关联的模型。为了做您想做的事，您需要使用一个函数来创建内容：

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

（演示更新）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。