バージョン

セル編集

EditingCore および  CellEditing 動作は WebDataGrid™ でのセル編集に不可欠です。UI またはコードの使用によってセルを編集できます。

始める前に

WebDataGrid™ でデータ編集を有効にするには、 CellEditing 動作を Behaviors コレクションに追加します。CellEditing 動作の EditModeActions プロパティによって、どのアクションによってセルが編集モードになるかを決定することができます。

RowUpdating イベントを処理した場合、編集された行でフォーカスを失うと変更が直ちにデータ ソースにコミットします。行がフォーカスを取得またはフォーカスを失うには、 Activation 動作を有効にする必要があります。Activation 動作の詳細は、 アクティブ化を参照してください。

注: この種類の自動的な更新に対してサポートされるデータ ソースを発生させる必要があります。この機能を活用できるデータ ソースのリストについては、 サポートされるデータ ソースを参照してください。データ ソースが WebDataGrid によって自動的に更新できない場合、更新イベントを処理してデータを手動で更新する必要があります。

達成すること

WebDataGrid コントロールを SqlDataSource コンポーネントにバインドして Customers テーブルからデータを更新する方法を学習します。

次の手順を実行します

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

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

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

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

  5. Cell Editing プロパティの下の EditModeActions プロパティ セクションで、 MouseClick プロパティを Single に設定します。これはシングル クリックでセルが編集モードになるように指定します。

WebDataGrid Enabling Cell Editing 01.png
  1. [適用]、そして [OK] をクリックします。以下のマークアップが生成されるはずです。

HTML の場合:

<Behaviors>
    <ig:EditingCore>
        <Behaviors>
            <ig:CellEditing>
                    <EditModeActions MouseClick="Single" />
             </ig:CellEditing>
        </Behaviors>
    </ig:EditingCore>
</Behaviors>

コード ビハインドからセル編集動作を追加するには、以下のコードを追加します。

Visual Basic の場合:

WebDataGrid1.Behaviors.CreateBehavior(Of Infragistics.Web.UI.GridControls.EditingCore)()
WebDataGrid1.Behaviors.EditingCore.Behaviors.CreateBehavior(Of Infragistics.Web.UI.GridControls.CellEditing)()
WebDataGrid1.Behaviors.EditingCore.Behaviors.CellEditing.EditModeActions.MouseClick = Infragistics.Web.UI.GridControls.EditMouseClickAction.Single

C# の場合:

WebDataGrid1.Behaviors.CreateBehavior<Infragistics.Web.UI.GridControls.EditingCore>();
WebDataGrid1.Behaviors.EditingCore.Behaviors.CreateBehavior<Infragistics.Web.UI.GridControls.CellEditing>();
WebDataGrid1.Behaviors.EditingCore.Behaviors.CellEditing.EditModeActions.MouseClick = Infragistics.Web.UI.GridControls.EditMouseClickAction.Single;
  1. WebDataGrid のプロパティ ウィンドウのイベント表示に移動して、RowUpdating イベントを処理します。コードをイベント ハンドラに追加する必要はありません。

  2. WebDataGrid のプロパティ ウィンドウで EnableAjax が True であることをチェックします。そうでない場合は、True に設定します。

  3. アプリケーションを実行します。セルをクリックすると、セルは編集モードになりデータを変更できます。編集したばかりのセルをクリックして放すと、AJAX を介してデータ ソースに変更がコミットされます。

CellEditing を有効にすると、以下のコードを使用して編集モードにすることができます。

JavaScript の場合:

var grid = $find("WebDataGrid1");
// 編集するセルを取得します
var cell = grid.get_rows().get_row(0).get_cell(0);
// CellEditing 動作を取得して enterEditMode メソッドを呼び出します
grid.get_behaviors().get_editingCore().get_behaviors().get_cellEditing().enterEditMode(cell);

セルへのアクセスと編集

WebDataGrid™ でセル値を編集することはクライアント側のみに限られています。そのセルへの参照を取得し、その設定値メソッドを呼び出すことによってセルの値を編集できます。

サーバー側で、セル値は読み取り専用です。ただし、データ検証などの操作のための値を取得することができます。サーバー側とクライアント側の両方でセルの値を取得できます。

以下のコードは WebDataGrid のセル値を取得および編集する方法を示します。

Note

注: プログラムによってセルを編集するために必要なのは EditingCore 動作を有効にすることだけです。

Visual Basic の場合:

' コントロールの最初の項目のセル値
Dim cellValue As String = Me.WebDataGrid1.Rows(0).Items(0).Value.ToString()

C# の場合:

// コントロールの最初の項目のセル値
string cellValue = this.WebDataGrid1.Rows[0].Items[0].Value.ToString();

JavaScript の場合

var grid = $find("WebDataGrid1");
var oldValue = grid.get_rows().get_row(0).get_cell(0).get_value();
grid.get_rows().get_row(0).get_cell(0).set_value("new string value");