React Hierarchical Grid セル編集

React Hierarchical Grid の Ignite UI for React セル編集機能は、React Hierarchical Grid コンポーネント内の個々のセルのコンテンツの優れたデータ操作機能を提供し、React CRUD 操作用の強力な API を備えています。これはスプレッドシート、データ テーブル、データ グリッドなどのアプリの基本的な機能であり、ユーザーが特定のセル内のデータを追加、編集、更新できるようにします。 デフォルトでは、Ignite UI for React の Grid がセル編集に使用されます。また、デフォルトのセル編集テンプレートにより、列のデータ型 「Top of Form」 に基づいて異なるエディターが存在します。

さらに、データ更新アクション用の独自のカスタム テンプレートを定義したり、変更をコミット/破棄したりするためのデフォルトの動作をオーバーライドすることもできます。

React Hierarchical Grid セル編集と編集テンプレートの例

セルの編集

UI を介した編集

編集可能なセルがフォーカスされたときに以下のいずれかの方法で特定のセルを編集モードにすることができます。

• ダブル クリック
• シングル クリック - 以前選択したセルが編集モードで現在選択したセルが編集可能な場合のみ、シングル クリックで編集モードに入ります。以前選択したセルが編集モードではない場合、編集モードに入らずにシングル クリックでセルを選択します。
• ENTER キーの押下
• F2 キーの押下

変更をコミットしない場合も以下の方法で編集モードを終了できます。

• Escape キーの押下;
• ソート、フィルターリング、検索、非表示操作の実行時。

変更をコミットしない場合も以下の方法で編集モードを終了できます。

• ENTER キーの押下
• F2 キーの押下
• TAB キーの押下
• 他のセルをシングル クリック - IgrHierarchicalGrid で他のセルをクリックしたときに変更がサブミットされます。
• その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。

API を介した編集

プライマリキーが定義されている場合のみ IgrHierarchicalGrid API でもセル値を変更することができます。

セルを更新するその他の方法として Cell の Update メソッドで直接更新する方法があります。

セル編集テンプレート

デフォルトのセル編集テンプレートの詳細については、編集トピックを参照してください。

そして、テンプレートを index.ts ファイルのこの列に渡します。

<IgbColumn
    Field="Race"
    DataType="GridColumnDataType.String"
    InlineEditorTemplateScript="WebGridCellEditCellTemplate"
    Editable="true"
    Name="column1"
    @ref="column1">
</IgbColumn>

そして、テンプレートを index.ts ファイルのこの列に渡します。

<IgbColumn
    Field="Category"
    DataType="GridColumnDataType.String"
    InlineEditorTemplateScript="WebGridCellEditCellTemplate"
    Editable="true"
    Name="column1"
    @ref="column1">
</IgbColumn>

そして、テンプレートを index.ts ファイルのこの列に渡します。

CRUD 操作

IgrHierarchicalGrid は基本的な CRUD 操作のための簡易な API を提供します。

新しいレコードの追加

IgrHierarchicalGrid コンポーネントは、提供したデータをデータ ソースに追加する AddRow メソッドを公開します。

データを Hierarchical Grid で更新

Hierarchical Grid のデータ更新は、グリッドで PrimaryKey が定義されている場合のみ UpdateRow と UpdateCell メソッドで行うことができます。セルと行の値またはそのいずれかを各 update メソッドで直接更新できます。

Hierarchical Grid からデータを削除

DeleteRow メソッドは、PrimaryKey が定義されている場合に指定した行のみを削除することに注意してください。

// Delete row through Grid API
this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
const row = this.hierarchicalGrid.getRowByIndex(rowIndex);
row.delete();

IgrHierarchicalGrid に関係なく、ボタンのクリックなどのユーザー インタラクションに関連付けできます。

編集イベントでのセル検証

IgrHierarchicalGrid の編集イベントを使用して、ユーザーが IgrHierarchicalGrid を操作する方法を変更できます。

この例では、CellEdit イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします。

最初に必要なことは、グリッドのイベントにバインドすることです。

<IgrHierarchicalGrid onCellEdit={handleCellEdit}>
</IgrHierarchicalGrid>

CellEdit は、セルの値がコミットされる直前に発生します。CellEdit の定義では、アクションを実行する前に特定の列を確認する必要があります。

If the value entered in a cell under the Units On Order column is larger than the available amount (the value under Units in Stock), the editing will be cancelled and the user will be alerted to the cancellation.

public handleCellEdit(event: IgrGridEditEventArgs): void {
    const detail = args.detail;
    if (detail.column != null && d.column.field == "UnitsOnOrder") {
        if (detail.newValue > detail.rowData.UnitsInStock) {
            detail.cancel = true;
            alert("You cannot order more than the units in stock!");
        }
    }
}

ここでは、2 つの列を検証しています。ユーザーが従業員の Age (年齢、18 歳未満) または Hire Date (雇用日、将来の日付) に無効な値を設定しようとすると、編集がキャンセルされ (値は送信されません)、エラー メッセージ付きのトースターが表示されます。

スタイル設定

事前定義されたテーマに加えて、利用可能な CSS プロパティを設定することでグリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgrHierarchicalGrid className="hierarchicalGrid"></IgrHierarchicalGrid>

Then set the related CSS properties for that class:

.hierarchicalGrid {
    --ig-grid-edit-mode-color: #FFA500;
    --ig-grid-cell-active-border-color: #FFA500;
    --ig-grid-cell-editing-background: #add8e6;
}

スタイル設定の例

API リファレンス

パレットの定義