Blazor Tree Grid Batch Editing and Transactions

The Batch Editing feature of the IgbTreeGrid is based on the HierarchicalTransactionService.

Below is a detailed example of how is Batch Editing enabled for the IgbTreeGrid component.

Blazor Tree Grid Batch Editing and Transactions Example

The following sample demonstrates a scenario, where the IgbTreeGrid has IgbTreeGrid.BatchEditing enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed.

Usage

You need to enable IgbTreeGrid.BatchEditing from your Tree Grid:

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

This will ensure a proper instance of Transaction service is provided for the IgbTreeGrid. The proper IgbTransactionService is provided through a TransactionFactory.

After batch editing is enabled, define a IgbTreeGrid with bound data source and IgbTreeGrid.RowEditable set to true and bind:

<IgbTreeGrid @ref="grid" BatchEditing="true" Data=data PrimaryKey=primaryKey ForeignKey="PID" Width="100%" Height="500px"
    RowEditable="true">
</IgbTreeGrid>
<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 IgbTreeGrid 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();
    }
}

The following code demonstrates the usage of the HierarchicalTransactionService API - undo, redo, commit.

export class TreeGridBatchEditingSampleComponent {
    @ViewChild('treeGrid', { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent;

    public undo() {
        /* exit edit mode and commit changes */
        this.treeGrid.endEdit(true);
        this.treeGrid.transactions.undo();
    }

    public redo() {
        /* exit edit mode and commit changes */
        this.treeGrid.endEdit(true);
        this.treeGrid.transactions.redo();
    }

    public commit() {
        this.treeGrid.transactions.commit(this.data);
        this.dialog.close();
    }
}

export class GridBatchEditingSampleComponent {
    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    }

    public undo() {
        /* exit edit mode and commit changes */
        this.treeGrid.endEdit(true);
        this.treeGrid.transactions.undo();
    }

    public redo() {
        /* exit edit mode and commit changes */
        this.treeGrid.endEdit(true);
        this.treeGrid.transactions.redo()
    }

    public commit() {
        this.treeGrid.transactions.commit(this.data);
        this.toggle.close();
    }
}

Deleting a parent node in IgbTreeGrid has some peculiarities. If you are using a hierarchical data, the children will be deleted when deleting their parent. If you are using a flat data, you may set the desired behavior using the CascadeOnDelete property of IgbTreeGrid. This property indicates whether the child records should be deleted when their parent gets deleted (by default, it is set to true).

API References

Additional Resources

• Tree Grid Editing
• Tree Grid Row Editing
• Tree Grid Row Adding

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub