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

OnaBai · Accepted Answer · 2014-04-25T11:40:26.763

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/

edited Apr 25 '14 at 11:40

answered Apr 25 '14 at 05:55

OnaBai

40,767
6
96
125

Thanks! It works for the demo, but realized I'm having problems with my own datasource. Had to change it to `if (Territories[i].Photo != null)`, but it doesn't display the correct image even if the field is not null. – nouptime Apr 25 '14 at 08:07
Right! you should not be asking for `'null'` but `null`. You might even consider checking for `if (Territories[i].Photo) ...` then it also covers if it is `undefined`. – OnaBai Apr 25 '14 at 08:10
What does it mean _"it doesn't display the correct image even if the field is not null"_? Are you providing the correct image path? – OnaBai Apr 25 '14 at 08:29
I'm calling the image name and path from the database via JSON. The image associated with the record does not show up. Instead the placeholder image appears, even if the Photo field has already been populated. – nouptime Apr 25 '14 at 08:32
Could you update JSBin example with an example of the actual JSON information received from the server? I don't mind if the image shows as a broken link, just want to check if the URL is correctly generated. – OnaBai Apr 25 '14 at 08:41
Okay, managed to replicate the issue in the sample. Check it out at http://jsbin.com/iJunOsa/36/edit – nouptime Apr 25 '14 at 08:55
What is the purpose of `if(i+1 === Territories.length)`? I cannot understand it. Also I see that as it is now, you cannot know which image to show. Having more than one entry per Territory, you don't know which image you should display in the tooltip. – OnaBai Apr 25 '14 at 10:18
I get your point. That bit of code is to display an array of Territories, and each Territory has its own image. While the list of Territories shows up, the image doesn't. – nouptime Apr 25 '14 at 10:35
You are doing it too complex! Check this: http://jsbin.com/iJunOsa/39/. Works as you expect? If so, I comment what you need to do – OnaBai Apr 25 '14 at 10:36
See the full explanation of the proposed solution in the **EDIT** of the answer – OnaBai Apr 25 '14 at 11:40
Thank you for the detailed explanation, now I understand what the issue is. Very kind of you to also investigate and find out the exact problem. Much appreciated, have a nice day! – nouptime Apr 28 '14 at 01:04

Kendo UI - Displaying images in a tooltip

1 Answers1