Web Components Grid 行の編集

Web Components Grid の Ignite UI for Web Components 行編集機能では、IgcGrid 内でデータを直接編集できます。直感的な編集操作に加えて、完全な CRUD 操作を実現する強力な API も提供されます。行をクリックして Enter キーを押すと行編集を開始できます。もう 1 つの方法として、編集したい行をマウスでダブルクリックしても開始できます。

Web Components Grid 行編集の例

次のサンプルは、IgcGrid で行編集を有効にする方法を示します。セル値を変更した後、同じ行内の別セルへクリックまたは移動しても、[完了] ボタンで確定するまで行の値は更新されません。[キャンセル] ボタンで変更を破棄することもできます。

行編集の使用

次に、データ ソースをバインドした IgcGrid を定義し、IgcGrid.rowEditable を true に設定します。

<igc-grid id="grid" primary-key="ProductID" width="100%" height="500px" row-editable="true">
    <igc-column field="ProductID" header="Product ID" editable="false"></igc-column>
    <igc-column field="ReorderLevel" header="Reorder Level" data-type="number"></igc-column>
    <igc-column field="ProductName" header="Product Name" data-type="string"></igc-column>
    <igc-column id="unitsInStock" field="UnitsInStock" header="Units In Stock" data-type="number"></igc-column>
    <igc-column field="OrderDate" header="Order Date" data-type="date"></igc-column>
    <igc-column field="Discontinued" data-type="boolean"></igc-column>
</igc-grid>

constructor() {
    var grid  = document.getElementById('grid') as IgcGridComponent;
    var unitsInStock = document.getElementById('unitsInStock') as IgcColumnComponent;
    grid.data = this.data;
    unitsInStock.bodyTemplate = this.unitsInStockCellTemplate;
}

public unitsInStockCellTemplate = (ctx: IgcCellTemplateContext) => {
    return html`<input name="units" value="${ctx.cell.value}" style="color: black" />`;
}

位置

• オーバーレイの既定位置は、編集モードの行の下です。

• 行の下にスペースがない場合、オーバーレイが行の上に表示されます。

• 一度表示されたオーバーレイ (上または下) は、閉じるまでスクロールしてもその位置を維持します。

動作

• 行が編集モードのとき、同じ行内のセルをクリックすると編集は継続されます。

• [完了] ボタンをクリックすると行編集が完了し、変更はデータ ソースまたはトランザクションに送信され、行は編集モードを終了します。

• [キャンセル] ボタンをクリックすると、その行に対する現在の変更はすべて元に戻り、行は編集モードを終了します。

• 行が編集モードのときに別の行のセルをクリックすると、現在の行編集を終了し、変更を送信します ([完了] ボタンと同じ動作)。新しくフォーカスされたセルが編集可能であれば新しい行も編集モードに入ります。編集不可セルの場合は、前の行のみが編集モードを終了します。

• 行が編集モードのまま表示領域外へスクロールされても、編集状態は維持されます。再び行が表示される位置までスクロールすると、その行は引き続き編集モードです。また、IgcGrid の外側をクリックしてもセルは編集モードのままです。

• ソート、フィルタリング、検索、および非表示操作を実行すると、現在の行のすべての変更が元に戻され、行の編集モードを終了します。

• ページング、サイズ変更、ピン固定、移動操作を実行すると、編集モードを終了して最新値を送信します。

• 編集した各セルは行編集が終了するまで変更スタイルを取得します。IgcGrid がトランザクションで提供されない場合の動作です。トランザクションが有効な場合、すべての変更がコミットされるまでセル編集スタイルが適用されます。

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

• ENTER と F2 で行編集モードに入ります

• ESC で行編集モードを終了し、編集中に行ったセル変更は送信されません

• TAB は、行内の編集可能セル間でフォーカスを移動し、右端セルの次は [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンの次は現在編集中の行の左端の編集可能セルへ移動します。

機能の統合

• データを変更する操作を行うと、行編集は終了し、現在の行の変更が送信されます。これにはソート、グループ化条件の変更、フィルタリング条件の変更、ページングなどが含まれます。

• 行編集が完了すると集計も更新されます。ソートやフィルタリングなど他の機能にも同様に反映されます。

• グループ行の展開と縮小は現在の行の編集を終了しません。

行編集オーバーレイのカスタマイズ

テキストのカスタマイズ

テンプレートを使って、行編集オーバーレイのテキストをカスタマイズできます。

public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => {
    return html`Changes: ${ctx.implicit}`;
}

ボタンのカスタマイズ

テンプレートを使用して、行編集オーバーレイのボタンもカスタマイズできます。

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

スタイル設定

定義済みテーマに加えて、利用可能な CSS プロパティ を設定することでグリッドをさらにカスタマイズできます。 色を変更したい場合は、まずグリッドにクラスを設定します。

<igc-grid class="grid"></igc-grid>

続いて、そのクラスに対して関連する CSS プロパティを設定します。

.grid {
    --ig-banner-banner-background: #e3e3e3;
    --ig-banner-banner-message-color: #423589;
}

デモ

既知の問題と制限事項

• グリッドに IgcGrid.primaryKey が設定されておらず、かつリモート データ シナリオが有効な場合 (ページング、ソート、フィルタリング、スクロールによりリモート サーバーへのデータ要求が発生する場合)、データ要求完了後に行の次の状態が失われます。

• 行選択

• 行の展開/折りたたみ

• 行編集

• 行のピン固定

API リファレンス

その他のリソース

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

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