Agregar filas en una cuadrícula jerárquica Angular

La cuadrícula jerárquica proporciona una manera conveniente de realizar manipulaciones de datos mediante la adición de filas en línea y una potente API para operaciones Angular CRUD. Agregue un componente Action Strip con acciones de edición habilitadas en la plantilla de la cuadrícula, coloque el cursor sobre una fila y use el botón proporcionado o presione ALT + + para generar la fila agregando la interfaz de usuario.

Angular Hierarchical Grid Row Adding Example

El siguiente ejemplo demuestra cómo habilitar la adición de filas nativas en la cuadrícula jerárquica. Cambiar el valor de una celda y luego hacer clic o navegar a otra celda en la misma fila no actualiza el valor de la fila hasta que se confirma usando el botón Listo o se descarta usando el botón Cancelar.

Row Adding Usage

Para comenzar, importe IgxHierarchicalGridModule en el archivo app.module.ts:

// app.module.ts

...
import { IgxHierarchicalGridModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxHierarchicalGridModule],
    ...
})
export class AppModule {}

Luego defina una cuadrícula jerárquica con fuente de datos vinculada y rowEditable establecida en verdadero y un componente Action Strip con acciones de edición habilitadas. La entrada addRow controla la visibilidad del botón que genera la interfaz de usuario que agrega la fila.

<igx-hierarchical-grid igxPreventDocumentScroll [data]="localdata"
    [autoGenerate]="false" [primaryKey]="'Debut'" [rowEditable]="true">
    <igx-column field="Artist" [dataType]="'string'"></igx-column>
    <igx-column field="HasGrammyAward" header="Has Grammy Award?" [dataType]="'boolean'">
    </igx-column>
    <igx-column field="Debut" dataType="number"></igx-column>
    <igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number"></igx-column>
    <igx-column field="GrammyAwards" header="Grammy Awards" dataType="number"></igx-column>

    <igx-action-strip #actionstrip1>
        <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
    </igx-action-strip>

    <igx-row-island [key]="'Albums'" [autoGenerate]="false" [primaryKey]="'USBillboard200'" [rowEditable]="true">
        <igx-column field="Album" [dataType]="'string'"></igx-column>
        <igx-column field="LaunchDate" header="Launch Date" [dataType]="'date'"></igx-column>
        <igx-column field="BillboardReview" header="Billboard Review" dataType="number"></igx-column>
        <igx-column field="USBillboard200" header="US Billboard 200" dataType="number"></igx-column>
        <igx-row-island [key]="'Songs'" [autoGenerate]="false" [primaryKey]="'Number'" [rowEditable]="true">
            <igx-column field="Number" header="No." dataType="number"></igx-column>
            <igx-column field="Title" [dataType]="'string'"></igx-column>
            <igx-column field="Released" [dataType]="'date'"></igx-column>
            <igx-column field="Genre" [dataType]="'string'"></igx-column>

            <igx-action-strip #actionstrip3>
                <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
            </igx-action-strip>

        </igx-row-island>

        <igx-action-strip #actionstrip2>
            <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
        </igx-action-strip>
    </igx-row-island>
</igx-hierarchical-grid>

Note

La configuración de la clave principal es obligatoria para las operaciones de adición de filas.

Note

Cada columna, excepto la clave principal, se puede editar en la fila que agrega la interfaz de usuario de forma predeterminada. Si desea deshabilitar la edición de una columna específica, debe establecer la entrada de la columna editable en false.

Note

La entrada IgxGridEditingActions que controla la visibilidad del botón Agregar fila puede usar el contexto de la tira de acción (que es de tipo RowType) para ajustar qué registros muestra el botón.

El IgxBaseTransactionService interno se proporciona automáticamente para Hierarchical Grid. Mantiene los cambios de celda pendientes hasta que se envía o cancela el estado de la fila.

Start Row Adding Programmatically

Hierarchical Grid permite generar mediante programación la interfaz de usuario para agregar filas utilizando dos métodos públicos diferentes. Uno que acepta un ID de fila para especificar la fila bajo la cual debe generarse la interfaz de usuario y otro que funciona por índice. Puede utilizar estos métodos para generar la interfaz de usuario en cualquier lugar dentro de la vista de datos actual. No se admite cambiar la página ni especificar una fila que, por ejemplo, esté filtrada.

El uso beginAddRowById requiere que especifique la fila que se utilizará como contexto para la operación mediante su ID de fila (PK). Luego, el método funciona como si el usuario final hiciera clic en el botón agregar fila de acción para la fila especificada, generando la interfaz de usuario debajo de ella. También puede hacer que la interfaz de usuario se genere como la primera fila de la cuadrícula pasando null para el primer parámetro.

this.grid.beginAddRowById('ALFKI');  // spawns the add row UI under the row with PK 'ALFKI'
this.grid.beginAddRowById(null);     // spawns the add row UI as the first record

El método beginAddRowByIndex funciona de manera similar, pero requiere que especifiques el índice en el que debe generarse la interfaz de usuario. Los valores permitidos oscilan entre 0 y el tamaño de la vista de datos: 1.

this.grid.beginAddRowByIndex(10);   // spawns the add row UI at index 10
this.grid.beginAddRowByIndex(0);    // spawns the add row UI as the first record

Positioning

• La interfaz de usuario para agregar fila de posición predeterminada está debajo de la fila para la que el usuario final hizo clic en el botón Agregar fila.

• La cuadrícula jerárquica se desplaza para mostrar completamente la interfaz de usuario para agregar filas de forma automática.

• La superposición de la interfaz de usuario para agregar fila mantiene su posición durante el desplazamiento.

Behavior

La interfaz de usuario para agregar filas tiene el mismo comportamiento que la de edición de filas, ya que están diseñadas para brindar una experiencia de edición consistente a los usuarios finales. Consulte el tema Edición de filas de cuadrícula jerárquica para obtener más información.

Después de agregar una nueva fila a través de la interfaz de usuario que agrega filas, su posición y/o visibilidad está determinada por el estado de clasificación, filtrado y agrupación de la cuadrícula jerárquica. En una Cuadrícula Jerárquica que no tiene aplicado ninguno de estos estados, aparece como el último registro. Se muestra brevemente una barra de refrigerios que contiene un botón que el usuario final puede usar para desplazar la cuadrícula jerárquica a su posición si no está a la vista.

Keyboard Navigation

• ALT + +: ingresa al modo de edición para agregar una fila

• ESC sale del modo de agregar filas sin enviar ningún cambio

• TAB mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.

Feature Integration

• Cualquier operación de adición de filas se detendrá si se modifica la vista de datos de la cuadrícula jerárquica. Se envían todos los cambios realizados por el usuario final. Las operaciones que cambian la vista de datos incluyen, entre otras, ordenar, agrupar, filtrar, paginar, etc.

• Los resúmenes se actualizan una vez finalizada la operación de agregar filas. Lo mismo es válido para otras funciones dependientes de la vista de datos, como ordenar, filtrar, etc.

• Al generar la interfaz de usuario para cuadrículas jerárquicas, se contrae cualquier diseño secundario actualmente expandido para una fila en la que el usuario final hace clic en el botón Agregar fila.

Customizing Row Adding Overlay

Customizing Text

Es posible personalizar el texto de la fila agregando superposición usando igxRowAddTextDirective.

<ng-template igxRowAddText>
	Adding Row
</ng-template>

Customizing Buttons

Es posible personalizar los botones de la superposición de edición de filas utilizando igxRowEditActionsDirective. Si desea que los botones formen parte de la navegación del teclado, cada uno de ellos debe tener igxRowEditTabStopDirective.

<ng-template igxRowEditActions let-endRowEdit>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>

Note

El uso de la directiva igxRowEditActions cambiará las acciones de edición tanto para editar como para agregar botones superpuestos.

Remote scenarios

En la mayoría de los escenarios de datos remotos, la asignación de la clave principal se produce en la solicitud de creación del servidor. En este caso, los registros agregados en el cliente no tendrán el valor de clave primaria final hasta que se guarden en la base de datos del servidor. En ese caso, la forma recomendada de manejar esta actualización en la Cuadrícula Jerárquica es la siguiente:

• Si la Cuadrícula Jerárquica no utiliza transacciones.

  Una vez que la solicitud de creación se completa con éxito y devuelve los datos del registro agregado, puede reemplazar la identificación de ese registro en la instancia del registro de datos local.

• Si la Cuadrícula Jerárquica utiliza transacciones.

  Una vez que la solicitud de creación o la solicitud de actualización por lotes se completa con éxito y devuelve las instancias de registro agregadas (con sus identificadores generados por la base de datos), las transacciones ADD relacionadas deben borrarse del registro de transacciones utilizando el método API de borrado. Esto es necesario porque la transacción local tendrá un campo de identificación generado, que puede diferir del creado en la base de datos, por lo que deben borrarse. Luego puede agregar los registros pasados en la respuesta a la instancia de datos local.

Esto garantizará que los identificadores generados de forma remota siempre se reflejen en los datos locales y que las operaciones de actualización/eliminación posteriores tengan como objetivo los identificadores de registro correctos.

Estilismo

La interfaz de usuario para agregar filas comprende los botones en las acciones de edición IgxActionStrip, los editores de edición y la superposición, así como la barra de bocadillos que permite a los usuarios finales desplazarse a la fila recién agregada. Para diseñar estos componentes, puede consultar estas guías completas en sus respectivos temas:

• Edición de filas de cuadrícula jerárquica
• IgxSnackbar
• IgxAcciónTira

API References

• filaEditable
• onRowEditEnter
• en fila
• filaEditarHecho
• onRowEditCancel
• fin
• Clave primaria
• Componente IgxHierarchicalGrid
• Componente IgxActionStrip
• Componente IgxGridEditingActions

Additional Resources

• Descripción general de la cuadrícula jerárquica
• Edición de cuadrícula jerárquica
• Transacciones de cuadrícula jerárquica

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

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub