Kendo UI grid popup not working after AJAX data

Question

I have a kendo grid which has data populated via AJAX.

If I take out the AJAX all is fine but when I populate the data via AJAX the edit button doesn't bring up the pop up.

The grid itself looks like this:

<div id="DefinedLevelsGridContainer">
@(Html.Kendo().Grid(Model.Where(x => x.OrgLevel == 0).First().DefinedFieldsList)
    .Name("DefinedlevelsGrid")
    .Columns(columns =>
    {
        columns.Bound(x => x.FieldName).Title("Name");
        columns.Bound(x => x.FieldTypeText).Title("Type");
        columns.Bound(x => x.isMandatory).Title("Mandatory");
        columns.Bound(x => x.DefaultValue).Title("Default Value");
        columns.Bound(x => x.UpdatedOn).Title("Updated");
        columns.Command(command => { command.Edit(); command.Destroy(); });
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_OrgDefinedFieldEdit"))
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
    .Server()
    .Model(model => model.Id(x => x.FieldId))
    .Update(update => update.Action("Update", "Home"))
    .Destroy(destroy => destroy.Action("Destroy", "Home"))
    )
)

As you can see I am populating it, by default, with the first item in a list of data.

I then have this:

$(window).load(function () {
    $(".LevelSelector:first").click();
});

Which calls the following function:

$(".LevelSelector").click(function () {
        var rootString = $(this).html();
        var splitString = rootString.split("-");
        var levelGuid = $(this).attr("LevelGuid").toString();

        $("#LevelEditName").text($.trim(splitString[0]));
        $("#LevelEditInput").val($.trim(splitString[1]));
        $("#CreatedOn").text($(this).attr("CreatedDate"))
        $("#CreatedBy").text($(this).attr("CreatedBy"))
        $("#UpdatedOn").text($(this).attr("UpdatedDate"))
        $("#SelectedLevelGuid").text(levelGuid)

        var Url = '@Url.Action("GetLevelFields", "OrganisationAJAX")' + '?LevelGuid=' + levelGuid;

        $.ajax({
            url: Url,
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            context: this,
            timeout: 60000,
            dataType: 'json',
            tryCount: 0,
            retryLimit: 3,
            success: function (data) {

                var grid = $("#DefinedlevelsGrid").data("kendoGrid");
                grid.dataSource.data(data);
            },
            error: function (httpRequest, textStatus, errorThrown) {
                $(".Message").text("Error: " + textStatus + " " + errorThrown);
            }
        });
    });

The first part is populating another part of the page and then it does an AJAX call to go and get the data. On success it populates the grid.

That all works.

But when I click on edit it doesn't load the grid. It does move to the top of the page so I know it is firing.

If I stop the pre population by AJAX it does load up the template so I know the template isn't at fault.

Answer 1

In vcase anyone else sees this, I fixed it by changing .Server to .Ajax.

So it would look like this:

@(Html.Kendo().Grid(Model.Where(x => x.OrgLevel == 0).First().DefinedFieldsList)
.Name("DefinedlevelsGrid")
.Columns(columns =>
{
    columns.Bound(x => x.FieldName).Title("Name");
    columns.Bound(x => x.FieldTypeText).Title("Type");
    columns.Bound(x => x.isMandatory).Title("Mandatory");
    columns.Bound(x => x.DefaultValue).Title("Default Value");
    columns.Bound(x => x.UpdatedOn).Title("Updated");
    columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_OrgDefinedFieldEdit"))
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax() //<------- Changed to .Ajax()
.Model(model => model.Id(x => x.FieldId))
.Update(update => update.Action("Update", "Home"))
.Destroy(destroy => destroy.Action("Destroy", "Home"))
)