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

El componente de cuadrícula de árbol de Ignite UI for Angular proporciona la capacidad de utilizar ActionStrip y CRUD para los componentes de fila/celda y la fijación de filas. El componente Action Strip puede alojar 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/action-strip';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

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

Los componentes predefinidosactions de la interfaz son:

• IgxGridEditingActionsComponent- incluye funcionalidad e interfaz diseñadas específicamente para la edición en cuadrícula. Te permite cambiar rápidamente el modo de edición para celdas o filas, dependiendo de larowEditable opción y la eliminación de filas de la cuadrícula.

• IgxGridPinningActionsComponent- incluye funcionalidad e interfaz diseñadas específicamente para el fijamiento de filas en cuadrícula. Te permite fijar filas rápidamente y navegar entre filas fijadas y sus equivalentes deshabilitados.

Se añaden dentro del<igx-action-strip> y todo esto es necesario para tener una Action Strip que proporcione interacciones predeterminadas.

<igx-tree-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-tree-grid>

Note

CuandoIgxActionStripComponent es un componente hijo de la cuadrija, al pasar el cursor por una fila se muestra automáticamente la interfaz.

Custom implementation

Estos componentes exponen plantillas que ofrecen flexibilidad para la personalización. Por ejemplo, si queremos usar elActionStrip para un escenario de Gmail con acciones en filas comodelete,edit etc. Simplemente puedes crear un componenteigx-icon de botón, añadir un evento de clic e insertarlo en eligx-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 heredanIgxGridActionsBaseDirective y, al crear un componente de acción de cuadrícula personalizado, también debe heredarIgxGridActionsBaseDirective.

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