WebDataGrid™ によって Row Adding 動作で行を追加することができます。この動作を有効にすると、データの追加専用の新規行追加テンプレートをコントロールのユーザー インタフェースに配置します。エンドユーザーはこの行のセルに値を入力できます。新規行追加がフォーカスを失うと、行が WebDataGrid に追加され新しいレコードが元になるデータ ソースにコミットされます。行にフォーカスを置くためには、 Activation 動作を有効にする必要があります。
注： WebDataGrid は行追加操作を直ちにコミットします。行の挿入によって直ちにポストバックが発生し、データ ソースへの変更を保持します。
Activation を有効にすると、セルをクリックして新規行追加のセルをアクティブにすることができます。 EditModeActions によってセルは編集モードになります。行にデータが含まれている場合、行をクリックして放すと WebDataGrid に追加します。キーボードを使用して新規行追加もナビゲートできます。
タブ – フォーカスが次のセルに移動します。最後のセルに達した場合はタブ移動は行をコミットします。
矢印キー - どの矢印キーが押されたのかに基づいてフォーカスは現在アクティブなセルから別のセルに移動します。
Enter キー - データがある場合コミットします。
WebDataGrid™ コントロールの新規行追加機能を使用してエンド ユーザーは新しいレコードを追加できます。 Row Adding 動作は、コントロールに常にあるこの空の行を提供します。新しいデータを新規行追加に入力し行のフォーカスを失わせると、その行は WebDataGrid と元となるデータソースに挿入されます。行がフォーカスを取得またはフォーカスを失うには、 Activation 動作を有効にする必要があります。Activation 動作の詳細は、 アクティブ化を参照してください。
注： WebDataGrid は行追加操作を直ちにコミットします。行の挿入によって直ちにポストバックが発生し、データ ソースへの変更を保持します。
新規行追加インタフェースを使用して、エンド ユーザーが新規行を WebDataGrid に追加することを可能にする方法を学習します。
WebDataGrid を SqlDataSource コンポーネントにバインドして、Customers テーブルからデータを取得します。実行についての詳細は、 WebDataGrid で開始を参照してください。
WebDataGrid の Microsoft® Visual Studio™ プロパティ ウィンドウで、WebDataGrid での変更がデータ ソースに更新できるように DataKeyFields プロパティを CustomerID に設定します。
同じウィンドウで、 Behaviors プロパティを指定して、省略記号 (…) ボタンをクリックし、[動作エディタ] ダイアログを起動します。
左側にあるリストから行の追加チェックボックスを選択して動作を追加します。 EditingCore 動作もチェックされていることに注意してください。
プロパティで、 Alignment が Bottom に設定されていることをチェックします。これによって [新規追加行] が WebDataGrid の一番下に追加されます。
[適用] そして [OK] ボタンをクリックしてエディタを閉じます。データを行に入力し行がフォーカスを失う、他の場所をクリックする、またはキーボードの Enter キーを押すことによって、新しい行を WebDataGrid に追加することが可能となりました。
クライアント側で行を WebDataGrid™ に追加できます。コードを使用して行を追加するために、 行の追加 動作を有効にする必要はありません。ユーザーにする必要がある唯一の動作は EditingCore 動作で、BatchUpdating を True に設定します。さらに、追加する前に行のためにすべての必要な値を埋める必要があります。
JavaScript の場合
var grid = $find("WebDataGrid1");
var rows = grid.get_rows();var rowsLength = grid.get_length();
// null にできないすべての値のためにセル値の配列を作成します
var row = new Array("CustomerID", "CompanyName");
// 行を追加します。
rows.add(row);
var lastRow = rows.get_row(rowsLength);var cell = lastRow.get_cell(1);grid.get_behaviors().get_editingCore().get_behaviors().get_cellEditing().enterEditMode(cell);
コードで列を追加するその他の方法として、{ column-key : cell-value } ペアで JSON 表記のオブジェクトを使用する方法があります。この方法は、ColumnMoving 動作が有効な場合に使用することをお勧めします。
JavaScript の場合:
var grid = $find("WebDataGrid1");
var rows = grid.get_rows();
// Create JSON-notation object
var row = [ { "Value" : new Date().getTime() + 1, "DataKeyField" : "RequiredDate" ) }, { "Value" : true, "DataKeyField" : "Discontinued" ) },
{ "Value" : "Hanari Carnes" , "DataKeyField" : "ShipName" ) },
{ "Value" : 4, "DataKeyField" : "ShipVia" ) },
// Add row.
rows.add(row);