Question

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

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

我已将click事件附加到网格中的编辑按钮上：

$(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来检索需要编辑的文件内容，并将此数据分配给我的viewmodel属性：

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")
    )
)

Answer 1

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

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

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

延迟后刷新剑道弹出控件

1 个答案: