Web Components Grid 編集

Web Components Grid の Ignite UI for Web Components セル編集機能を使用すると、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。IgcGridComponent は、これらの操作をカスタマイズできる強力なパブリック API を提供します。データ操作のフェーズは次のとおりです。

セル編集
行編集
一括編集 (追加予定)

設定

有効にする編集モードを指定するために、IgcGridComponent は editable および rowEditable ブール値プロパティを公開します。

以下のオプションは、プロパティ editable で指定できます。

false - 対応する列の編集が無効になります。これがデフォルト値です。
true - 対応する列の編集が有効になります。

列が編集できない場合でも、IgcGridComponent によって公開されるパブリック API を介して値を変更できます。

以下のオプションは、プロパティ rowEditable で指定できます。

false - 対応するグリッドの行編集は無効になります。これがデフォルト値です。
true - 対応するグリッドで行編集が有効になります。

IgcGridComponent で rowEditable プロパティを true に設定し、editable プロパティがどの列にも明示的に定義されていない場合、編集は主キー以外のすべての列で有効になります。

セルおよび一括編集 - このシナリオでは、各セルの変更は個別に保持され、元に戻す/やり直し操作はセルレベルで使用できます。
行および一括編集 - このシナリオでは、変更は行レベルで保持されるため、元に戻す/やり直し操作は変更された各セルではなく、各行のセル全体に対して動作します。

テンプレートの編集

データ型固有の編集テンプレートを使用する場合、列 dataType プロパティを指定する必要があります。次に各型のデフォルトテンプレートについて説明します。

string データ型の場合、デフォルトのテンプレートは IgcInputComponent を使用します。
number データ型のデフォルトテンプレートは IgcInputComponent type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。
date データ型ではデフォルトのテンプレートは IgcDatePickerComponent を使用します。
dateTime データ型ではデフォルトのテンプレートは DateTimeEditor を使用します。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。
time データ型ではデフォルトのテンプレートは TimePicker を使用します。
boolean データ型ではデフォルトのテンプレートは IgcCheckboxComponent を使用します。
currency データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の InputGroup を使用します。
percent パーセントデータ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ InputGroup を使用します。

カスタムテンプレートについては、セル編集トピックを参照してください。

すべての利用可能な列データ型は、公式の列タイプトピックにあります。

イベントの引数とシーケンス

グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、行の編集およびセルの編集のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。

イベント	説明	引数	キャンセル可能
`RowEditEnter`	`RowEditing` が有効な場合、行が編集モードに入るときに発生します。	`IgcGridEditEventArgs`	true
`CellEditEnter`	セルが編集モードに入るときに発生します。 (`RowEditEnter` の後)	`IgcGridEditEventArgs`	true
`CellEdit`	値が変更された場合、セルの値がコミットされた前に発生します。 (`Enter` の押下など)	`IgcGridEditEventArgs`	true
`CellEditDone`	値が変更された場合、セルが編集され、セルの値がコミットされた後に発生します。	`IgcGridEditDoneEventArgs`	false
`CellEditExit`	セルが編集モードを終了したときに発生します。	`IgcGridEditDoneEventArgs`	false
`RowEdit`	が有効な場合、編集モードの値の行がコミットされた前に発生します (行編集オーバーレイの [完了] ボタンをクリックなど)。	`IgcGridEditEventArgs`	true
`RowEditDone`	が有効な場合、行が編集され、新しい行の値がコミットされた後に発生します。	`IgcGridEditDoneEventArgs`	false
`RowEditExit`	が有効な場合、行が編集モードを終了したときに発生します。	`IgcGridEditDoneEventArgs`	false

イベントのキャンセル

RowEditEnter - Row も Cell も編集モードに入りません。
CellEditEnter - セル編集に入ることを防止します。rowEditable が有効な場合、セルの編集は禁止されたままですが、行の編集がトリガーされます。
CellEdit - Cell/Row の編集を許可し、[完了] ボタンまたは [Enter] を押しても値または行のトランザクションはコミットされません。[キャンセル] ボタンをクリックするまで、セル編集と行編集は閉じません。
RowEdit - 行全体ではなくセルのコミットは可能です。行は編集モードのままになり、行トランザクションは開いていると見なされます。[完了] を押しても、行をコミットまたは閉じません。[キャンセル] ボタンは、変更をコミットせずに編集プロセスとトランザクションを閉じます。

以下のサンプルは、実行中の編集実行シーケンスを示しています。

機能の統合

セル/行が編集モードの場合、ユーザーはさまざまな方法でグリッドを操作できます。以下のテーブルは、特定の操作が現在の編集にどのように影響するかを示しています。

Grid	フィルタリング	ソート	ページング	移動	ピン固定	非表示	グループ化	サイズ変更	Escape	Enter	F2	Tab	セルクリック	新しい行の追加/削除/編集
編集モードを保持								✔
編集モードを終了	✔	✔	✔	✔	✔	✔	✔		✔	✔	✔	✔	✔	✔
コミット										✔	✔	✔	✔	✔
破棄	✔	✔	✔	✔	✔	✔	✔		✔

テーブルからわかるように、列のサイズ変更を除くすべての操作は編集を終了し、新しい値を破棄します。新しい値がコミットされる場合、対応する機能の「-ing」イベントで開発者が実行できます。

たとえば、ユーザーがセル/行が編集モードのときに列をソートしようとする場合に、新しい値をコミットする方法を示します:

<igc-grid id="grid" primary-key="ProductID" >
</igc-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
    grid.addEventListener("sorting", this.onSorting);
}

public onSorting(event: IgcSortingEventArgs) {
    var grid = document.getElementById('grid') as IgcGridComponent;
    grid.endEdit(true);
}

API リファレンス

IgcGridComponent