Acciones de fila en la cuadrícula Web Components

    La función Ignite UI for Web Components Acciones de fila en Web Components Grid permite a los desarrolladores usar IgcActionStrip y utilizar CRUD para los componentes de fila/celda y el anclaje de filas. Hay varios controles de interfaz de usuario predefinidos para estas operaciones que son aplicables a una fila específica en la edición y el IgcGridComponent anclaje.

    Usage

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

    • IgcGridEditingActions: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la edición IgcGridComponent. Le permite alternar rápidamente el modo de edición para celdas o filas, según la opción rowEditable y la eliminación de filas del IgcGridComponent.

    • IgcGridPinningActions: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la fijación de filas IgcGridComponent. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.

    Se agregan dentro de la IgcGridComponent y todo esto es necesario para tener un IgcActionStrip proporcionar 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, lo que brinda flexibilidad para la personalización. Por ejemplo, si queremos usar el para un escenario de Gmail con acciones de fila IgcActionStrip como eliminar, editar, etc. Simplemente puede crear un componente de botón con un icono, agregarle un evento de clic e insertarlo en el IgcActionStrip.

    <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.