Angular Grid での行追加

Grid コンポーネントはインライン行追加や Angular CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっているアクション ストリップコンポーネントを追加し、行にホバーして提供されたボタンを使用するか、ALT + + を押して、行追加 UI を生成します。

Angular Grid 行追加の例

次のサンプルは、Grid でネイティブの行追加を有効にする方法を示しています。セルの値を変更してから、同じ行の別のセルをクリックまたはナビゲートしても、[完了] ボタンを使用して確認するか、[キャンセル] ボタンを使用して破棄するまで、行の値は更新されません。

行追加の使用

はじめに、app.module.ts ファイルに IgxGridModule をインポートします:

// app.module.ts

...
import { IgxGridModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxGridModule],
    ...
})
export class AppModule {}

次に、バインドしたデータソースに Grid を定義をして rowEditable を true に設定し、編集アクションを有効にしたアクション ストリップ コンポーネントを定義します。addRow 入力は、行追加 UI を生成するボタンの表示状態を制御します。

<igx-grid [data]="data" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowEditable]="true">
    <igx-column field="ProductID" header="Product ID" dataType="number"></igx-column>
    <igx-column field="ReorderLevel" header="ReorderLever" dataType="number"></igx-column>
    <igx-column field="ProductName" header="ProductName" dataType="string"></igx-column>
    <igx-column field="UnitsInStock" header="UnitsInStock" dataType="number"></igx-column>
    <igx-column field="OrderDate" dataType="date"></igx-column>
    <igx-column field="Discontinued" header="Discontinued" dataType="boolean"></igx-column>
    
    <igx-action-strip #actionstrip>
        <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
    </igx-action-strip>
</igx-grid>

Note

プライマリ キーは行追加操作で必須です。

Note

プライマリ キーを除くすべての列は、デフォルトで行追加 UI で編集可能です。特定の列の編集を無効にする場合、editable 列の入力を false に設定する必要があります。

Note

[行の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ RowType) を使用して、ボタンが表示するレコードを調整できます。

内部の IgxBaseTransactionService は Grid に自動的に提供されます。行の状態が送信またはキャンセルされるまで、保留中のセルの変更を保持します。

プログラムで行の追加を開始

Grid を使用すると、2 つの異なるパブリック メソッドを使用して、プログラムで行追加 UI を生成できます。1 つは UI が生成される行を指定するための行 ID を受け入れ、もう 1 つはインデックスによって機能します。これらのメソッドを使用して、現在のデータ ビュー内の任意の場所に UI を生成できます。ページの変更や、たとえばフィルターで除外された行の指定はサポートされていません。

beginAddRowById を使用するには、rowID (PK) によって操作のコンテキストとして使用する行を指定する必要があります。このメソッドは、エンドユーザーが指定された行の [行の追加] アクション ストリップ ボタンをクリックしたかのように機能し、その下に UI を生成します。 最初のパラメーターに null を渡すことで、UI をグリッドの最初の行としてス生成させることもできます。

this.grid.beginAddRowById('ALFKI');  // spawns the add row UI under the row with PK 'ALFKI'
this.grid.beginAddRowById(null);     // spawns the add row UI as the first record

beginAddRowByIndex メソッドも同様に機能しますが、UI が生成されるインデックスを指定する必要があります。許可される値の範囲は、0 からデータ ビューのサイズ -1 までです。

this.grid.beginAddRowByIndex(10);   // spawns the add row UI at index 10
this.grid.beginAddRowByIndex(0);    // spawns the add row UI as the first record

位置

• 行追加 UI のデフォルト位置は、エンド ユーザーが [行の追加] ボタンをクリックした行の下にあります。

• Grid がスクロールして、行追加 UI が自動的に完全に表示されます。

• 行追加 UI のオーバーレイは、スクロール中もその位置を維持します。

動作

行追加 UI は、エンド ユーザーに整合性のある編集エクスペリエンスを提供するように設計されているため、行編集 UI と同じ動作をします。詳細については、Grid 行編集トピックを参照してください。

行追加 UI を介して新しい行が追加された後、その位置や表示状態は、Grid のソート、フィルタリングおよびグループ化の状態によって決定されます。これらの状態のいずれも適用されていない Grid では、最後のレコードとして表示されます。スナックバーが短時間表示され、Grid が表示されていない場合にはエンド ユーザーがコントロールの位置までスクロールするためのボタンが含まれています。

キーボード ナビゲーション

• ALT + + - 行を追加するために編集モードに入ります。

• ESC 変更を送信せずに行追加モードを終了します。

• TAB 行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから キャンセル と 完了 ボタンへ移動します。[完了] ボタンからのナビゲーションは、現在編集されている行内の一番左の編集可能なセルに移動します。

機能の統合

• Grid のデータ ビューが変更されると、行追加の操作は停止します。エンド ユーザーが行った変更はすべて送信されます。データ ビューを変更する操作には、ソート、グループ化、フィルタリング、ページングなどが含まれますが、これらに限定されません。

• 行追加の操作が終了すると、集計が更新されます。同じことが、ソート、フィルタリングなど、他のデータ ビューに依存する機能にも当てはまります。

行追加オーバーレイのカスタマイズ

テキストのカスタマイズ

行追加オーバーレイのテキストのカスタマイズは、igxRowAddTextDirective を使用して可能です。

<ng-template igxRowAddText>
	Adding Row
</ng-template>

ボタンのカスタマイズ

igxRowEditActionsDirective を使用して行編集オーバーレイのボタンのカスタマイズが可能です。 キーボード ナビゲーションにボタンを含める場合、各ボタンに igxRowEditTabStopDirective が必要です。

<ng-template igxRowEditActions let-endRowEdit>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>

Note

igxRowEditActions ディレクティブを使用すると、オーバーレイ ボタンの編集と追加の両方の編集アクションが変更されます。

リモート シナリオ

ほとんどのリモート データ シナリオでは、主キーの割り当てはサーバーの作成要求で発生します。この場合、クライアントに追加されたレコードは、サーバーのデータベースに保存されるまで最終的な主キー値を持ちません。Grid でこの更新を処理する推奨される方法は以下のとおりです。

• Grid がトランザクションを使用しない場合

  作成要求が正常に完了し、追加されたレコード データを返すと、ローカル データ レコード インスタンスでそのレコードの ID を置き換えることができます。

• Grid がトランザクションを使用する場合

  作成要求または一括更新要求が正常に完了し、追加されたレコード インスタンス (db で生成された ID) を返すと、clear API メソッド を使用して関連する ADD トランザクションをトランザクション ログからクリアする必要があります。ローカル トランザクションに生成された id フィールドがあり、データベースで作成された id フィールドと異なる場合があるため、クリアする必要があります。返却されたレコードをローカル データ インスタンスに追加できます。

これにより、リモートで生成された ID がローカル データに常に反映され、以降の更新/削除操作で正しいレコード ID がターゲットになります。

スタイル設定

行追加 UI は IgxActionStrip 編集操作のボタン、編集エディター、オーバーレイ、エンドユーザーが新しく追加された行にスクロールできるスナックバーが構成されます。これらのコンポーネントのスタイル設定には、それぞれのトピックのガイドを参照してください。

• Grid 行追加
• IgxSnackbar
• IgxActionStrip

API リファレンス

• rowEditable
• onRowEditEnter
• onRowEdit
• rowEditDone
• onRowEditCancel
• endEdit
• primaryKey
• IgxGridComponent
• IgxActionStripComponent
• IgxGridEditingActionsComponent

その他のリソース

• Grid の概要
• Grid 編集
• Grid トランザクション

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)