Edición de cuadrícula jerárquica Angular

Ignite UI for Angular componente de cuadrícula jerárquica proporciona una forma sencilla 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. La cuadrícula jerárquica le proporciona 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 a través de la directiva igxCellEditor o las directivas igxRow.

Configuración

In order to specify which edit mode should be enabled, the Hierarchical Grid exposes the following boolean properties - editable and 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 Hierarchical 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 jerárquica, 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.

Editar plantillas

Si quieres usar plantillas de edición específicas de tipo de dato, deberías especificar la propiedad columndataType. Así que veamos ahora cuáles son las plantillas predeterminadas para cada tipo:

Para el tipo destring dato, la plantilla predeterminada usa igxInput
Para el tipo denumber dato, la plantilla por defecto usa igxInput type="number", así que si intentas actualizar la celda a un valor que no se puede analizar a un número, el cambio será descartado y el valor en la celda se pondrá en 0.
Para el tipo dedate dato, la plantilla predeterminada es igxDatePicker
Para el tipo dedateTime dato, la plantilla predeterminada utiliza la directiva IgxDateTimeEditor. Este editor te dará instrucciones de máscara para la parte de elementos de entrada del objeto DateTime.
Para el tipo dedate dato, la plantilla predeterminada utiliza el componente IgxDatePicker.
Paratime el tipo de dato, la plantilla predeterminada utiliza el componente IgxTimePicker.
Para el tipo deboolean dato, la plantilla por defecto es usar igxCheckbox
Para el tipo decurrency dato, la plantilla predeterminada es usar IgxInputGroup con configuración de prefijos/sufijos según la aplicación o la configuración de la zona de cuadrícula.
Para el tipo depercent dato, la plantilla predeterminada utiliza IgxInputGroup con un elemento 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.

Editores de plantillas predeterminados de columnas de fecha y hora

Los editores dedatedateTime plantillas ytime los tipos de datos de columna usan un formato de entrada predeterminado según los de .IgxGridlocale

En caso de que lapipeArgs propiedad objetoformat esté establecida en la columna, se infierirá el formato de entrada de los editores. La condición es que pueda analizarse como conteniendo solo partes numéricas de fecha-hora.

Si el formato de entrada del editor debe estar explícitamente establecido, eleditorOptions objeto de tipoIColumnEditorOptions puede ser apalancado. Acepta unadateTimeFormat propiedad que se utiliza como formato de entrada para los editores ydatedateTimetime los tipos de datos columna.

const editorOptions: IColumnEditorOptions = {
    dateTimeFormat: 'MM/dd/YYYY',
}

<igx-column field="sampleDate" dataType="date" [editorOptions]="editorOptions"></igx-column>

Argumentos y secuencia del evento.

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`	Si`rowEditing` 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 de`rowEditEnter`)	IGridEditEventArgs	`true`
`cellEdit`	Si se cambia el valor, se activa justo antes de que se confirme el valor de una celda (por ejemplo, presionando`Enter`)	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`	Si`rowEditing` 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ón`Done` en la superposición de edición de filas)	IGridEditEventArgs	`true`
`rowEditDone`	Si`rowEditing` 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`	Si`rowEditing` está habilitado, se activa cuando una fila sale del modo de edición	IGridEditDoneEventArgs	`false`

Event cancellation

RowEditEnter- Ni Fila ni Celda entrarán en modo de edición.
CellEditEnter- Impide entrar en la edición de celdas. SirowEditable está activada, se activará la edición de fila, aunque la edición en celda seguirá prohibida.
CellEdit- Permitido la edición de celda/fila, pulsar el botón Hecho o Enter no compromete el valor ni la transacción de fila. La edición de celdas y la edición de filas no se cerrarán hasta que se pulse el botón Cancelar.
RowEdit- Es posible confirmar la celda, pero no toda la fila. La fila permanecerá en modo edición y la transacción de la fila se considerará abierta. Pulsar Terminado no compromete ni cierra la fila. El botón de cancelar cierra el proceso de edición y la transacción sin comprometer los cambios.

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

Integración de características

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:

Cuadrícula jerárquica	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);
}