title: Angular Tree Grid の編集 - Ignite UI for Angular _description: 強力なパブリック API を使用し、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。Angular データ グリッド編集オプションをお試しください。 _keywords: データ操作, ignite ui for angular, インフラジスティックス・ジャパン株式会社 _language: ja

    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 データ型の場合、デフォルトのテンプレートは 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 - 行全体ではなくセルのコミットは可能です。行は編集モードのままになり、行トランザクションは開いていると見なされます。[完了] を押しても、行をコミットまたは閉じません。[キャンセル] ボタンは、変更をコミットせずに編集プロセスとトランザクションを閉じます。

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

    機能の統合

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

    Tree 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 リファレンス

    その他のリソース