Refresh kendo popup control after delay

Question

I have a KendoGrid with a custom popup editor. [I'm using a combination of Kendo UI for ASP.NET MVC and jQuery/Ajax.]

How can I refresh or reload a textbox in the popup after I have used Ajax to retrieve the external data I need? Edited: My mistake, it is an Editor rather than a TextBox.

I have attached a click event to the edit buttons in the grid:

$(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);
        }
    });
});

Which then calls an external web-api to retrieve the file content that needs to be edited, and assigns this data to a property of my 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);
        },
    });
}

By the time this completes the popup is already visible and does not refresh automatically. I added some code to attempt to manually set the .value of the textbox, but it is not working and should not be necessary to do this.

Clicking a button twice will work fine because the data is now available to display, but this is not an acceptable solution.

(I tried async: false on the Ajax call but this does not prevent the popup from displaying.)

As requested, here is the grid code (I haven't configured any updating of the data as yet):

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

have you tried assigning this function as part of the edit event for the grid then you don't need to apply a click event to the grid edit button. If this is a simple string how come the data is not part of the original model that is bound to the grid and is pulled from a secondary url? — David Shorthose
@DavidShorthose Thank you, I will look into the edit event of the grid, but would I not still have the same issue of needing to delay the display of the popup until the Ajax data is available? There is an initial api call to load the data for the grid, which includes some XML data. I need to then parse this XML data to extract an id and make another call to an api to get the file based on this id. I'd rather get the file data when needed rather than trying to get all of the files in one go at the initial stage (which would require many api calls). — Andy G
Can you add the grid code ? I'm guessing that you have a grid with popup editable mode or something like that, right? — DontVoteMeDown
@DontVoteMeDown Added the grid code and, yes, using PopUp edit mode. — Andy G

Andy G Andy G · Accepted Answer · 2018-08-21T13:31:18

Pending a better solution and more natural way to get the popup controls to update to reflect the changed model/ data-item, I can get this to work using the following code in the success handler of the Ajax request:

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

[On my first attempt above I mistakenly referred to kendoTextBox rather than kendoEditor.]

Refresh kendo popup control after delay

1 Answers