Kendo UI - Displaying images in a tooltip

Question

I have an issue with displaying images within a tooltip. Each Territory contains a Photo field. I'm trying to display a placeholder image if the Photo field is null.

Here's an idea of what I'm trying to achieve, tried it out but got errors. I'm pretty sure this template is syntactically incorrect:

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #for(var i = 0; i < Territories.length; i++){#
        #if (#=Photo# != 'null' && #=Photo# != '')  {#
            <img src="#=Territories[i].Photo#" alt="" />
        #} else{#
            <img src="https://cdn4.iconfinder.com/data/icons/website-kit-2/600/547756-Cross-128.png" alt="" />
        #}#
    #}#
</div>
</script>

Here's a demo with a working tooltip (without the snippet above):
http://jsbin.com/iJunOsa/25/edit

Answer 1

The problem is the if that you are enclosing Photo between #= and # but since the if is already surrounded by # you don't have to.

Next is that Photo is part of Territories elements, so (I think) you should be checking Territories[i].Photo for null and not just Photo.

The template should be:

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #for(var i = 0; i < Territories.length; i++){#
        #if (Territories[i].Photo != 'null' && Territories[i].Photo != '')  {#
            <img src="#=Territories[i].Photo#" alt="" />
        #} else{#
            <img src="https://cdn4.iconfinder.com/data/icons/website-kit-2/600/547756-Cross-128.png" alt="" />
        #}#
    #}#
</div>
</script>

Check it here: http://jsbin.com/iJunOsa/32/

EDIT Following the comment it show that having multiple elements in Territories field and since each of them should use a different Photo, there is one additional problem that is identifying the photo to show.

The easies way is adding some information about the photo in the template that generates Description text that when Tooltip is shown, knows exactly which Photo to show.

What I mean is changing the template that you use for generating the Description to:

<script type="text/x-kendo-template" id="territoriesTemplate">
#for(var i = 0; i < Territories.length; i++){#
    <a class="hasTooltip" data-photo="#= Territories[i].Photo #">#:Territories[i].TerritoryDescription#</a>&nbsp;<button class="info-btn">Info</button>
#}#
</script>

Where I added a data-photo element which value is the path to the photo then shown in the tooltip (i.e. add data-photo="#= Territories[i].Photo #" to the anchor a).

Then the code for generating the tooltip would be as simple as:

content: function (e) {
    // Get the template
    var template = kendo.template($("#storeTerritory").html());
    // Retrieve the photo from data and send it as argument to the template
    return template({ photo : $(e.target).data("photo")});
}

Finally, the new definition of the template is also pretty simple:

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #if (photo)  {#
        <img src="#=photo#" alt="" />
    #} else{#
        <img src="https://cdn4.iconfinder.com/data/icons/website-kit-2/600/547756-Cross-128.png" alt="" />
    #}#
</div>
</script>

That simply checks if photo is defined and if so uses it, otherwise uses default value.

See it in action here : http://jsbin.com/iJunOsa/40/