razor - 編集可能な詳細テンプレート剣道 UI グリッド

Question

更新 値とエディター テンプレートを使用してフォーム レンダリング (画像を参照) を取得することができました。

ラベルが黒くなってすみません。NDA 要件...

行の uid を使用して詳細テンプレートに一意の名前を付けているため、これは複数の行で機能するようになりました。

@(Html.Kendo().TabStrip()
    .Name("Details_#=uid#")

以下のソースを最新バージョンに更新し、引き続き支援したい問題のリストを含めました。

未解決の問題:

• 変更を保存するときにグリッドとともに詳細テンプレートをシリアル化する
• ビュー モデルでデータ注釈を使用してラベルと検証ルールを割り当てます (Html ヘルパーを機能させることができないように見えるため、これは機能しないようです。アドバイスは素晴らしいでしょう!

元の投稿テキスト (ソースコードは更新されています)

各アイテムに詳細テンプレートが含まれるバッチ グリッドを作成しようとしています。

各詳細テンプレートには、追加のフォーム データを保持したいタブストリップが含まれています。

現在、標準のバッチ グリッドが機能していますが、各項目の情報を画面上で取得できず、編集可能にすることもできません。また、複数の行が存在する場合、詳細テンプレートが壊れます。テンプレートは引き続きレンダリングされますが、両方のテンプレートが同じ ID を持っているため、ボタンは機能しません。これは、ユーザーの対話能力を明らかに破壊しますが、各行テンプレートの一意の識別子を確保する方法がわかりません (親の uid を何らかの形で使用する可能性があります)。

この最初のステップを完了した後、このフォーム データをシリアル化する方法もわかりませんが、必要に応じて別の質問をすることができます。

グリッド

@(Html.Kendo().Grid(Model.ItemModelList)
.Name("ItemGrid")
.Columns(columns =>
{
    //Other columns omitted for brevity
    columns.Bound(i => i.Description).Width(100);
    columns.Command(command =>
    {
        command.Destroy();
    }).Width(60);
})
.ClientDetailTemplateId("ItemDetails")
.ToolBar(toolbar =>
{
    toolbar.Create();
    toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Pageable()
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .Events(events => 
    {
        events.Error("ItemGrid_ErrorHandler");
    })
    .Model(model =>
    {
        model.Id(i => i.ItemModelID);
        model.Field(i => i.DimensionUOM).DefaultValue("in");
        model.Field(i => i.WeightUOM).DefaultValue("lbs");
    })
    .Create(create => create.Action("CreateProducts", "ItemGrid"))
    .Read(read => read.Action("GetProducts", "ItemGrid"))
    .Update(update => update.Action("UpdateProducts", "ItemGrid"))
    .Destroy(destroy => destroy.Action("DeleteProducts", "ItemGrid"))
)

)

詳細テンプレート

<script id="ItemDetails" type="text/kendo-tmpl">

@(Html.Kendo().TabStrip()
    .Name("Details_#=uid#")
    .SelectedIndex(0)
    .Items(items =>
    {
        items.Add().Text("test").Content(@<div>      
            <table id="testForm">
                <tr>
                    <td>TEST</td>
                </tr>
                <tr>
                </tr> 
            </table> 
        </div>);

        items.Add().Text("test2").Content(@<div>      
            <table id="test2Form">
                <tr>
                    <td><label>A</label></td>
                    <td><label>B</label></td>
                    <td><label>C</label></td>
                    <td><label>D</label></td>
                    <td><label>E</label></td>
                </tr>
                <tr>
                    <td>
                        <input class="k-textbox" value="#=objectA#">
                    </td>
                    <td>
                        @(Html.Kendo().DropDownList()
                            .Name("objectB")
                            .Value("#=objectB#")
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .BindTo(new SelectList((System.Collections.IEnumerable)ViewBag.objectBListing, "Value", "Value"))
                            .ToClientTemplate()
                        )
                    </td>
                    <td>
                        @(Html.Kendo().DropDownList()
                            .Name("objectC")
                            .Value("#=objectC#")
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .BindTo(new SelectList((System.Collections.IEnumerable)ViewBag.objectCListing, "Value", "Value"))
                            .ToClientTemplate()
                        )
                    </td>
                    <td><input class="k-textbox" value="#=objectD#"></td>
                    <td><input class="k-textbox" value="#=objectE#"></td>
                </tr>
            </table> 
        </div>);
    })
    .ToClientTemplate()
)