How to show dynamic kendotooltip using ajax request inside kendogrid column.

[Gaurav]

Want to show dyanmic kendotooltip (may be another view - lots of content) on image hover inside kendogrid

ex:

I am adding and icon here and want to show the tooltip

info.Bound(e => e.Id).Width(50).ClientTemplate("<img id='#= Id #' src='../Images/commandView.png' /><div id='TooltipContentDiv'></div>");

I am not sure but is this something I am trying but not working:

    $("#AjaxGrid").kendoTooltip({
        //filter: ".tooltipContent",
        filter: "td:nth-child(3)",
        width: "auto",
        position: "top",
        showOn: "click",
        autoHide: false,
        content: function (e) {
            var row = $(e.target).closest("tr");
            var dataItem = $('#AjaxGrid').data('kendoGrid').dataItem(row);
            Id = dataItem.Id
            $('#TooltipContentDiv').html("");
            $.ajax({
                url: "@Url.Action("GetToolTip1", "Tools")",
                data: { "Id": Id },
            cache: false,
            /async: true,
            success: function (result) {
                alert('yes');
                $('#TooltipContentDiv').html(result);
            },
            error: function () { alert('no');}
        });
    }
    }).data("kendoTooltip");

 

Any help is appreciated.

If there is full working example that will be great.

I might be on wrong path but please point me what is the easiet way to do whatever I want.

[Stefan]

Hello, Gaurav,

If the content has to be taken from an Ajax call I can suggest in the success callback to set the HTML of the tooltip content to the result:

I made an example demonstrating this. The example is for the jQuery version on the Grid, but in an MVC application the implementation is the same:

https://dojo.telerik.com/ICeHaZ

I hope this is helpful.

Regards,
Stefan
Progress Telerik