2017-04-06 6 views
0

フォームの一部としてCRUD操作を実行する剣道UI ASP.NET MVCグリッドがあります。次のスニペットでは、ユーザーの名前を表示するが、ユーザーのIDの値を持つインライン編集可能なコンボボックス(ユーザー名とIDにバインドされている)を含む列を表示しようとしています。GridTemplateがEditorTemplateをグリッドフォームでオーバーライドしないようにする

書類を提出適切に形成するが、ユーザIDではなく名前を表示:

columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewBag.Users, "SystemUserId", "Name").Title("User").EditorTemplateName("ComboBoxInForm").Visible(true).ClientTemplate("#= UserId #" + 
"<input type='hidden' name='Users[#= index(data) #].UserId' value='#= UserId #' />" 
); 

ComboBoxInForm EditorTemplate:

@model object 
@(
Html.Kendo().ComboBoxFor(m => m) 
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]) 
) 

Iは、フォーム入力タグを提供ClientTemplateを削除する場合、ユーザーの名前は、ユーザーのIDの値ではなく、表示されているものです。しかし、フォームの一部としてバッチで提出する必要があるので、フォーム入力タグを削除することはできません。

は、フォーム(無入力タグ)を提出しないが、正確にというのIDよりもユーザー名が表示されます。私はグリッド列が表示されるようにこれら二つの要件を組み合わせるために使用することができますどのような解決策

columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewBag.Users, "SystemUserId", "Name").Title("User").EditorTemplateName("ComboBoxInForm").Visible(true); 

名前(しかし、IDの値を持つ)とフォーム入力タグも提供しますか?

答えて

1

まず、ClientTemplateはEditorTemplateをオーバーライドしていない...

ClientTemplateは表示テンプレートとEditorTemplateは、よく、エディタテンプレートで、本質的です。

ClientTemplateには、という名前のユーザーIDが関連付けられたが表示されます。

グリッドをそのまま(ForeignKeyと非表示フィールドを使用して)保持したい場合は、コンボボックスで選択されたUserIdを関連する名前にマップする「マッピング」関数を追加する必要があります。

あなたはそうのようにこれを行うことができます:

レイザー:

.ClientTemplate("#= mapIdToName(UserId) #" + 
    "<input type='hidden' name='Users[#= index(data) #].UserId' value='#= UserId #' />"); 

Javascriptを:

function mapIdToName(id) { 
    var grid = $("#grid").getKendoGrid(), 
     users = grid.options.columns[0].values, 
     name; 

    for (var i = 0; i < users.length; i++) { 
     if (users[i].value == id) { 
      name = users[i].text; 
      break; 
     } 
    } 

    return name; 
} 

これは、あなたがすでにgrid.optionsを経由して(持っている識別子名の配列を使用しています。 columns.values)は、ForeignKey()メソッドによって作成されたものです。

代替溶液 。 。 。 。 。 しかし、あなたが望むものを達成するための他の方法もあります。

ForeignKeyを使用せず、代わりにIDとNameの両方を含むオブジェクトに列をバインドし、より具体的なEditorTemplateがForeignKey()と同じコレクションにバインドします。これはマッピング関数を必要としない。E:

レイザー:

columns.Bound(x => x.User) 
    .ClientTemplate("#= User.Name #" + 
    "<input type='hidden' name='Users[#= index(data) #].UserId' value='#= UserId #' />"); 

EditorTemplate:

@model object 
@(
Html.Kendo().ComboBoxFor(m => m) 
.DataValueField("SystemUserId") 
    .DataTextField("Name") 
    .BindTo((System.Collections.IEnumerable)ViewBag.Users) 
) 

隠された入力方法の欠点は、技術だけでできるようになると、あなたが少数の行にグリッドを制限しなければならないということですページ2,3、などのデータがレンダリングされず、ポストに含まれるフォームに隠れた入力がないため、1ページ分のデータをポストすることができます。

3つ目の方法(これは私がやることです)は、隠れた入力を全く使わないことです。 代わりに、私は最初に "メイン"フォームデータ(グリッドデータではありません)をオブジェクトに直列化する(これは剣道MVVMを使用すると非常に簡単です)ajax呼び出しでデータを手作業でポストし、変更されたグリッドデータを(拡張を使用して)フォームデータを作成し、結果の結合オブジェクトを投稿します。

私はグリッドデータをシリアル化するために、この技術のバリエーションを使用します。この

利点は、それがグリッドのページングメカニズムを使用することができますよう、それは大きなデータセットをサポートし、(これは私が好きな主な理由であるとされていますこの手法では、すべてのグリッド/子データ(新規/更新/削除)をフォーム/ヘッダー/親データに1回のリクエストで送信することにより、サーバー上のすべてのデータを同時に処理することができます。データの全体の「ピクチャ」と、更新が単一のトランザクションブラケット内で発生することを可能にする。

0

別の回答from the Telerik forums

この動作の理由は、ForeignKey Builderが数値値に関連付けられたテキストを組み込み機能として表示するためです。フードの下では、列は数値のみを含むフィールドにバインドされます。クライアントテンプレートにテキスト表現を表示するには、カスタムロジックを記述する必要があります。 が最初のように、実際のフィールド値を受け入れることを関数として定義することができます

  1. 入力要素の値:私は、これは同じ困難に直面して他の人のために役立つかもしれないという場合にはこれを実現する方法についていくつかのガイドラインを与えるだろうパラメータとフィールド名 (静的テキスト)を2番目のパラメータとして使用します。
  2. Telerik MVCラッパーは、剣道UIウィジェットを初期化するために必要なHTMLとJavaScriptを レンダリングします。各 外部キー列は、 columns.valuesに格納されているキーと値のペアの単純な配列です。

    関数textValue(:ここ

  3. は、特定の数(現在のフィールド値)に関連付けられたcolumns.values からテキストを見つけるのシンプルなアイデアを説明 にあなたを助けるべきであるいくつかのコメントを持つ関数本体であります値、fieldName){ //$("#gridNameId").data("kendoGrid").options.columnsにはグリッドの設定で定義された列が含まれます //配列を繰り返し処理し、各列の.field値を確認しますフィールド名パラメーター(第2パラメーター)と同じ名前の列フィールドを検索する // "外部キー"として定義されている各列に値の配列があります。コンボボックスに表示される各値のキーと値のペアが含まれています。 //最初の最初の引数(値)と同じ値に関連付けられたテキスト値を返す //値に関連付けられたテキストを返す}

    ClientTemplate( "#=商品コード#" + ""

関連する問題