Question

我正在使用KendoUI工具提示助手。目前，我正在执行以下操作以获取网格行上的一些工具提示信息：

$("#grid").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.Result 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;
                }
            });

我想摆脱同步ajax调用并使其异步。我看到了一些异步示例，其中服务器提供完整的html，但没有任何与服务器的JSON数据一起工作，然后通过kendo.template（）“编译”到客户端上的html。有什么建议怎么做？

Answer 1

将工具提示的内容设置为占位符值（例如＆＃34;中..＆＃34）
Listen for the "Show" event of the tooltip.
触发show事件时，从服务器启动JSON请求
在＆＃39;完成＆＃39;回调，执行模板，并用“完成”中的新html替换工具提示的内容。回调

$（＆＃34;＃ID＆＃34）的数据。（＆＃34; kendoTooltip＆＃34）popup.wrapper.find。（＆＃34; .K-工具提示内容＆＃34）。HTML （＆＃34; ........＆＃34）;

Answer 2

Telerik在这里帮助了我。并且，通常，它比猜测更容易..

    $("#grid").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.Result 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 + ")";
                        }
                        // set tooltip content here (done callback of the ajax req)
                        e.sender.content.html(tooltipHtml);
                    });
                }
            });

使用JSON和kendo.template的异步工具提示

2 个答案: