Angular Tree Grid 編集

Ignite UI for Angular Tree Grid コンポーネントは、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。データの変更のフェーズは次のとおりです: セル編集、行編集、および一括編集。Tree Grid は、これらの操作をカスタマイズできる強力なパブリック API を提供します。さらに、セル編集は、列のデータ型に基づいていくつかのデフォルト エディターを公開します。これらは、igxCellEditor ディレクティブまたは igxRow ディレクティブを介して簡単にカスタマイズできます。

設定

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

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

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

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

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

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

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

グリッドの一括編集は、セル編集モードと行編集モードの両方で有効にできます。一括編集を設定するには、グリッドに TransactionService を提供する必要があります。

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

テンプレートの編集

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

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

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

日付/時刻列のデフォルトのテンプレート エディター

date、dateTime、time 列データ タイプのテンプレート エディターは、IgxGrid の locale に応じてデフォルトの入力形式を使用します。

列に ColumnType.pipeArgs オブジェクトの format プロパティが設定されている場合、エディターの入力形式はそこから推測されます。条件は、数値の日付と時刻の部分のみを含むものとして解析できることです。

エディターの入力形式を明示的に設定する必要がある場合は、IColumnEditorOptions タイプの ColumnType.editorOptions オブジェクトを利用できます。これは、date、dateTime、および time 列データ タイプのエディターの入力形式として使用される dateTimeFormat プロパティを受け入れます。

const editorOptions: IColumnEditorOptions = {
    dateTimeFormat: 'MM/dd/YYYY',
}

<igx-column field="sampleDate" dataType="date" [editorOptions]="editorOptions"></igx-column>

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

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

イベントのキャンセル

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

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

機能の統合

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

テーブルからわかるように、列のサイズ変更を除くすべての操作は編集を終了し、新しい値を破棄します。新しい値がコミットされる場合、対応する機能の ‘-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 リファレンス

• GridCell
• IgxTreeGridComponent スタイル

• 検索