Cómo agregar filas en una cuadrícula de árbol Angular

    La cuadrícula de árbol proporciona una forma conveniente de realizar manipulaciones de datos mediante la adición de filas en línea y una API potente para operaciones CRUD Angular. Agregue un componente Action Strip con acciones de edición habilitadas en la plantilla de la cuadrícula, pase el cursor sobre una fila y use el botón provisto, presione ALT + + para generar la interfaz de usuario de adición de filas o ALT + SHIFT + + para generar la interfaz de usuario para agregar un elemento secundario para la fila seleccionada.

    Angular Tree Grid Row Adding Example

    El siguiente ejemplo demuestra cómo habilitar la adición de filas nativas en la cuadrícula de árbol. 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 empezar, importa elIgxTreeGridModule archivo en el app.module.ts:

    // app.module.ts

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

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

    Luego define una Tree Grid con la fuente de datos vinculada yrowEditable configurada en true y un componente Action Strip con acciones de edición activadas. LaaddRow entrada controla la visibilidad del botón que genera la fila añadiendo la interfaz.

    <igx-tree-grid igxPreventDocumentScroll [data]="data"
    primaryKey="ID" foreignKey="ParentID" [rowEditable]="true">
    <igx-column [field]="'Name'" dataType="string"></igx-column>
    <igx-column [field]="'Title'" dataType="string"></igx-column>
    <igx-column [field]="'HireDate'" dataType="date"></igx-column>
    <igx-column [field]="'OnPTO'" dataType="boolean" width="130px">
        <ng-template igxCell let-cell="cell" let-val>
            <igx-icon [color]="cell.row.data.OnPTO? 'red': 'green'">account_circle</igx-icon>
        </ng-template>
    </igx-column>
    <igx-column [field]="'Age'" dataType="number"></igx-column>
    <igx-action-strip #actionstrip>
        <igx-grid-editing-actions [addRow]="true" [addChild]="actionstrip.context?.treeRow.level < 2">
        </igx-grid-editing-actions>
    </igx-action-strip>
</igx-tree-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, añadiendo la interfaz de usuario por defecto. Si quieres desactivar la edición para una columna específica, entonces tienes que configurar laeditable entrada de la columna enfalse.

    Note

    Las entradas IgxGridEditingActions que controlan la visibilidad de los botones de añadir fila y añadir hijos pueden usar el contexto de la tira de acciones (que es de tipoRowType) para ajustar qué registros muestran los botones.

    El internoIgxBaseTransactionService se proporciona automáticamente para Tree Grid. Mantiene los cambios pendientes de celda hasta que se envíe o cancele el estado de la fila.

    Start Row Adding Programmatically

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

    UsarbeginAddRowById requiere que especifiques la fila que vas a usar como contexto para la operación mediante su rowID (PK). El método entonces funciona como si el usuario final hiciera clic en el botón de añadir la acción de la tira para la fila especificada, generando la interfaz debajo de ella. El segundo parámetro controla si la fila se añade como hijo a la fila de contexto o como hermana. También puedes hacer que la interfaz aparezca como la primera fila de la cuadrícula pasandonull por el primer parámetro.

    this.treeGrid.beginAddRowById('ALFKI', true);   // spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowById(null);            // spawns the add row UI as the first record

    ElbeginAddRowByIndex método funciona de forma similar, pero la fila a usar como contexto se especifica mediante el índice.

    this.treeGrid.beginAddRowByIndex(10, true);   // spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null);       // 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 de árbol se desplaza para mostrar completamente la interfaz de usuario para agregar filas automáticamente.

    • 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 la cuadrícula de árbol 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 de árbol. En un Tree Grid al que no se le ha 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 de árbol hasta su posición si no está a la vista.

    Keyboard Navigation

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

    • ALT + SHIFT + + - Enters edit mode for adding a child

    • 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 Tree Grid. 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.

    Customizing Row Adding Overlay

    Customizing Text

    Personalizar el texto de la fila añadiendo superposición es posible usando eligxRowAddTextDirective.

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

    Customizing Buttons

    Es posible personalizar los botones de la superposición de edición de filas usando eligxRowEditActionsDirective. Si quieres que los botones formen parte de la navegación del teclado, entonces cada uno de ellos debería tener eligxRowEditTabStopDirective.

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

    UsarigxRowEditActions directiva cambiará las acciones de edición tanto para la edición como para añadir botones de superposición.

    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 Tree Grid es la siguiente:

    • Si Tree Grid 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 Tree Grid 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 añadir filas comprende los botones en lasIgxActionStrip acciones de edición, los editores de edición y la superposición, así como la barra de snacks que permite a los usuarios finales desplazarse hasta la fila recién añadida. Para estructurar estos componentes, puedes consultar estas guías completas sobre sus respectivos temas:

    API References

    Additional Resources

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