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

2 posts, 0 answers
  1. Gaurav
    Gaurav avatar
    20 posts
    Member since:
    Nov 2014

    Posted 25 Sep Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    1153 posts

    Posted 27 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top