javascript Kendo UI - 网格中的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23217268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI - Tooltip in a grid
提问by nouptime
I'm trying to create a tooltip for my grid like this:
我正在尝试为我的网格创建一个工具提示，如下所示：
$("#grid").kendoTooltip({
autoHide: true,
showOn: "mouseenter",
width:125,
height:125,
position: "right",
filter: ".k-grid-content a.hasTooltip",
content: kendo.template($("#storeTerritory").html())
});
The template definition:
模板定义：
<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>
I've setup a sample here:
http://jsbin.com/iJunOsa/21/edit
我在这里设置了一个示例：http:
//jsbin.com/iJunOsa/21/edit
I get a ReferenceError: Territories is not definederror in the console when I mouse over on 'Wilton'
我得到了ReferenceError: Territories is not defined在控制台错误，当我鼠标移到“威尔顿”
Let's say I were to replace the contents of the storeTerritorytemplate with plain-old HTML, then the tooltip appears:
假设我storeTerritory要用普通的 HTML替换模板的内容，然后出现工具提示：
<p>Wilton</p>
What could the issue be?
可能是什么问题？
回答by Lars H?ppner
The problem is that there is no model associated with the tooltip; in order to do what you want, you need to create the content using a function:
问题是没有与工具提示关联的模型；为了做你想做的事，你需要使用一个函数来创建内容：
$("#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);
}
});
(updated demo)
（更新演示）
回答by OnaBai
The issue is that in the context of the template (when running it):
问题是在模板的上下文中（运行时）：
<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>
there is nothing as Territoriesor as iso it fails.
没有什么作为Territories或i因此它失败。
回答by tom lee
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");
(Demo)
（演示）
