Web Components Grid の行操作

Web Components Grid の Ignite UI for Web Components 行操作機能を使用すると、開発者は IgcActionStrip を使用し、行/セルコンポーネントと行のピン固定に CRUD を利用できます。これらの操作 (編集とピン固定) には、IgcGridComponent の特定の行に適用できる事前定義された UI コントロールがいくつかあります。

使用方法

事前定義された操作 (actions) UI コンポーネントは次のとおりです:

IgcGridEditingActions - IgcGridComponent 編集専用に設計された機能と UI を含みます。rowEditable オプションと IgcGridComponent の行削除に応じて、セルまたは行の編集モードをすばやく切り替えることができます。
IgcGridPinningActions - IgcGridComponent ピン固定専用に設計された機能と UI を含みます。行をすばやくピン固定し、ピン固定された行とその無効な行の間を移動できます。

これらは IgcGridComponent 内に追加され、デフォルトのインタラクションを提供する IgcActionStrip プを持つために必要です。

<igc-grid row-editable="true" primary-key="ID">
    <igc-column field="field"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

[!Note] ActionStripComponent が IgcGridComponent の子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。

カスタムの実装

これらのコンポーネントは、カスタマイズのための柔軟性を提供するテンプレートを公開します。たとえば、delete、edit などの行アクションがある Gmail シナリオで IgcActionStrip を使用する場合、アイコンでボタンコンポーネントを作成します。そして、クリックイベントを追加し、IgcActionStrip に挿入します。

<igc-grid>
    <igx-action-strip #actionstrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <button title="Edit" igxButton="icon" igxRipple (click)='startEdit(actionstrip.context)'>
            <igx-icon>edit</igx-icon>
        </button>
        <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
            <igx-icon>delete</igx-icon>
        </button>
    </igx-action-strip>
</igc-grid>

<igc-grid>
    <igc-action-strip #actionstrip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions edit-row="true" delete-row="true"></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

API リファレンス

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