Row Actions in Blazor Hierarchical Grid

The Ignite UI for Blazor Row Actions feature in Blazor Hierarchical Grid enables developers to use an IgbActionStrip and utilize CRUD for row/cell components and row pinning. There are several predefined UI controls for these operations that are applicable to a specific row in the IgbHierarchicalGrid – editing and pinning.

Usage

The predefined actions UI components are:

• IgbGridEditingActions - includes functionality and UI specifically designed for the IgbHierarchicalGrid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the IgbHierarchicalGrid.RowEditable option and row deletion of the IgbHierarchicalGrid.

• IgbGridPinningActions - includes functionality and UI specifically designed for the IgbHierarchicalGrid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.

They are added inside the IgbHierarchicalGrid and this is all needed to have an IgbActionStrip providing default interactions.

<IgbGrid Data=northwindEmployees RowEditable="True" PrimaryKey="ID">
    @foreach (var c in columns)
    {
        <IgbColumn Field="@c.Field">
        </IgbColumn>
    }
    <IgbActionStrip @ref=actionstrip>
        <IgbGridPinningActions></IgbGridPinningActions>
        <IgbGridEditingActions></IgbGridEditingActions>
    </IgbActionStrip>
</IgbGrid>

<IgbHierarchicalGrid Data=northwindEmployees RowEditable="True" PrimaryKey="ID">
    @foreach (var c in columns)
    {
        <IgbColumn Field="@c.Field">
        </IgbColumn>
    }
    <IgbActionStrip @ref=actionstrip>
        <IgbGridPinningActions></IgbGridPinningActions>
        <IgbGridEditingActions></IgbGridEditingActions>
    </IgbActionStrip>
</IgbHierarchicalGrid>

Custom Implementation

These components expose templates giving flexibility for customization. For instance, if we would like to use the IgbActionStrip for a Gmail scenario with row actions such as delete, edit and etc. You can simply create button component with icon, add click event to it and insert it into the IgbActionStrip.

<div class="grid__wrapper">
    <IgbHierarchicalGrid Data=northwindEmployees>
        <IgbActionStrip @ref=actionstrip>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbGridEditingActions
                EditRow="true"
                DeleteRow="true"
                AddRow="true">
            </IgbGridEditingActions>
        </IgbActionStrip>
    </IgbHierarchicalGrid>
</div>

API References