Blazor Hierarchical Grid セル編集

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

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

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

セルの編集

UI を介した編集

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

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

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

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

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

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

API を介した編集

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

@code {
    this.hierarchicalGrid.UpdateCell(newValue, rowID, 'ReorderLevel');
}

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

@code {
    private UpdateCell() {
        IgbCell cell = this.hierarchicalGrid.GetCellByColumn(rowIndex, "ReorderLevel");
        cell.Update(70);
    }
}

セル編集テンプレート

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

セルに適用されるカスタム テンプレートを提供する場合は、そのテンプレートをセル自体またはそのヘッダーに渡すことができます。まず、通常どおりに列を作成します。

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

そしてテンプレートを渡します:

constructor() {
    var class = this.class = document.getElementById('class') as IgcColumnComponent;

    this._bind = () => {
        class.inlineEditorTemplateRef = this.classEditTemplate;
    }
    this._bind();
}

public classEditTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <igc-select class="cell-select" value="${ctx.cell.value}" >
        </igc-select>
    `;
}

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

CRUD 操作

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

新しいレコードの追加

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

@code {
    //Assuming we have a `GetNewRecord` method returning the new row data.
    const record = this.GetNewRecord();
    this.HierarchicalGridRef.AddRow(record);
}

データを Hierarchical Grid で更新

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

@code {
    // Updating the whole row
    this.hierarchicalGrid.UpdateRow(newData, this.selectedCell.cellID.rowID);

    // Just a particular cell through the Tree Grid API
    this.hierarchicalGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);

    // Directly using the cell `update` method
    this.selectedCell.Update(newData);

    // Directly using the row `update` method
    IgbRowType row = this.hierarchicalGrid.GetRowByKey(rowID);
    row.Update(newData);
}

Hierarchical Grid からデータを削除

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

@code {
    // Delete row through Grid API
    this.hierarchicalGrid.DeleteRow(this.selectedCell.cellID.rowID);
    // Delete row through row object
    IgbRowType row = this.hierarchicalGrid.GetRowByIndex(rowIndex);
    row.Del();
}

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

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

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

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

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

<IgbHierarchicalGrid CellEditScript="HandleCellEdit" />

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

Age (年齢) 列の下のセルに入力された値が 18 未満である場合、または HireDate (雇用日) 列の値が将来の場合、編集はキャンセルされ、ユーザーにキャンセルについての警告が表示されます。

// In JavaScript
igRegisterScript("HandleCellEdit", (ev) => {
    const today = new Date();
    const column = event.detail.column;
    if (column.field === 'Debut') {
        if (event.detail.newValue > today.getFullYear()) {
            event.detail.cancel = true;
            alert('The debut date must be in the past!');
        }
    } else if (column.field === 'LaunchDate') {
        if (event.detail.newValue > today) {
            event.detail.cancel = true;
            alert('The launch date must be in the past!');
        }
    }
}, false);

Here, we are validating two columns. If the user tries to change an artist’s Debut year or an album’s Launch Date, the grid will not allow any dates that are greater than today.

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

スタイル設定

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

<IgbHierarchicalGrid Class="hierarchicalGrid"></IgbHierarchicalGrid>

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 リファレンス

パレットの定義