Question

3

Kendo UI - Tooltip in a grid

rated 0 times [ 8] [ 5] / answers: 1 / hits: 24259 / 10 Years ago, tue, april 22, 2014, 12:00:00

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

I get a ReferenceError: Territories is not defined error in the console when I mouse over on 'Wilton'

Let's say I were to replace the contents of the storeTerritory template with plain-old HTML, then the tooltip appears:

<p>Wilton</p>

What could the issue be?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

michaelashelbieh

Add To Favorites

Follow

Total Points: 303

Total Questions: 139

Total Answers: 97

Location: Suriname

Member since Sun, Oct 17, 2021

3 Years ago

answered 10 Years ago aidan · Accepted Answer

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)