React Tree Grid セル編集

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

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

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

セルの編集

UI を介した編集

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

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

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

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

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

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

API を介した編集

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

public updateCell() {
    this.grid1.updateCell(newValue, rowID, 'ReorderLevel');
}

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

this.grid.UpdateCell(newValue, rowID, 'ReorderLevel')

セル編集テンプレート

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

そして、テンプレートを 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 操作

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

新しいレコードの追加

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

// Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data.
const record = this.getNewRecord();
this.grid.addRow(record);

データを Tree Grid で更新

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

Tree Grid からデータを削除

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

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

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

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

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

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

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

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

public webTreeGridCellEdit(args: IgrGridEditEventArgs): void {
    const column = args.detail.column;

    if (column.field === 'Age') {
        if (args.detail.newValue < 18) {
            args.detail.cancel = true;
            alert('Employees must be at least 18 years old!');
        }
    } else if (column.field === 'HireDate') {
        if (args.detail.newValue > new Date().getTime()) {
            args.detail.cancel = true;
            alert('The employee hire date must be in the past!');
        }
    }
}

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

スタイル設定

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

<IgrTreeGrid className="treeGrid"></IgrTreeGrid>

Then set the related CSS properties for that class:

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

スタイル設定の例

IgrTreeGrid で Ignite UI for React テーマ ライブラリ を使用してセルのスタイルを設定できます。グリッドの theme は、ユーザーがグリッドのさまざまな側面をスタイル設定できる広範なプロパティを公開します。

API リファレンス

パレットの定義