Acciones de fila en Web Components cuadrícula

The Ignite UI for Web Components Row Actions feature in Web Components Grid enables developers to use an IgcActionStrip 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 IgcGridComponent – editing and pinning.

Usage

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

IgcGridEditingActions- incluye funcionalidad e interfaz diseñadas específicamente para laIgcGridComponent 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 deIgcGridComponent filas.
IgcGridPinningActions- incluye funcionalidad e interfaz diseñadas específicamente para elIgcGridComponent fijado de filas. Te permite fijar filas rápidamente y navegar entre filas fijadas y sus equivalentes deshabilitados.

Se añaden dentro de laIgcGridComponent y todo esto es necesario para proporcionarIgcActionStrip interacciones predeterminadas.

<igc-grid row-editable="true" primary-key="ID">
    <igc-column field="field"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

[!Note] When ActionStripComponent is a child component of the IgcGridComponent, 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 elIgcActionStrip 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 elIgcActionStrip.

<igc-grid>
    <igx-action-strip #actionstrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <button title="Edit" igxButton="icon" igxRipple (click)='startEdit(actionstrip.context)'>
            <igx-icon>edit</igx-icon>
        </button>
        <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
            <igx-icon>delete</igx-icon>
        </button>
    </igx-action-strip>
</igc-grid>

<igc-grid>
    <igc-action-strip #actionstrip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions edit-row="true" delete-row="true"></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

API References

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