编辑器模板内 Kendo 网格的设置选项

Question

在我的一个网格 A 的编辑器模板中，我有另一个网格 B。我想根据 A.

中的当前 ID 设置此网格的 read 和 update 操作

我试过在编辑器模板中使用 Razor 代码，如下所示：

// details grid: B
.Read("action", "controller", new { @Model.Id })

但是 Id 始终为 null，可能是因为 Razor 是服务器端的。

所以我尝试在主页中设置网格，在主网格的 Edit 事件中。

function EditHandler(e) {
    if (e.model.isNew())
        return;
    var detailGrid = e.container.find("#details").data('kendoGrid');
    detailGrid.dataSource.options.transport.read.url = "@Url.Action("", "")".concat('/', e.model.Id);
    detailGrid.dataSource.options.transport.update.url = "@Url.Action("", "")".concat("/", e.model.Name);
}

这也不行。编辑器模板中 Grid 的定义将覆盖这些属性。

这是主网格：

 @(Html.Kendo().Grid<A>()
.Name("A")
.Columns(columns =>
{
    columns.Bound(x => x.Id).Hidden();
    columns.Bound(x => x.Name).HtmlAttributes(new { @style = "text-align: left" });
    ....
    columns.Command(command =>
    {
        command.Edit(); command.Destroy();
    });
})
.....
.Selectable()
.Navigatable()
.DataSource(ds => ds
    .Ajax()
    .Model(model =>
    {
        model.Id(x => x.Name);
    })
    .Read("", "")
    .Update("", "")
    .Destroy("", "")
    .Create("", "")
)
.Events(e => e.Edit("EditHandler").Save("SaveHandler"))
)

在这个 class、a.cshtml 的编辑器模板中，我有另一个网格，我希望它的编辑和读取操作包括网格 A 的 Id .

@(Html.Kendo().Grid<B>()
    .Name("B")
    .Columns(columns =>
    {
        columns.Bound(.....
    })
    .....
    .Editable(edit => edit.Mode(GridEditMode.InCell))
    .Selectable()
    .Navigatable()
    .DataSource(ds => ds
        .Ajax()
        .PageSize(5)
        .Model(model =>
        {
            model.Id(x => x.Id);
        })
        .Read("", "")
        .Update("", "")
    ).ToClientTemplate()
)

更新

function EditHandler(e) {
    if (e.model.isNew())
        return;
    var detailGrid = e.container.find("#details").data('kendoGrid');
    detailGrid.dataSource.read({ Id: e.model.Id });
    detailGrid.dataSource.update({ Name: e.model.Name });
}

正如 Dion 所说，它需要 2 处更改：

在子网格中，B，将自动绑定设置为 false：.AutoBind(false)
使用 read 方法设置 ID，而不是我一直在尝试的手动设置。

Answer 1

为了克服这种情况，我将在 Grid-A 的 edit 事件中手动触发 Grid-B 的 read。按照这个设置：

网格-B 配置：

.AutoBind(false)
.DataSource(ds => ds.Ajax()
                    .Read("action", "controller")
                    .Update(url => url.Action("update", "controller").Data(paramData)))

修改 Grid-A edit 函数：

function EditHandler(e) {
    var gridB = $("#gridB").getKendoGrid(),
        model = e.model;

    gridB.dataSource.read({Id: model.Id});
}

// get Id for update 
function paramData() {
    return { Id : $("#Id").val(); };
}

希望对您有所帮助。

注意: 与读取不同，更新将在弹出窗口显示后触发，然后 Id 字段将已具有其值。因此，您可以在这种情况下使用 Url.Action(...).Data()。

编辑器模板内 Kendo 网格的设置选项

Setting options of a Kendo Grid that is inside an Editor Template

kendo-ui

kendo-grid

kendo-asp.net-mvc