Premium

Web Components Tree Grid 行の追加

IgcTreeGrid では、インライン行追加と Web Components 向け CRUD API により、便利な方法でデータを操作できます。グリッドテンプレートに編集アクションを有効化した ActionStrip を追加し、行へホバーして表示されるボタンを使用します。ALT + + で行追加 UI を表示し、ALT + SHIFT + + で選択行の子行追加 UI を表示できます。

Web Components Tree Grid 行の追加の例

行追加の使用

次に、データソースをバインドした IgcTreeGrid を定義し、IgcTreeGrid.rowEditable を true に設定します。さらに、編集アクションを有効にした ActionStrip コンポーネントを追加します。IgcTreeGrid.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 で編集可能です。特定の列の編集を無効にする場合、Column.editable 列の入力を false に設定します。

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

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

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

IgcTreeGrid では、2 つの公開メソッドを使って行追加 UI をプログラムから表示できます。1 つは UI を表示する位置の基準となる行 ID を受け取り、もう 1 つはインデックスで位置を指定します。これらのメソッドを使うことで、現在のデータビュー内の任意の位置に UI を表示できます。ページ変更や、たとえばフィルターで除外された行を指定することはサポートされません。

IgcTreeGrid.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

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

動作

行追加 UI は、エンドユーザーに一貫した編集エクスペリエンスを提供するため、行編集 UI と同じ動作をします。詳細は Tree Grid 行の編集を参照してください。

行追加 UI から新しい行を追加した後、その位置や表示状態は IgcTreeGrid のソート、フィルタリング、グループ化の状態によって決まります。これらの状態が適用されていない IgcTreeGrid では、新しい行は末尾レコードとして表示されます。また、追加行が表示領域外にある場合は、IgcTreeGrid のその位置までスクロールできるボタンを含むスナックバーが短時間表示されます。

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

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

機能の統合

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

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

テキストのカスタマイズ

行追加オーバーレイのテキストは、IgcGridBaseDirective.rowAddTextTemplate を使用してカスタマイズできます。

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

ボタンのカスタマイズ

行編集オーバーレイのボタンは、RowEditActions テンプレートでカスタマイズできます。

this.grid.rowEditActionsTemplate = (endRowEdit: IgcGridRowEditActionsTemplateContext) => {
    return html`
        <button @click="${evt => endRowEdit.implicit(false, evt)}">Cancel</button>
        <button @click="${evt => endRowEdit.implicit(true, evt)}">Apply</button>
    `;
}

スタイル設定

行追加 UI は、ActionStrip の編集アクションボタン、編集エディターとオーバーレイ、さらに新規追加行へスクロールするためのスナックバーで構成されています。これらのスタイル設定は、各トピックのガイドを参照してください。

API リファレンス

IgcTreeGrid

その他のリソース

Tree Grid 編集

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

Web Components Tree Grid 行の追加