Edición de cuadrícula Angular

    El componente Ignite UI for Angular Grid proporciona una manera fácil de realizar operaciones de manipulación de datos como crear, actualizar y eliminar registros. Las fases de manipulación de datos son: Edición de celdas, Edición de filas y Edición por lotes. The Grid le ofrece una potente API pública que le permite personalizar la forma en que se realizan estas operaciones. Además, la edición de celdas expone varios editores predeterminados basados en el tipo de datos de la columna, que se pueden personalizar fácilmente mediante la directiva igxCellEditor o las directivas igxRow.

    Setup

    Para especificar qué modo de edición debe habilitarse, Grid expone las siguientes propiedades booleanas: editable y rowEditable.

    La propiedad editable le permite especificar las siguientes opciones:

    • falso: se deshabilitará la edición de la columna correspondiente; /valor por defecto/
    • verdadero: se habilitará la edición de la columna correspondiente;

    Tenga en cuenta que si la columna no es editable, aún puede modificar su valor a través de la API pública expuesta por Grid.

    La propiedad rowEditable le permite especificar las siguientes opciones:

    • falso: se deshabilitará la edición de filas en la cuadrícula correspondiente; /valor por defecto/
    • verdadero: se habilitará la edición de filas en la cuadrícula correspondiente;

    En la cuadrícula, si establece la propiedad rowEditable en verdadero y la propiedad editable no está definida explícitamente para ninguna columna, la edición se habilitará para todas las columnas excepto la clave principal.

    La edición por lotes en la cuadrícula se puede habilitar tanto para el modo de edición de celdas como para el de edición de filas. Para configurar la edición por lotes es necesario proporcionar al grid un TransactionService.

    • Edición de celdas y por lotes: en este escenario, cada modificación de cada celda se conserva por separado y las operaciones de deshacer/rehacer están disponibles a nivel de celda;
    • Edición de filas y por lotes: en este escenario, las modificaciones se conservan a nivel de fila, por lo que las operaciones de deshacer/rehacer no funcionarán para cada celda que se modifique, sino para el grupo de celdas de cada fila.

    Editing Templates

    Si desea utilizar plantillas de edición específicas de un tipo de datos, debe especificar la propiedad dataType de la columna. Entonces veamos ahora cuáles son las plantillas predeterminadas para cada tipo:

    • Para el tipo de datos string, la plantilla predeterminada utiliza igxInput
    • Para el tipo de datos number, la plantilla predeterminada utiliza igxInput type="número", por lo que si intenta actualizar la celda a un valor que no se puede analizar como un número, su cambio se descartará y el valor de la celda será establecido en 0.
    • Para el tipo de datos date, la plantilla predeterminada utiliza igxDatePicker
    • Para el tipo de datos dateTime, la plantilla predeterminada utiliza la directiva IgxDateTimeEditor. Este editor le dará instrucciones de máscara para los elementos de entrada que forman parte del objeto DateTime.
    • Para el tipo de datos date, la plantilla predeterminada utiliza el componente IgxDatePicker.
    • Para el tipo de datos time, la plantilla predeterminada utiliza el componente IgxTimePicker.
    • Para el tipo de datos boolean, la plantilla predeterminada utiliza igxCheckbox
    • Para el tipo de datos currency, la plantilla predeterminada utiliza IgxInputGroup con configuración de prefijo/sufijo basada en la configuración regional de la aplicación o la cuadrícula.
    • Para el tipo de datos percent, la plantilla predeterminada utiliza IgxInputGroup con un elemento de sufijo que muestra una vista previa del valor editado en porcentajes.
    • Para plantillas personalizadas, puede ver el tema Edición de celdas.

    Todos los tipos de datos de columna disponibles se pueden encontrar en el tema oficial Tipos de columna.

    Event arguments and sequence

    La cuadrícula expone una amplia gama de eventos que brindan un mayor control sobre la experiencia de edición. Estos eventos se activan durante el ciclo de vida de Edición de filas y Edición de celdas: al iniciar, confirmar o cancelar la acción de edición.

    Evento Descripción Argumentos Para interrumpir
    rowEditEnter SirowEditing está habilitado, se activa cuando una fila ingresa al modo de edición IGridEditEventArgs true
    cellEditEnter Se activa cuando una celda ingresa al modo de edición (después derowEditEnter) IGridEditEventArgs true
    cellEdit Si se cambia el valor, se activa justo antes de que se confirme el valor de una celda (por ejemplo, presionandoEnter) IGridEditEventArgs true
    cellEditDone Si se cambia el valor, se activa después de que se haya editado una celda y se haya confirmado el valor de la celda. IGridEditDoneEventArgs false
    cellEditExit Se activa cuando una celda sale del modo de edición IGridEditDoneEventArgs false
    rowEdit SirowEditing está habilitado, se activa justo antes de que se confirme el valor de una fila en el modo de edición (por ejemplo, al hacer clic en el botónDone en la superposición de edición de filas) IGridEditEventArgs true
    rowEditDone SirowEditing está habilitado, se activa después de que se haya editado una fila y se haya confirmado el valor de la nueva fila. IGridEditDoneEventArgs false
    rowEditExit SirowEditing está habilitado, se activa cuando una fila sale del modo de edición IGridEditDoneEventArgs false

    Event cancelation

    • RowEditEnter: ni la fila ni la celda ingresarán al modo de edición.
    • CellEditEnter: evita ingresar a la edición de celdas. Si rowEditable está habilitado, se activará la edición de filas, aunque la edición de celdas seguirá prohibida.
    • CellEdit: edición de celda/fila permitida; presionar el botón Listo o Enter no confirmará el valor o la transacción de la fila. La edición de celdas y la edición de filas no se cerrarán hasta que se haga clic en el botón Cancelar.
    • RowEdit: es posible confirmar la celda, pero no toda la fila. La fila permanecerá en modo de edición y la transacción de la fila se considerará abierta. Al presionar Listo no se confirma ni se cierra la fila. El botón Cancelar cierra el proceso de edición y la transacción sin confirmar los cambios.

    El siguiente ejemplo demuestra la secuencia de ejecución de edición en acción:

    Features integration

    Mientras una celda/fila está en modo de edición, un usuario puede interactuar con la cuadrícula de muchas maneras. La siguiente tabla especifica cómo una determinada interacción afecta la edición actual:

    Red Filtración Clasificación Paginación Moviente Fijar Ocultación Agrupar por Cambiar el tamaño Escapar Ingresar F2 Pestaña Clic en la celda Agregar nueva fila/Eliminar/Editar
    Mantener el modo de edición ✔
    Salir del modo de edición ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
    Comprometerse ✔ ✔ ✔ ✔ ✔
    Desechar ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

    Como se ve en la tabla, todas las interacciones, excepto cambiar el tamaño de una columna, finalizarán la edición y descartarán los nuevos valores. En caso de que se confirme el nuevo valor, el desarrollador puede hacerlo en el evento "-ing" de característica correspondiente.

    Ejemplo de cómo confirmar nuevos valores, si el usuario intenta ordenar la columna mientras una celda/fila está en modo de edición:

    <igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" (sorting)="onSorting($event)">
...
</igx-grid>

    public onSorting(event: ISortingEventArgs) {
    this.grid.endEdit(true);
    // (event.owner as IgxGridComponent).endEdit(true);
}

    API References

    Additional Resources