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.

Note

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 empezar, importa elIgxGridModule archivo en el app.module.ts:

// app.module.ts

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

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

Then define a Grid with bound data source and rowEditable set to true:

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

Note

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

Note

It's not needed to enable editing for individual columns. Using the rowEditable property in the Grid, will mean that all rows, with defined field property, excluding primary one, will be editable. If you want to disable editing for specific column, then you set the editable column's input to false.

import { Component, ViewChild } from '@angular/core';
import { data } from './data';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
// 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;
    }
}

Note

The Grid uses internally a provider IgxBaseTransactionService that holds pending cell changes, until row state submitted or cancelled.

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.

Keyboard Navigation

• EnteryF2 entra en modo de edición de filas

• EscSale del modo de edición de fila y no envía ninguno de los cambios en las celdas que se hicieron mientras la fila estaba en modo edición.

• Tabmover el enfoque de una celda editable de la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y TERMINADO. La navegación desde el botón TERMINADO va a la celda editable más a la izquierda dentro de la fila editada actualmente.

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

Personalizar el texto de la superposición de edición de filas es posible usando eligxRowEditTextDirective. LarowChangesCount propiedad queda expuesta y contiene el conteo de células modificadas.

<ng-template igxRowEditText let-rowChangesCount>
 Changes: {{rowChangesCount}}
</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>

Estilismo

Usando la Ignite UI for Angular Theme Library, podemos modificar considerablemente la superposición de Edición de Filas. La superposición de Edición de Filas es un elemento compuesto: su interfaz está compuesta por un par de componentes más: -igx-bannerpara renderizar su contenido -igx-buttons se renderizan en la plantilla predeterminada (para losDone botones yCancel de ).

In the below example, we will make use of those two components' styling options, button styling & banner-styling, to customize the experience of our IgxGrid's Row Editing. We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in the Cell Styling section.

Import theme

La forma más sencilla de estilizar el banner de Edición de Filas es definir estilos enapp nuestro archivo de estilo global (normalmentestyles.scss). Lo primero que tenemos que hacer es importar elthemes/index archivo; esto nos da acceso a todas las herramientas potentes 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';

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

Definir el tema

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

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

Aquí lo usamosmy-banner-palette junto conigx-color (expuesto por la biblioteca de temas) para generar nuestros colores.

Include the theme

Ahora solo tenemos que aplicar el tema con una frase Sass@include. Pasamos nuestros recién definidos$banner-theme a través de:css-vars mixin​

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

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.

Note

Si el componente utiliza unaEmulated ViewEncapsulation, es necesario penetrar esta encapsulación para::ng-deep estilizar la superposición de edición de filas de la cuadrícula.

// custom.component.scss

:host {
  ::ng-deep {
    @include css-vars($banner-theme);
  }
}

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 estilizar losDone botones yCancel 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>

Después de definir nuestros botones personalizados, podemos usar parabutton-theme estilizarlos. Puedes aprender más sobreigx-button el estilo en la documentación de Estilo de Botones. Podemos crear un tema personalizado para nuestroDone yCancel:

// custom.component.scss
...

$button-theme: button-theme(
  $palette: $purple-palette
);

...
.custom-buttons {
  @include css-vars($button-theme);
}

Ajustamos nuestra@include declaración.custom-buttons para que solo se aplique a losDone botones de andCancel.

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:

Note

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

Known Issues and Limitations

• Cuando la cuadrícula noprimaryKey tiene un sistema fijo y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar o desplazar las solicitudes de disparo a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado tras completar una solicitud de datos:
  • Selección de fila
  • Fila Expandir/contraer
  • Edición de filas
  • Fijación de filas

API References

• filaEditable
• onRowEditEnter
• en fila
• filaEditarHecho
• onRowEditCancel
• fin
• campo
• editable
• Clave primaria
• Componente IgxGrid

Additional Resources

• Cree operaciones CRUD con igxGrid
• Descripción general de la cuadrícula
• Edición de cuadrícula
• Transacciones de red

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub