2012-08-24 16 views
5

私は剣道UIグリッドを使うMVC 3プロジェクトを持っています。同じ剣道UIグリッドに異なるエディタテンプレートを使用できますか?

典型的なビューは次のようになります。

@using Kendo.Mvc.UI 
@model List<ActionViewModel> 
@(Html.Kendo().Grid<ActionViewModel>() 
.Name("#grid")  
.Columns(columns => 
    { 
     columns.Bound(p => p.Name); 
     columns.Command(command => { command.Edit(); command.Destroy(); }); 
}) 
.ToolBar(toolbar => toolbar.Create().Text(Resources.Grid.Create)) 
.Editable(editable => editable.Mode(GridEditMode.PopUp))) 
.Sortable() 
.Scrollable() 
.Filterable(f=>f.Extra(true)) 
.DataSource(dataSource => dataSource   
    .Ajax() 
    .Events(events => events.Error("error_handler")) 
    .Model(model => model.Id(p => p.Id)) 
    .Create(update => update.Action("Create", "Action")) 
    .Read(read => read.Action("Read", "Action")) 
    .Update(update => update.Action("Update", "Action")) 
    .Destroy(update => update.Action("Delete", "Action")) 
)) 

私は、多くの場合、これらは剣道UIの編集ポップアップで使用されている、私のviewmodelsのカスタムエディタのテンプレートを定義する必要があります。

剣道UIグリッドでは、要素の作成、更新、削除が可能です。 editとcreateのポップアップは、デフォルトで同じエディタテンプレートを使用します。 2つのエディタテンプレートを編集して削除するための簡単な方法はありますか?

答えて

7

UPDATE

4歳の答えのために不必要なdownvotesを防止するために、私は以下のコメントで提供質問@ataravati含めています。 OLD ANSWER

Kendo UI grid - different templates for Edit and Create

:より良く、より現代的な答えをここに行く

これは、C#の答えではないが、それが関連しています。 JavaScript APIを使用して、「追加」と「編集」を区別する方法を見つけ出し、ポップアップエディタをそれぞれ別々に反応させるようにしました。私の推測では、新しいエントリを追加するとすべてのフィールドが編集可能になりましたが、既存のエントリを編集するときには、一部のフィールドを読み取り専用にする必要がありました。

簡単に言えば、ツールバーボタンのjQueryクリックリスナーを追加し、ifステートメントのセットを使用して、クリックされたボタンのクラスがk-grid-editまたはk-grid-add(カスタム定義の場合はカスタムクラス)かどうかを判断します。グリッドウィジェットのツールバーボタン)。

$("#grid").data("action","add");

...私はその後、決定するために、カスタムポップアップエディタテンプレート内で読み取ら:その後、私は親グリッド上のデータ属性でアクションタイプを(「追加」または「編集」)を格納します特定のフィールドは読み取り専用にする必要があるかどうか:

if ($("#grid").data("action") === "add") { /*Do stuff*/ }

私はまた、(例えば、インライン編集モードでは、状況に応じて、ツールバーのボタンを非表示にするか表示するには、このメソッドを使用して保存してボタンをキャンセルすべき行が編集モードにあるときにのみ表示されるため、ユーザーがグリッド内で行を選択し、 「編集」ボタンをクリックすると、デフォルトの非表示の「保存」ボタンと「キャンセル」ボタンが表示され、その他のボタンは非表示になります。編集アクションが完了し、ユーザーが[保存]または[キャンセル]をクリックすると、ボタンは元の状態に戻ります)。より明示的な情報については

、ここでのトピックに関する私の剣道UIのフォーラムのスレッドです:

http://www.kendoui.com/forums/ui/grid/kendo-grid---how-to-have-different-custom-editor-for-update-and-create.aspx

私はいくつかのサンプルコードを掲載し、フィリップという名前の別のユーザーが同じに到着した別の解決策を考え出しました彼のコードも掲載しました。簡単な方法はありません

番号:だから

は、あなたの質問に答えるために。この機能は現在、剣道UIフレームワークには含まれていません。しかし、少し余分な肘のグリースでも可能です。またはカフェイン。 :)

私はこれが役に立ちそうです。

+0

ありがとうございました!私が望んでいた答えではありませんでしたが、少なくとも私は答えを得ました:) – Marius

+3

フォーラムのスレッドをもう一度チェックすると、もっと簡単な2つのJavaScriptの回答が掲載されました。グリッドウィジェット。選択した行のIDを含む変数を検索し、イベントチェーンを通過させます。ヌルまたは空白の場合は挿入(追加)、そうでない場合は更新(編集)です。 http://www.kendoui.c​​om/forums/ui/grid/kendo-grid---how-to-have-different-custom-editor-for-update-and-create.aspx#2325121 – Adrian

+0

ここが正しい解決策:http://stackoverflow.com/questions/14321396/kendo-ui-grid-different-templates-for-edit-and-create – ataravati

関連する問題