This is a migrated thread and some comments may be shown as answers.

Async tooltip using JSON and kendo.template

2 Answers 79 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Caecilia
Top achievements
Rank 1
Caecilia asked on 25 Aug 2017, 12:50 PM

Hi, currently I am doing the following to get some tooltip information on a grid row:

$("#gridPop").kendoTooltip({
                filter: 'td:nth-child(10)',
                content: function (e) {
                    var template = kendo.template($("#myToolTipTemplate").html());
                    var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
                    var tooltipHtml;
                    $.ajax({
                        url: DetailsURL + "/" + dataItem.Id,
                        async: false
                    }).done(function (data) {   // data is a JSON object from the server with details for the row
                        if (data.Success) {
                            data.Result = data.Result.replace(/null/g, "\"N/A\"");
                            tooltipHtml = template($.parseJSON(data.Result));
                        } else {
                            tooltipHtml = "Ooops!<br>Something went wrong (" + data.Result + ")";
                        }
                    });
                    return tooltipHtml;
                }
            });

 

I would like to get rid of the synchronous ajax call and make it asynchronous. I saw some asynchronous examples where the server delivers the full html, but nothing that works with JSON data from the server, that is then "compiled" via a kendo.template() to html on the client. Any suggestions how to do this?

2 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 29 Aug 2017, 10:36 AM

Hello Caecilia,

Using asynchronous calls should respect the way the content is injected to the tooltip. Using the content property as a function is a valid option, but as the content injected is the returned result of this function, makes it rather unsuitable for this scenario. In the showcased code, the tooltipHtml variable is returned before being altered by the asynchronous call. However, it is possible to make it work, you just need to inject the HTML you need to the content of the tooltip directly when the AJAX call is done. You can check out this example here: http://dojo.telerik.com/inewis/2

Regards,
Ianko
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.
0
Caecilia
Top achievements
Rank 1
answered on 01 Sep 2017, 09:38 AM

Thanks, Ianko! Life can be so easy when you know what you are doing...

Tags
ToolTip
Asked by
Caecilia
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Caecilia
Top achievements
Rank 1
Share this question
or