Web Components Tree Grid 行の追加

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

Web Components Tree Grid 行の追加の例

行追加の使用

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

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" row-editable="true">
    <igc-column field="Name" data-type="String"></igc-column>
    <igc-column field="Title" data-type="String"></igc-column>
    <igc-column field="HireDate" data-type="Date"></igc-column>
    <igc-column field="OnPTO" data-type="Boolean" width="130px">
    </igc-column>
    <igc-column field="Age" data-type="Number"></igc-column>
    <igc-action-strip id="actionstrip">
        <igc-grid-editing-actions add-row="true">
        </igc-grid-editing-actions>
    </igc-action-strip>
</igc-tree-grid>

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

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

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

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

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

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

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

this.treeGrid.beginAddRowById('ALFKI', true);   // Spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowById(null);            // Spawns the add row UI as the first record

beginAddRowByIndex メソッドも同様に機能しますが、コンテキストとして使用する行はインデックスによって指定されます。

this.treeGrid.beginAddRowByIndex(10, true);   // Spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null);       // Spawns the add row UI as the first record

位置

行追加 UI のデフォルト位置は、エンドユーザーが [行の追加] ボタンをクリックした行の下にあります。
IgcTreeGridComponent がスクロールして、行追加 UI が自動的に完全に表示されます。
行追加 UI のオーバーレイは、スクロール中もその位置を維持します。

動作

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

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

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

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

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

ESC は変更を送信せずに行追加モードを終了します。
TAB - 行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンからのナビゲーションは現在の編集行内で編集可能なセルへ移動します。

機能の統合

IgcTreeGridComponent のデータビューが変更されると、行追加の操作は停止します。エンドユーザーが行った変更はすべて送信されます。データビューを変更する操作には、ソート、グループ化、フィルタリング、ページングなどが含まれますが、これらに限定されません。
行追加の操作が終了すると、集計が更新されます。同じことが、ソート、フィルタリングなど、他のデータビューに依存する機能にも当てはまります。

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

テキストのカスタマイズ

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

this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => {
    return html`Adding Row`;
}

スタイル設定

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

API リファレンス

rowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
endEdit
primaryKey
IgcTreeGridComponent

その他のリソース

Tree Grid 編集

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

Web Components Tree Grid 行の追加