Blazor Hierarchical Grid Row Adding

The Ignite UI for Blazor Row Adding feature in Blazor Hierarchical Grid enables users to input and submit new data records without navigating to a separate form or page. With the IgbHierarchicalGrid, users can manipulate data through inline row adding and a powerful API for CRUD operations. Add an IgbActionStrip component with editing actions enabled in the grid's template. After that hover a row and use the provided button. Finally press ALT + + to spawn the row adding UI.

Blazor Hierarchical Grid Row Adding Example

Row Adding Usage

Then define a IgbHierarchicalGrid with bound data source, RowEditable set to true and an IgbActionStrip component with editing actions enabled. The AddRow input controls the visibility of the button that spawns the row adding UI.

<IgbHierarchicalGrid AutoGenerate="false" Id="hGrid" PrimaryKey="Debut" RowEditable="true">
    <IgbColumn Field="Artist" Header="Artist" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="HasGrammyAward" Header="Has Grammy Award" DataType="GridColumnDataType.Boolean"></IgbColumn>
    <IgbColumn Field="Debut" Header="Debut" DataType="GridColumnDataType.Number"></IgbColumn>
    <IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number"></IgbColumn>
    <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number"></IgbColumn>

    <IgbActionStrip>
        <IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
    </IgbActionStrip>

    <IgbRowIsland AutoGenerate="false" Key="Albums" PrimaryKey="USBillboard200" RowEditable="true">
        <IgbColumn Field="Album" Header="Album" DataType="GridColumnDataType.Number"></IgbColumn>
        <IgbColumn Field="LaunchDate" Header="Launch Date" DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbColumn Field="BillboardReview" Header="Billboard Review" DataType="GridColumnDataType.Number"></IgbColumn>
        <IgbColumn Field="USBillboard200" Header="US Billboard 200" DataType="GridColumnDataType.Number"></IgbColumn>
        <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number"></IgbColumn>

        <IgbRowIsland AutoGenerate="false" Key="Songs" PrimaryKey="Number" RowEditable="true">
            <IgbColumn Field="Number" Header="Number" DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumn Field="Title" DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumn Field="Released" DataType="GridColumnDataType.Date"></IgbColumn>
            <IgbColumn Field="Genre" DataType="GridColumnDataType.String"></IgbColumn>

            <IgbActionStrip>
                <IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
            </IgbActionStrip>
        </IgbRowIsland>

        <IgbActionStrip>
            <IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
        </IgbActionStrip>
    </IgbRowIsland>
</IgbHierarchicalGrid>

Nota: La configuración de la clave principal es obligatoria para las operaciones de adición de filas.

Note: Every column excluding the primary key one is editable in the row adding UI by default. If you want to disable editing for a specific column, then you have to set the Editable column's input to false.

Note: The IgbGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type IgbRowType to fine tune which records the button shows for.

The internal BaseTransactionService is automatically provided for IgbHierarchicalGrid. It holds pending cell changes until the row state is submitted or cancelled.

Start Row Adding Programmatically

IgbHierarchicalGrid allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported.

Using BeginAddRowById requires you to specify the row to use as context for the operation by its RowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing null for the first parameter.

@code {
    await this.grid.BeginAddRowByIdAsync('ALFKI', false);  // Spawns the add row UI under the row with PK 'ALFKI'
    await this.grid.BeginAddRowByIdAsync(null, false);     // Spawns the add row UI as the first record
}

The BeginAddRowByIndex method works similarly but requires you to specify the index at which the UI should spawn. Allowed values range between 0 and the size of the data view - 1.

@code {
    await this.grid.BeginAddRowByIndexAsync(10);   // Spawns the add row UI at index 10
    await this.grid.BeginAddRowByIndexAsync(0);    // Spawns the add row UI as the first record
}

Positioning

La posición predeterminada de la interfaz de usuario para agregar filas está debajo de la fila en la que el usuario final hizo clic en el botón Agregar fila.
The IgbHierarchicalGrid scrolls to fully display the add row UI automatically.
La superposición de la interfaz de usuario para agregar fila mantiene su posición durante el desplazamiento.

Behavior

La interfaz de usuario para agregar filas tiene el mismo comportamiento que la de edición de filas, ya que están diseñadas para brindar una experiencia de edición consistente a los usuarios finales. Consulte el tema Edición de filas de cuadrícula jerárquica para obtener más información.

After a new row is added through the row adding UI, its position and/or visibility is determined by the sorting, filtering and grouping state of the IgbHierarchicalGrid. In a IgbHierarchicalGrid that does not have any of these states applied, it appears as the last record. A snackbar is briefly displayed containing a button the end user may use to scroll the IgbHierarchicalGrid to its position if it is not in view.

ALT + +: ingresa al modo de edición para agregar una fila

ESC sale del modo de agregar filas sin enviar ningún cambio
TAB mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.

Feature Integration

Any row adding operation will stop if the data view of the IgbHierarchicalGrid gets modified. Any changes made by the end user are submitted. Operations that change the data view include but are not limited to sorting, grouping, filtering, paging, etc.
Los resúmenes se actualizan una vez finalizada la operación de agregar filas. Lo mismo es válido para otras funciones dependientes de la vista de datos, como ordenar, filtrar, etc.

When spawning the UI for the IgbHierarchicalGrid, any child layout currently expanded for a row that the end user clicks the add row button for is collapsed.

Customizing Row Adding Overlay

Customizing Text

Customizing the text of the row adding overlay is possible using the RowAddTextTemplate.

<IgbHierarchicalGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate">
</IgbHierarchicalGrid>

@code {
    private RenderFragment<IgbGridEmptyTemplateContext> addTextTemplate = (context) =>
    {
        return @<span>Adding Row</span>;
    };
}

Customizing Buttons

Customizing the buttons of the row editing overlay is possible by using the RowEditActions template.

<IgbHierarchicalGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate">
</IgbHierarchicalGrid>

//In JavaScript:
igRegisterScript("rowEditActionsTemplate", (endRowEdit) => {
    var html = window.igTemplating.html;
    return html`<div class="row-actions">
        <button @click="${evt => endRowEdit.implicit(false, evt)}">Cancel</button>
        <button @click="${evt => endRowEdit.implicit(true, evt)}">Apply</button>
    </div>`
}, false);

Note: Using RowEditActions template will change edit actions for both editing and adding overlay buttons.

Styling

The row adding UI comprises the buttons in the IgbActionStrip editing actions, the editing editors and overlay, as well as the snackbar which allows end users to scroll to the newly added row. To style these components you may refer to these comprehensive guides in their respective topics:

API References

RowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
EndEdit
PrimaryKey
IgbHierarchicalGrid

Additional Resources

Edición de cuadrícula jerárquica

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

Blazor Hierarchical Grid Row Adding