バージョン

行編集テンプレートを有効

始める前に

WebDataGrid™ でデータ編集のためのカスタム テンプレートをエンド ユーザーに提供するには、 Row Editing Template 動作を有効にします。テンプレートによってエンドユーザーは任意のコントロールを含むことができるポップアップを通して行のデータを編集できます。テンプレートで発生する変更はデータ ソースに戻して適用されます。

達成すること

WebDataGrid でデータ編集するために行編集テンプレートを設定します。

次の手順を実行します

  1. WebDataGrid を SqlDataSource コンポーネントにバインドして、Customers テーブルからデータを取得します。実行についての詳細は、 WebDataGrid で開始を参照してください。

  2. WebDataGrid の Microsoft® Visual Studio™ プロパティ ウィンドウで、WebDataGrid での変更がデータ ソースに更新できるように DataKeyFields プロパティを CustomerID に設定します。

  3. 同じウィンドウで、 Behaviors プロパティを指定して、省略記号 (…​) ボタンをクリックし、[動作エディタ] ダイアログを起動します。

  4. この動作を追加して有効にするには、左のリストから行編集テンプレートの隣りのチェックボックスをチェックします。 EditingCore 動作も追加されていることに注意してください。

  5. 行編集テンプレートのプロパティで、テンプレートをポップアップするアクションを設定します。

    1. EditModeActions を展開して RowSelectorMouseClick を None に設定します。この時点で行セレクタを持っていないので、このアクションを有効にする必要はありません。

    2. MouseClick を Double に設定します。これにより、エンド ユーザーが WebDataGrid でセルをダブルクリックするとテンプレートが表示されます。

注: 行を編集した直後に更新を保持したい場合、 Activation 動作を有効にするだけでなく、WebDataGrid の RowUpdating サーバー側イベントを処理する必要があります。WebDataGrid でのデータ編集の詳細は 編集を参照してください。

WebDataGrid Enabling Row Editing Template 01.png
  1. [適用]、そして [OK] をクリックします。

  2. WebDataGrid を右クリックします。コンテキスト メニューの [編集テンプレート] を強調表示して、[行編集テンプレート] を選択します。デフォルトのコントロールをテンプレートに移植するためのプロンプトが表示します。

注: 複数の動作テンプレートを使用している場合、編集テンプレートのサブメニューのセクションとして動作テンプレートが表示されます。

  1. [OK] をクリックしてテンプレートを自動的に移植します。

注: 自分でプロンプトをキャンセルしてコントロールを追加することもできます。ただし、これには WebDataGrid のフィールドにテンプレートのコントロールを手動でバインディングすることが必要になります。詳細は、「行編集テンプレートでのコントロールのバインド」を参照してください。

  1. テンプレート ビューを右クリックして、[テンプレート編集の終了] を選択します。デザイナで普通のグリッド ビューに戻ります。

  2. アプリケーションを実行します。WebDataGrid のセルをダブルクリックして、その行の行編集テンプレートを表示できます。[OK] をクリックして、テンプレートから WebDataGrid のセルに変更をコミットします。

WebDataGrid Enabling Row Editing Template 02.png