延迟后刷新剑道弹出控件答案

【问题标题】：Refresh kendo popup control after delay延迟后刷新剑道弹出控件
【发布时间】：2018-08-21 09:22:04
【问题描述】：

我有一个带有自定义弹出编辑器的 KendoGrid。 [我正在使用 Kendo UI for ASP.NET MVC 和 jQuery/Ajax 的组合。]

使用 Ajax 检索所需的外部数据后，如何在弹出窗口中刷新或重新加载文本框？ 已编辑：我的错误，它是编辑器而不是文本框。

我在网格中的编辑按钮上附加了一个点击事件：

$(function () {
    $("#publicationsGrid").on("click", ".k-grid-edit", function (e) {

        // get the index of the clicked button within the grid
        var index = $(this).index("#publicationsGrid .k-grid-edit");
        // retrieve the compendium id
        var compendiumId = compendiumIds[index];
        if (compendiumId) {
            getCompendiumData(index, compendiumId);
        }
    });
});

然后调用外部 web-api 来检索需要编辑的文件内容，并将此数据分配给我的视图模型的属性：

function getCompendiumData(index, compendiumFileId) {

    if (!compendiumFileId)
        return;     // no compendium file to load
    $.ajax({
        type: "GET",
        beforeSend: function (request) {
            request.setRequestHeader("Authorization", "Bearer " + token);
        },
        url: 'http://some/api/file' + compendiumFileId,
        success: function (response) {
            var grid = $("#publicationsGrid").data("kendoGrid");
            var gridData = grid.dataSource.data();
            gridData[index].CompendiumHTML = response;
            console.log(gridData[index].CompendiumHTML);
            // TODO: change this, it should be possible to 'refresh' the textbox
            var popupTextbox = $("#compendiumPopup #CompendiumHTML").data("kendoTextBox");
            popupTextbox.value(gridData[index].CompendiumHTML);
        },
        error: function (response, status, error) {
            console.log("error details\nstatus: " + status + "error: " + error);
        },
    });
}

到完成时，弹出窗口已经可见并且不会自动刷新。我添加了一些代码来尝试手动设置文本框的.value，但它不起作用，不应该这样做。

点击一个按钮两次可以正常工作，因为现在可以显示数据，但这不是一个可接受的解决方案。

（我在 Ajax 调用中尝试了async: false，但这不会阻止弹出窗口的显示。）

根据要求，这里是网格代码（我还没有配置任何数据更新）：

@(Html.Kendo().Grid<DocumentUpdate>(Model)
    .Name("publicationsGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.DocumentUpdateId).Hidden(false);
        columns.Bound(c => c.Title);
        columns.Bound(c => c.PublicationTime).Title("Publication Time");
        columns.Bound(c => c.Type);
        columns.Command(command => { command.Edit().Text(" "); });
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Compendium"))
    .DataSource(ds => ds
        .Ajax()
        .Model(model =>
        {
            model.Id(id => id.DocumentUpdateId);
            model.Field(data => data.DocumentUpdateId).Editable(false);
            model.Field(data => data.PublicationTime).Editable(false);
            model.Field(data => data.Type).Editable(false);
        })
        .Update(update => update.Action("SomeController", "SomeAction"))
        .Events(events => events
            .Error("editingErrors")
        )
    )
    .Events(events => events
        .DataBinding("onDataBinding")
        .DataBound("onDataBound")
    )
)

【问题讨论】：

您是否尝试将此函数指定为网格的edit 事件的一部分，然后您不需要将click 事件应用于网格编辑按钮。如果这是一个简单的字符串，为什么数据不是绑定到网格并从辅助 url 中提取的原始模型的一部分？
@DavidShorthose 谢谢，我会调查网格的编辑事件，但我是否仍然需要延迟显示弹出窗口直到 Ajax 数据可用的问题？有一个初始 api 调用来加载网格的数据，其中包括一些 XML 数据。然后我需要解析这个 XML 数据来提取一个 id 并再次调用一个 api 来获取基于这个 id 的文件。我宁愿在需要时获取文件数据，而不是在初始阶段尝试一次性获取所有文件（这将需要许多 api 调用）。
可以添加网格代码吗？我猜你有一个带有popup 可编辑模式或类似模式的网格，对吧？
@DontVoteMeDown 添加了网格代码，是的，使用 PopUp 编辑模式。

标签： kendo-ui kendo-asp.net-mvc

【解决方案1】：

等待一个更好的解决方案和更自然的方法来更新弹出控件以反映更改的模型/数据项，我可以使用 Ajax 请求的成功处理程序中的以下代码使其工作：

    var popupTextbox = $("#compendiumPopup #CompendiumHTML").data("kendoEditor");
    popupTextbox.value(gridData[index].CompendiumHTML);

[在上面的第一次尝试中，我错误地提到了kendoTextBox 而不是kendoEditor。]

【讨论】：