Web Components Grid 行の編集

Web Components Grid の Ignite UI for Web Components 行編集機能を使用すると、IgcGridComponent 内でデータを直接編集できます。データを操作するこの便利な方法に加えて、完全な CRUD 操作のための強力な API があります。行をクリックして Enter キーを押すと、グリッド行の編集を実行できます。もう 1 つの簡単な方法は、変更する必要がある行をマウスでダブルクリックすることです。

Web Components Grid 行編集の例

以下の手順では、IgcGridComponent で行編集を有効にする方法を示します。セル値を変更してから同じ行の他のセルをクリックまたはナビゲーションした場合も [完了] ボタンを使用して確定するまで行値を更新しません。または [キャンセル] ボタンを使用して破棄します。

[!Note] 行が編集モードにある場合、他の行のセルをクリックすると [完了] ボタンが押されたように動作し、前の行の変更をすべての変更をサブミットします。新しくフォーカスされたセルが編集可能な場合、新しい行も編集モードになります。ただし、セルが編集可能でない場合は、前の行のみが編集モードを終了します。

行編集の使用

次に IgcGridComponent をバインドしたデータソースで定義し、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" field="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" />`;
}

[!Note] プライマリキーは行編集操作で必須です。

[!Note] 個々の列の編集を有効にする必要はありません。IgcGridComponent の rowEditable プロパティを使用すると、定義された field プロパティを持つすべての行 (主行を除く) が編集可能になります。特定の列の編集を無効にしたい場合は、その列の editable 入力を false に設定するだけです。

[!Note] IgcGridComponent は、行の状態が送信されるかキャンセルされるまで保留中のセルの変更を保持する内部プロバイダーである BaseTransactionService を利用します。

位置

オーバーレイのデフォルトの位置は編集モードで行の下にあります。
行の下にスペースがない場合、オーバーレイが行の上に表示されます。
一番上または下に表示されると、オーバーレイは閉じられるまでスクロール時にこの位置を保持します。

動作

行が編集モードの場合、編集が継続します。同じ行のセルがクリックされたかどうか。
[完了] ボタンをクリックすると行編集を完了し、変更をデータソースまたはトランザクションへサブミットします。更に行が編集モードを完了します。
[キャンセル] ボタンがをクリックすると現在の行のすべての変更を元に戻し、行編集モードを終了します。
行が編集モードにある場合、他の行のセルをクリックすると現在の行編集を終了し、行の新規の変更をサブミット ([完了] ボタンをクリックした場合と同じ) します。フォーカスのある新しいセルが編集可能かどうか、新しい行が編集モードに入るかどうか、セルが編集できない場合は前の行のみ編集モードを終了します。
行が編集モードの時にグリッドがスクロールされると行が表示領域外になりますが、IgcGridComponent は編集モードのままです。IgcGridComponent をスクロールすると編集行は再度表示されますが編集行が編集モードのままになります。IgcGridComponent 以外をクリックしたときにセルも編集モードに残ります。
ソート、フィルタリング、検索、および非表示操作を実行すると、現在の行のすべての変更が元に戻され、行の編集モードを終了します。
ページング、サイズ変更、ピン固定、移動操作を実行すると、編集モードを終了して最新の値を送信します。
編集した各セルは行編集が終了するまで変更スタイルを取得します。IgcGridComponent がトランザクションで提供されない場合の動作です。トランザクションが有効な場合、すべての変更がコミットされるまでセル編集スタイルが適用されます。

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

Enter と F2 で行編集モードに入ります
Esc で行編集モードを終了し、行の編集モード時に変更されたいずれのセルの変更もサブミットしません
Tab - 行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンからのナビゲーションは現在の編集行内で編集可能なセルへ移動します。

機能の統合

すべてのデータ変更操作は行変更操作を終了し、現在の行の変更をサブミットします。ソート、グループの変更、フィルタリング条件、ページングなどが含まれます。
行編集が終了した後に集計が更新されます。同様にソートやフィルタリングなどの他の機能が有効になります。

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

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

テキストのカスタマイズ

テンプレート化を使用した行編集オーバーレイのテキストのカスタマイズが可能です。

RowChangesCount プロパティが公開されて変更されたセルのカウントを保持します。

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;
}

デモ

既知の問題と制限

グリッドに primaryKey が設定されておらず、リモートデータシナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモートサーバーへのリクエストがトリガーされる場合）、データ要求が完了すると、行は次の状態を失います:

行の選択
行の展開/縮小
行の編集
行のピン固定

API リファレンス

rowEditable
RowEditEnter
RowEdit
RowEditDone
endEdit
field
editable
primaryKey
IgcGridComponent

その他のリソース

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