Benutzerdefinierter Befehl, der das zweite bearbeitbare Popup aufruft

Question

Ich habe eine MVC 5-Anwendung, mit der ich ein Telerik-Grid verwende. Bis jetzt ist alles gut.

Außer ich versuche, einen benutzerdefinierten Befehl zu haben, der ein Editierbares Popup aufruft, genau wie der Editierbefehl, wenn er auf GridEditMode.Popup gesetzt ist. Dies würde eine Teilmenge von Daten aus meinem Modell anzeigen, an die das Gitter gebunden ist.

Ich habe diese Demo hier gesehen ->http://demos.telerik.com/aspnet-mvc/grid/custom-command auf Custom Commands, aber ich frage mich, wie ich das in einen bearbeitbaren Bildschirm verwandeln.

Ich weiß, das ist ein wenig vage, aber ich bin mir nicht sicher, was, spezifischere Frage zu diesem Zeitpunkt zu stellen? Wenn ich es versuchen müsste, dann frage ich mich, ob es eine Alternative gibt, den gesamten Edit-Bildschirm von Hand in HTML zu erstellen und auf dieser Seite einzubetten, wie die Demo-Shows.

Ich habe das folgende Modell. Ich versuche, das Kind, ModelB, in seinem eigenen Popup zu bekommen.

ModelA 
Guid   ID 
string  Name 
IList<ModelB> Roles 

ModelB 
Guid   ID 
Guid   ModelA_ID 
string  Role 

Answer 1

Ich denke, Sie brauchen, um die Kinder in einem anderen Raster innerhalb des Popup-Editor (in der MVC editor template) zu bearbeiten. Das untergeordnete Gitter muss an seine eigenen Controller/Aktionen gebunden sein, die die übergeordnete ID (modelA_ID) als Eingabeparameter verwenden.

Das Hauptnetz wie folgt aussehen:

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

und im Editor-Vorlage (MyTemplate.cshtml) Sie haben könnten:

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

und die Javascript-Funktion getCurrentParentId sieht wie folgt aus:

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