Acciones de fila en Angular Data Grid

El componente de cuadrícula en Ignite UI for Angular brinda la capacidad de usar ActionStrip y utilizar CRUD para componentes de filas/celdas y fijación de filas. El componente Action Strip puede albergar controles de interfaz de usuario predefinidos para estas operaciones.

Usage

El primer paso es importar el IgxActionStripModule en nuestro archivo app.module.ts:

// app.module.ts

...
import { IgxActionStripModule } from 'igniteui-angular';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxActionStripModule],
    ...
})

Los componentes de la interfaz de usuario actions predefinidas son:

• IgxGridEditingActionsComponent: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la edición de cuadrículas. 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 de la cuadrícula.

• IgxGridPinningActionsComponent: incluye funcionalidad y interfaz de usuario diseñadas específicamente para fijar filas de cuadrícula. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.

Se agregan dentro de <igx-action-strip> y todo esto es necesario para tener una Action Strip que proporcione interacciones predeterminadas.

<igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
    <igx-column *ngFor="let c of columns" [field]="c.field">
    </igx-column>

    <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>
</igx-grid>

Note

Cuando IgxActionStripComponent es un componente secundario de la cuadrícula, al pasar el cursor sobre una fila se mostrará automáticamente la interfaz de usuario.

Custom implementation

Estos componentes exponen plantillas que brindan flexibilidad para la personalización. Por ejemplo, si quisiéramos utilizar el ActionStrip para un escenario de Gmail con acciones de fila como delete, edit y etc. Simplemente puede crear un componente de botón con igx-icon, agréguele el evento de clic e insértelo en el igx-action-strip componente.

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

Note

Las acciones predefinidas heredan IgxGridActionsBaseDirective y, al crear un componente de acción de cuadrícula personalizado, también debe heredar IgxGridActionsBaseDirective.

API References

Para obtener información más detallada sobre la API Action Strip, consulte los siguientes enlaces:

• IgxActionStripComponent API

Componentes y/o directivas adicionales que se pueden utilizar dentro de Action Strip:

• IgxGridActionsBaseDirective
• IgxGridPinningActionsComponent
• IgxGridEditingActionsComponent
• IgxDividerDirective