Acciones de fila en la cuadrícula de datos Angular

El componente de cuadrícula de Ignite UI for Angular proporciona la capacidad de utilizar ActionStrip y utilizar 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';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

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

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

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

import { Component, ViewChild } from '@angular/core';
import { IgxGridComponent, RowType, Transaction, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';
import { DATA } from '../../data/nwindData';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';


@Component({
    selector: 'app-grid-row-action-strip',
    styleUrls: [`grid-action-strip-sample.scss`],
    templateUrl: 'grid-action-strip-sample.html',
    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class GridActionStripSampleComponent {
    @ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;

    public data: any[];
    public discardedTransactionsPerRecord: Map<number, Transaction[]> = new Map<number, Transaction[]>();

    constructor() {
        this.data = DATA;
    }

    public isDirty(rowContext: RowType) {
        const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key);
        return rowContext && (rowContext.deleted || isRowEdited);
    }

    public isDeleted(rowContext: RowType) {
        return rowContext && rowContext.deleted;
    }

    public inEditMode(rowContext: RowType) {
        return rowContext && rowContext.inEditMode;
    }

    public startEdit(rowContext: RowType): void {
        const firstEditable = rowContext.cells.filter(cell => cell.editable)[0];
        const grid = rowContext.grid;

        if (grid.rowList.filter(r => r === rowContext).length !== 0) {
            grid.gridAPI.crudService.enterEditMode(firstEditable);
            firstEditable.activate(null);
        }
    }

    public commit(rowContext: RowType) {
        this.grid.transactions.commit(this.grid.data, rowContext.key);
        this.discardedTransactionsPerRecord.set(rowContext.key, []);
    }

    public redo(rowContext: RowType) {
        const rowID = rowContext.key;
        const lastDiscarded = this.discardedTransactionsPerRecord.get(rowID);
        lastDiscarded.forEach((transaction) => {
            const recRef = this.grid.gridAPI.get_rec_by_id(transaction.id);
            this.grid.transactions.add(transaction, recRef);
        });
        this.discardedTransactionsPerRecord.set(rowID, []);
    }

    public hasDiscardedTransactions(rowContext: RowType) {
        if (!rowContext) { return false; }
        const lastDiscarded = this.discardedTransactionsPerRecord.get(rowContext.key);
        return lastDiscarded && lastDiscarded.length > 0;
    }

    public undo(rowContext: RowType) {
        const transactionsToDiscard = this.grid.transactions.getAggregatedChanges(true)
        .filter(x => x.id === rowContext.key);
        this.discardedTransactionsPerRecord.set(rowContext.key, transactionsToDiscard);
        this.grid.transactions.clear(rowContext.key);
    }
}
ts

<div class="grid__wrapper">
  <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" [primaryKey]="'ProductID'" width="100%"
    height="500px" [rowEditable]="true" [batchEditing]="true" [allowFiltering]="true">
    <igx-column field="ProductID" header="Product ID" [pinned]="true" [hidden]="true" [filterable]="false">
    </igx-column>
    <igx-column field="ProductName" header="Product Name" dataType="string" [sortable]="true"></igx-column>
    <igx-column field="UnitPrice" header="Unit Price" dataType="currency" [sortable]="true"></igx-column>
    <igx-column field="UnitsOnOrder" header="Units On Order" dataType="number" [editable]="false"
    [filterable]="false"></igx-column>
    <igx-column field="UnitsInStock" header="Units In Stock" dataType="number" [sortable]="true"></igx-column>
    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" dataType="string" [filterable]="false">
    </igx-column>
    <igx-column field="ReorderLevel" header="Reorder Level" dataType="number" [filterable]="false"></igx-column>
    <igx-column field="Discontinued" header="Discontinued" dataType="boolean" [filterable]="false">
    </igx-column>
    <igx-action-strip #actionstrip>
      <igx-grid-pinning-actions></igx-grid-pinning-actions>
      @if (!inEditMode(actionstrip.context)) {
        <button title="Edit" igxIconButton="flat" igxRipple
          (click)='startEdit(actionstrip.context)'>
          <igx-icon>edit</igx-icon>
        </button>
        @if (isDirty(actionstrip.context)) {
          <button title="Undo All" igxIconButton="flat" igxRipple
            (click)='undo(actionstrip.context)'>
            <igx-icon>undo</igx-icon>
          </button>
        }
        @if (!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)) {
          <button title="Redo All" igxIconButton="flat" igxRipple
            (click)='redo(actionstrip.context)'>
            <igx-icon>redo</igx-icon>
          </button>
        }
        @if (isDirty(actionstrip.context)) {
          <button title='Save' igxIconButton="flat" igxRipple
            (click)='commit(actionstrip.context)'>
            <igx-icon>save</igx-icon>
          </button>
        }
        @if (!isDeleted(actionstrip.context)) {
          <button title="Delete" igxIconButton="flat" igxRipple
            (click)='actionstrip.context.delete()'>
            <igx-icon>delete</igx-icon>
          </button>
        }
      }
    </igx-action-strip>
  </igx-grid>
</div>
html

.grid__wrapper {
    margin: 15px;
}
scss

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

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:

Acciones de fila en la cuadrícula de datos Angular

Usage

Custom implementation

API References

Tematización