在AJAX数据之后，Kendo UI网格弹出不起作用

Question

我有一个kendo网格，其中包含通过AJAX填充的数据。

如果我取出AJAX一切都很好但是当我通过AJAX填充数据时，编辑按钮不会弹出弹出窗口。

网格本身看起来像这样：

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

正如您所看到的，我默认使用数据列表中的第一项填充它。

然后我有这个：

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

其中调用以下函数：

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

第一部分是填充页面的另一部分，然后进行AJAX调用以获取数据。成功时，它会填充网格。

这一切都有效。

但是，当我点击编辑时，它不会加载网格。它确实移动到页面的顶部，所以我知道它正在触发。

如果我通过AJAX停止预填充，它会加载模板，所以我知道模板没有错。

Answer 1

在vcase中，其他任何人都看到了这个，我通过将.Server更改为.Ajax来修复它。

所以它看起来像这样：

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