I have a kendo Grid with tooltip displaying the details in a kendo tooltip. The following template when used as an external template works. However, i am unsure if the template can be passed as an inline template.
Here is my code, External Template
<script id="javascriptTemplate" type="text/x-kendo-template">
<ul>
# for (var i = 0; i < data.applications.length; i++) { #
<li>#= data.applications[i].name #</li>
# } #
</ul>
</script>
and it is called in teh controller as,
$scope.toolTipOptions = {
filter: "td:nth-child(4)",
position: "right",
content: function(e) {
var grid = e.target.closest(".k-grid").getKendoGrid();
var dataItem = grid.dataItem(e.target.closest("tr"));
var template = kendo.template($("#javascriptTemplate").html());
return template(dataItem);
},
show: function(e) {
this.popup.element[0].style.width = "200px";
this.popup.element[0].style.left = "10px";
}
}
But when i try to pass an inline template , it complains that template is not a function. any pointers as to how i could pass an inline template in this case
$scope.toolTipOptions = {
filter: "td:nth-child(4)",
position: "right",
content: function(e) {
var grid = e.target.closest(".k-grid").getKendoGrid();
var dataItem = grid.dataItem(e.target.closest("tr"));
var template = "<ul>\# for (var i = 0; i < data.applications.length; i++) { #<li>#= data.applications[i].name #</li>\# } #</ul>"
return template(dataItem);
},
show: function(e) {
this.popup.element[0].style.width = "200px";
this.popup.element[0].style.left = "10px";
}
}
