第2編集可能なポップアップを呼び出すカスタムコマンド

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