Angular Pivot Grid 編集
Ignite UI for Angular Pivot Grid コンポーネントは、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。データの変更のフェーズは次のとおりです: セル編集、行編集、および一括編集。Pivot Grid は、これらの操作をカスタマイズできる強力なパブリック API を提供します。さらに、セル編集は、列のデータ型に基づいていくつかのデフォルト エディターを公開します。これらは、igxCellEditor ディレクティブまたは igxRow ディレクティブを介して簡単にカスタマイズできます。
設定
有効にする編集モードを指定するために、Pivot Grid は editable
および rowEditable
ブール値プロパティを公開します。
以下のオプションは、プロパティ editable で指定できます。
- false - 対応する列の編集は無効になります。 /デフォルト値/
- true - 対応する列の編集が有効になります。
列が編集できない場合でも、Pivot Grid によって公開されるパブリック API を介して値を変更できます。
以下のオプションは、プロパティ rowEditable で指定できます。
- false - 対応するグリッドの行編集は無効になります。 /デフォルト値/
- true - 対応するグリッドで行編集が有効になります。
Pivot Grid で rowEditable プロパティを true に設定し、editable プロパティがどの列にも明示的に定義されていない場合、編集は主キー以外のすべての列で有効になります。
グリッドの一括編集は、セル編集モードと行編集モードの両方で有効にできます。一括編集を設定するには、グリッドに TransactionService を提供する必要があります。
- セルおよび一括編集 - このシナリオでは、各セルの変更は個別に保持され、元に戻す/やり直し操作はセル レベルで使用できます。
- 行および一括編集 - このシナリオでは、変更は行レベルで保持されるため、元に戻す/やり直し操作は変更された各セルではなく、各行のセル全体に対して動作します。
テンプレートの編集
データ型固有の編集テンプレートを使用する場合、列 dataType
プロパティを指定する必要があります。次に各型のデフォルト テンプレートについて説明します。
string
データ型の場合、デフォルトのテンプレートは igxInput を使用します。number
データ型のデフォルト テンプレートは igxInput type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。date
データ型ではデフォルトのテンプレートは igxDatePicker を使用します。dateTime
データ型の場合、デフォルトのテンプレートは IgxDateTimeEditor directive を使用しています。このエディターは、DateTime オブジェクトの入力要素部分のマスク方向を提供します。date
データ型の場合、デフォルトのテンプレートは IgxDatePicker component を使用しています。time
データ型の場合、デフォルトのテンプレートは IgxTimePicker component を使用しています。boolean
データ型ではデフォルトのテンプレートは igxCheckbox を使用します。currency
データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の IgxInputGroup を使用します。percent
パーセント データ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ IgxInputGroup を使用します。- カスタム テンプレートについては、セル編集トピックを参照してください。
すべての利用可能な列データ型は、公式の列タイプ トピックにあります。
イベントの引数とシーケンス
グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、行の編集およびセルの編集のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。
イベント | 説明 | 引数 | キャンセル可能 |
---|---|---|---|
rowEditEnter |
rowEditing が有効な場合、行が編集モードに入るときに発生します。 |
IGridEditEventArgs | true |
cellEditEnter |
セルが編集モードに入るときに発生します (rowEditEnter の後)。 |
IGridEditEventArgs | true |
cellEdit |
値が変更された場合、セルの値がコミットされた前に発生します (Enter の押下など)。 |
IGridEditEventArgs | true |
cellEditDone |
値が変更された場合、セルが編集され、セルの値がコミットされた後に発生します。 | IGridEditDoneEventArgs | false |
cellEditExit |
セルが編集モードを終了したときに発生します。 | IGridEditDoneEventArgs | false |
rowEdit |
rowEditing が有効な場合、編集モードの値の行がコミットされた前に発生します (行編集オーバーレイの完了 ボタンをクリックなど)。 |
IGridEditEventArgs | true |
rowEditDone |
rowEditing が有効な場合、行が編集され、新しい行の値がコミットされた後に発生します。 |
IGridEditDoneEventArgs | false |
rowEditExit |
rowEditing が有効な場合、行が編集モードを終了したときに発生します。 |
IGridEditDoneEventArgs | false |
イベントのキャンセル
RowEditEnter
- 行もセルも編集モードに入りません。CellEditEnter
- セル編集に入ることを防止します。rowEditable
が有効になっている場合、セル編集は禁止されたままですが、行編集がトリガーされます。CellEdit
- セル/行の編集を許可し、[完了] ボタンまたは [Enter] を押しても値または行のトランザクションはコミットされません。[キャンセル] ボタンをクリックするまで、セル編集と行編集は閉じません。RowEdit
- 行全体ではなくセルのコミットは可能です。行は編集モードのままになり、行トランザクションは開いていると見なされます。[完了] を押しても、行をコミットまたは閉じません。[キャンセル] ボタンは、変更をコミットせずに編集プロセスとトランザクションを閉じます。
以下のサンプルは、実行中の編集実行シーケンスを示しています:
機能の統合
セル/行が編集モードの場合、ユーザーはさまざまな方法でグリッドを操作できます。以下のテーブルは、特定の操作が現在の編集にどのように影響するかを示しています。
Pivot Grid | フィルタリング | ソート | ページング | 移動 | ピン固定 | 非表示 | グループ化 | サイズ変更 | Escape | Enter | F2 | Tab | セル クリック | 新しい行の追加/削除/編集 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
編集モードを保持 | ✔ | |||||||||||||
編集モードを終了 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | |
コミット | ✔ | ✔ | ✔ | ✔ | ✔ | |||||||||
破棄 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
テーブルからわかるように、列のサイズ変更を除くすべての操作は編集を終了し、新しい値を破棄します。新しい値がコミットされる場合、対応する機能の '-ing' イベントで開発者が実行できます。
たとえば、ユーザーがセル/行が編集モードのときに列をソートしようとする場合に、新しい値をコミットする方法:
<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" (sorting)="onSorting($event)">
...
</igx-grid>
public onSorting(event: ISortingEventArgs) {
this.grid.endEdit(true);
// (event.owner as IgxGridComponent).endEdit(true);
}
API リファレンス
- IgxGridCell
- IgxPivotGridComponent スタイル
- IgxGridRow
- IgxInputDirective
- IgxDatePickerComponent
- IgxDatePickerComponent スタイル
- IgxCheckboxComponent
- IgxCheckboxComponent スタイル
- IgxOverlay
- IgxOverlay スタイル