Acciones de fila en la cuadrícula de árbol Blazor

    The Ignite UI for Blazor Row Actions feature in Blazor Tree 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 IgbTreeGrid – editing and pinning.

    Usage

    Los componentes de la interfaz de usuario de acciones predefinidas son:

    • IgbGridEditingActions- incluye funcionalidad e interfaz diseñadas específicamente para laIgbTreeGrid edición. Te permite cambiar rápidamente el modo de edición para celdas o filas, dependiendo de laRowEditable opción y la eliminación deIgbTreeGrid filas.

    • IgbGridPinningActions- incluye funcionalidad e interfaz diseñadas específicamente para elIgbTreeGrid fijado de filas. Te permite fijar filas rápidamente y navegar entre filas fijadas y sus equivalentes deshabilitados.

    Se añaden dentro de laIgbTreeGrid y todo esto es necesario para proporcionarIgbActionStrip interacciones predeterminadas.

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

    [!Note] When ActionStripComponent is a child component of the IgbTreeGrid, hovering a row will automatically show the UI.

    Custom Implementation

    Estos componentes exponen plantillas que ofrecen flexibilidad para la personalización. Por ejemplo, si queremos usar elIgbActionStrip para un escenario de Gmail con acciones de fila como eliminar, editar, etc. Simplemente puedes crear un componente de botón con icono, añadir un evento de clic e insertarlo en elIgbActionStrip.

    <div class="grid__wrapper">
    <IgbTreeGrid Data=northwindEmployees>
        <IgbActionStrip @ref=actionstrip>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbButton Title="Edit" @onclick="() => StartEdit(actionstrip.Context)">
                <IgbIcon>edit</IgbIcon>
            </IgbButton>
            @if (!IsDeleted(actionstrip.Context))
            {
                <IgbButton Title="Delete" @onclick="() => Delete(actionstrip.Context)">
                    <IgbIcon>delete</IgbIcon>
                </IgbButton>
            }
        </IgbActionStrip>
    </IgbTreeGrid>
</div>

    API References

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