Dynamic Tooltip with links in particular Grid column

[Nirav]

Hi,

I want to display customised tooltip on hover in one of the column in grid.
My requirement is:
I have Person's grid where I am displaying first name, last name, birth date details. There is an another column say "Go To". When user mousehover on that particular column's cells, I want to display tooltip template. In which there will be few links (addresses, emails, phones etc.) with person id.
Based on the person's Id the link in tooltip should be constructed, So clicking on it navigates to person details.

How to do this? I have searched on net but couldn't find exact or nearer example.
Need help.

Thanks,
Nirav

[Vladimir Iliev]

Hi Nirav,

 
Basically you can achieve the desired behavior using the Tooltip show event to get the current row underlying dataItem using Grid API. Then you can pass the dataItem to given template and load the generated template into the Tooltip content. Please check the example below:

<script type="text/javascript">
    $(function () {
        var template = kendo.template($("#toolTipTemplate").html());
        //initialize tooltip to grid tbody with filter cells with given CSS class
         tooltip = $("#grid tbody").kendoTooltip({
             filter: "td.myClass",
             width: 120,
             show: function (e) {
                //get current target row
                var currentRow = this.target().closest("tr");
                var grid = $("#grid").data("kendoGrid");
                //get current row dataItem
                var dataItem = grid.dataItem(currentRow);

                //pass the dataItem to the template
                var generatedTemplate = template(dataItem);
                //set the generated template to the content of the tooltip
                this.content.html(generatedTemplate);
            },
        }).data("kendoTooltip");
    })
</script>

<script id="toolTipTemplate" type="text/x-kendo-template">
    <span>Units currently in stock: #=UnitsInStock#</span>
</script>

Kind Regards,
Vladimir Iliev
the Telerik team

[Blake]

Hi Vladimir,

 I know this is pretty old, but could you post an example project of this functionality?

 Thanks,

Blake

[Vladimir Iliev]

Hello Blake,

Please check the example below:

• http://dojo.telerik.com/ogECO

Regards,
Vladimir Iliev
Telerik

[Blake]

Thank you Vladimir. This was great.