Premium

Blazor Grid 一括編集とトランザクション

以下は、IgbGrid コンポーネントに対して一括編集を有効にする方法の詳細な例です。

Blazor Grid 一括編集とトランザクションの例

次のサンプルは、IgbGrid で BatchEditing が有効になっており、行編集が有効になっているシナリオを示しています。行編集全体を確定後にトランザクションが追加されるようにします。

トランザクションステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。

使用方法

Grid から BatchEditing を有効にする必要があります。

<IgbGrid Data=data BatchEditing="true">
</IgbGrid>

これにより、Transaction サービスの適切なインスタンスが IgbGrid に提供されます。適切な IgbTransactionService は TransactionFactory を通じて提供されます。

一括編集を有効にした後、バインドされたデータソースと RowEditable を true に設定して IgbGrid を定義し、バインドします:

<IgbGrid @ref="grid" BatchEditing="true" Data=data PrimaryKey=primaryKey Width="100%" Height="500px"
    RowEditable="true">
</IgbGrid>
<button @onclick="OnCommitClick" disabled="@grid.transactions.getAggregatedChanges(false).length < 1">Commit</button>
<button @onclick="OnUndoClick" disabled="!@grid.transactions.canUndo">Undo</button>
<button @onclick="OnRedoClick" disabled="!@grid.transactions.canRedo">Redo</button>
@code {
    private string primaryKey = "ProductID";
    private IgbGrid grid;

    protected override async Task OnInitializedAsync() => forecasts = await ForecastService.GetForecastAsync(DateTime.Now);

    private void OnCommitClick(MouseEventArgs e)
    {
        this.grid.transactions.commit(this.data);
    }

    private void OnUndoClick(MouseEventArgs e)
    {
        this.grid.transactions.undo();
    }

    private void OnRedoClick(MouseEventArgs e)
    {
        this.grid.transactions.redo();
    }
}

以下のコード例は、IgbTransactionService API (undo、redo、commit) の使用方法を示します。

トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、IgbGrid は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで EndEdit を呼び出すことです。

RowEditable プロパティを無効にすると IgbGrid.RowEditable を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。

API リファレンス

IgbGrid

Transactions

Our community is active and always welcoming to new ideas.