Angular Edición de filas de cuadrícula

    La cuadrícula proporciona una forma conveniente de realizar manipulaciones de datos a través de la edición en línea y una potente API para operaciones CRUD Angular. Haga clic en una fila y presione la tecla Intro o simplemente haga doble clic con el mouse en la fila que debe modificarse.

    Angular Grid Row Editing Example

    El siguiente ejemplo demuestra cómo habilitar la edición de filas en la cuadrícula. Cambiar el valor de una celda y luego hacer clic o navegar a otra celda en la misma fila no actualizará el valor de la fila hasta que se confirme usando el botón Listo o se descarte usando el botón Cancelar.

    EXAMPLE
    TS
    HTML
    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.

    Cuando una fila está en modo de edición, al hacer clic en una celda de otra fila se actuará como si se presionara el botón Listo: envíe todos los cambios de la fila anterior. Si la nueva celda que recibe el foco es editable, entonces la nueva fila también ingresa al modo de edición, mientras que si la celda no es editable, solo la fila anterior sale del modo de edición.

    Row Editing Usage

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

    // app.module.ts
    
    ...
    import { IgxGridModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxGridModule],
        ...
    })
    export class AppModule {}
    typescript

    Luego defina una cuadrícula con fuente de datos vinculada y rowEditable establecida en verdadero:

    <igx-grid [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true">
        <igx-column field="ProductID" header="Product ID" editable="false"></igx-column>
        <igx-column field="ReorderLevel" header="ReorderLever" [dataType]="'number'"></igx-column>
        <igx-column field="ProductName" header="ProductName" [dataType]="'string'"></igx-column>
        <igx-column field="UnitsInStock" header="UnitsInStock" [dataType]="'number'">
            <ng-template igxCellEditor let-cell="cell">
                <input name="units" [(ngModel)]="cell.value" style="color: black" />
            </ng-template>
        </igx-column>
        <igx-column field="OrderDate" [dataType]="'date'"></igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'"></igx-column>
    </igx-grid>
    html

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

    No es necesario habilitar la edición de columnas individuales. El uso de la propiedad rowEditable en la cuadrícula significará que todas las filas, con la propiedad field definida, excluyendo la principal, serán editables. Si desea deshabilitar la edición de una columna específica, establezca la entrada de la columna editable en false.

    import { Component, ViewChild } from '@angular/core';
    import { data } from './data';
    import { IgxGridComponent } from 'igniteui-angular';
    // import { IgxGridComponent } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-grid-row-edit',
        styleUrls: [`grid-row-editing-sample.component.css`],
        templateUrl: 'grid-row-editing-sample.component.html'
    })
    export class GridRowEditSampleComponent {
        @ViewChild('gridRowEdit', { read: IgxGridComponent }) public gridRowEdit: IgxGridComponent;
    
        public data: any[];
    
        constructor() {
            this.data = data;
        }
    }
    typescript

    Grid utiliza internamente un proveedor IgxBaseTransactionService que mantiene los cambios de celda pendientes, hasta que se envía o cancela el estado de la fila.

    Positioning

    • La posición predeterminada de la superposición estará debajo de la fila que está en modo de edición.

    • Si no hay espacio debajo de la fila, aparecerá una superposición encima de la fila.

    • Una vez que se muestra, arriba o abajo, la superposición mantendrá esta posición durante el desplazamiento, hasta que se cierre la superposición.

    Behavior

    • Si la fila está en modo de edición, la edición continuará si se hace clic en una celda de la misma fila.

    • Al hacer clic en el botón "Listo", finalizará la edición de la fila y enviará los cambios a la fuente de datos o a una transacción, si está disponible. Además, la fila saldrá del modo de edición.

    • Al hacer clic en el botón "Cancelar", se revertirán todos los cambios actuales en la fila y la fila saldrá del modo de edición.

    • Si la fila está en modo de edición, al hacer clic en una celda de otra fila finalizará la edición de la fila actual y se enviarán nuevos cambios en la fila (el mismo comportamiento al hacer clic en el botón "Listo"). Si la nueva celda que recibe el foco es editable, entonces la nueva fila también ingresa al modo de edición, mientras que si la celda no es editable, solo la fila anterior sale del modo de edición.

    • Si la fila está en modo de edición y la cuadrícula se desplaza de modo que esa fila salga del área visible, esta última seguirá en modo de edición. Cuando se desplaza la cuadrícula, para que la fila vuelva a ser visible, la fila seguirá en modo de edición. Cuando se hace clic fuera de la cuadrícula, la celda también permanecerá en modo de edición.

    • Al realizar operaciones de clasificación, filtrado, búsqueda y ocultación, se revertirán todos los cambios actuales en la fila y la fila saldrá del modo de edición.

    • Al realizar operaciones de paginación, cambio de tamaño, fijación y movimiento, saldrá del modo de edición y enviará el último valor.

    • Cada celda modificada obtiene un estilo editado hasta que finaliza la edición de la fila. Este es el comportamiento cuando Grid no cuenta con transacciones. Cuando las transacciones están disponibles, se aplica el estilo de edición de celda hasta que se confirmen todos los cambios.

    App Builder | CTA Banner

    Keyboard Navigation

    • Enter y F2 ingresa al modo de edición de filas

    • Esc sale del modo de edición de filas y no envía ninguno de los cambios de celda realizados mientras la fila estaba en modo de edición.

    • 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 cambio de datos finalizará las operaciones de edición de filas y enviará los cambios de filas actuales. Esto incluirá operaciones como ordenar, cambiar criterios de agrupación y filtrado, paginación, etc.

    • Los resúmenes se actualizarán una vez finalizada la edición de la fila. Lo mismo es válido para otras funciones como ordenar, filtrar, etc.

    • Expandir y contraer filas agrupadas no finalizará la edición de la fila actual.

    Customizing Row Editing Overlay

    Customizing Text

    Es posible personalizar el texto de la superposición de edición de filas utilizando igxRowEditTextDirective. La propiedad rowChangesCount está expuesta y contiene el recuento de celdas modificadas.

    <ng-template igxRowEditText let-rowChangesCount>
    	Changes: {{rowChangesCount}}
    </ng-template>
    html

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

    Estilismo

    Usando la biblioteca de temas de Ignite UI for Angular, podemos alterar en gran medida la superposición de edición de filas. La superposición de edición de filas es un elemento compuesto: su interfaz de usuario se compone de un par de otros componentes: -igx-banner para representar su contenido -igx-button s se representan en la plantilla predeterminada (para los Done botones y Cancel).

    En el siguiente ejemplo, haremos uso de las opciones de estilo de esos dos componentes, button styling & banner-styling, para personalizar la experiencia de la edición de filas de nuestro IgxGrid. También diseñaremos el editor y el fondo de la celda actual para que sea más distinto. Puede obtener más información sobre el estilo de celda aquí.

    Import theme

    La forma más fácil de diseñar el banner de edición de filas es definir estilos en app nuestro archivo de estilo global (normalmente styles.scss). Lo primero que tenemos que hacer es importar el themes/index archivo, esto nos da acceso a todas las potentes herramientas del framework Ignite UI for Angular Sass:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    scss

    Una vez que hayamos importado el archivo de temas, podemos crear temas personalizados.

    Definir el tema

    Ahora podemos definir un banner theme personalizado que afectará nuestro fondo de edición de filas y utilizará una de las paletas predefinidas, a saber, $purple-palette:

    $banner-theme: banner-theme(
      $banner-background: #e3e3e3,
      $banner-message-color: color($purple-palette, "secondary", 600)
    );
    scss

    Aquí estamos usando my-banner-palette junto con igx-color (expuesto por la biblioteca de temas) para generar nuestros colores.

    Include the theme

    Todo lo que tenemos que hacer ahora es aplicar el tema con una declaración Sass @include. Pasamos nuestra recién definida $banner-theme a través de css-vars mixin:

    @include css-vars($banner-theme);
    scss

    Component styles

    Dado que la superposición de edición de filas hace uso de muchos temas de otros componentes, el estilo a través de los estilos globales puede afectar a otras partes de nuestra aplicación (por ejemplo, banners, botones, etc.). La mejor manera de evitarlo es limitar el tema del banner al archivo de estilo del componente específico al que se aplica.

    Si el componente utiliza un Emulated ViewEncapsulation, es necesario penetrar en este uso de encapsulación::ng-deep para aplicar estilo a la superposición de edición de filas de la cuadrícula.

    // custom.component.scss
    
    :host {
      ::ng-deep {
        @include css-vars($banner-theme);
      }
    }
    scss

    Con la sintaxis anterior, nuestro tema de banner personalizado se aplica correctamente a la superposición de edición de filas de la cuadrícula.

    Custom Templates

    Para personalizar aún más nuestra superposición de Edición de filas, podemos pasar una plantilla personalizada para poder diseñar los botones Done y Cancel por separado:

    <!-- in component.html -->
    <igx-grid>
        <ng-template igxRowEditActions let-endRowEdit>
            <div class="custom-buttons">
                <button igxIconButton="flat" class="custom-button" igxRowEditTabStop (click)="endRowEdit(false)">
                    <igx-icon>clear</igx-icon>
                </button>
                <button igxIconButton="flat" class="custom-button" igxRowEditTabStop (click)="endRowEdit(true)">
                    <igx-icon>check</igx-icon>
                </button>
            </div>
        </ng-template>
    </igx-grid>
    html

    Una vez que hayamos definido nuestros botones personalizados, podemos utilizar el button-theme para darles estilo. Puede obtener más información sobre el estilo igx-button​ ​aquí. Podemos crear un tema personalizado para nuestro Done y Cancel:

    // custom.component.scss
    ...
    
    $button-theme: button-theme(
      $palette: $purple-palette
    );
    
    ...
    .custom-buttons {
      @include css-vars($button-theme);
    }
    scss

    Ajustamos nuestra declaración @include en.custom-buttons para que solo se aplique a los botones Done y Cancel.

    Demo

    Después de diseñar el banner y los botones, también definimos un estilo personalizado para la celda en modo de edición. El resultado de todos los estilos combinados se puede ver a continuación:

    EXAMPLE
    TS
    HTML
    SCSS

    La muestra no se verá afectada por el tema global seleccionado en Change Theme.

    Known Issues and Limitations

    • Cuando la cuadrícula no tiene un conjunto primaryKey y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado después de un dato. solicitud completa:
      • Selección de fila
      • Fila Expandir/contraer
      • Edición de filas
      • Fijación de filas

    API References

    Additional Resources

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