调用第二个可编辑弹出窗口的自定义命令

Question

我有一个使用 Telerik Grid 的 MVC 5 应用程序。到目前为止一切都很好。

除了我试图有一个调用可编辑弹出窗口的自定义命令，就像设置为GridEditMode.Popup 时的编辑命令一样。这将显示网格绑定到的模型中的数据子集。

我在这里看过这个演示 --> http://demos.telerik.com/aspnet-mvc/grid/custom-command 关于自定义命令，但我想知道如何将其变成可编辑的屏幕。

我意识到这有点含糊，但我不确定此时要问什么更具体的问题？如果我必须尝试，我想我想知道是否有一种替代方法可以手动构建整个编辑屏幕，在 html 中，并将其嵌入到该页面中，就像演示中显示的那样。

我有以下型号。我正在尝试让孩子 ModelB 在它自己的弹出窗口中。

ModelA 
Guid          ID
string        Name
IList<ModelB> Roles

ModelB
Guid          ID
Guid          ModelA_ID
string        Role

Answer 1

我猜你需要在弹出编辑器内的另一个网格中编辑孩子（在MVC editor template 内）。子网格需要绑定到它自己的控制器/动作，这些控制器/动作将父 ID (modelA_ID) 作为输入参数。

主网格可能如下所示：

@(Html.Kendo().Grid<ModelA>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(e => e.Name);
    columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
})
.ToolBar(tools => tools.Create())
.Editable(editable => editable
    .Mode(Kendo.Mvc.UI.GridEditMode.PopUp)
    .TemplateName("MyTemplate"))
.Pageable().Sortable().Filterable()
.DataSource(source => source.Ajax()
    .Model(model => model.Id(e => e.ID))
    .Read(read => read.Action("Read_ModelA", "MyController"))
    .Update(update => update.Action("Update_ModelA", "MyController"))
    .Create(create => create.Action("Create_ModelA", "MyController"))
    .Destroy(destroy => destroy.Action("Destroy_ModelA", "MyController"))))

在编辑器模板 (MyTemplate.cshtml) 中，您可能有：

@model ModelA
@Html.HiddenFor(m => m.ModelA_ID)
@(Html.Kendo().Grid<ModelB>()
.Name("childGrid")
.Columns(columns =>
{
    columns.Bound(o => o.Role);
    columns.Command(command =>
    {
        command.Edit();
        command.Destroy();
    });
})
.ToolBar(tools => tools.Create())
.Editable(editable => editable
      .Mode(Kendo.Mvc.UI.GridEditMode.InLine))
.Pageable().Sortable().Filterable()
.DataSource(source => source.Ajax()
    .Model(model => model.Id(e => e.ID))
    .Read(read => read.Action("Read_ModelB", "MyController").Data("getCurrentParentId"))
    .Create(create => create.Action("Create_ModelB", "MyController").Data("getCurrentParentId"))
    .Update(update => update.Action("Update_ModelB", "MyController"))
    .Destroy(destroy => destroy.Action("Destroy_ModelB", "MyController")))
.ToClientTemplate()
)

而 javascript 函数 getCurrentParentId 看起来像这样：

function getCurrentParentId() {
    return {
        modelA_ID: $('#ModelA_ID').val()
    }
}