Web Components Edición de cuadrícula de árbol

The Ignite UI for Web Components Cell Editing feature in Web Components Tree Grid provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The IgcTreeGridComponent provides you with a powerful public API which allows you to customize the way these operations are performed. The data manipulation phases are:

Edición de celdas
Edición de filas
Edición por lotes (próximamente)

Setup

In order to specify which edit mode should be enabled, the IgcTreeGridComponent exposes the following boolean properties - editable and RowEditable.

The editable property enables you to specify the following options:

falso: se deshabilitará la edición de la columna correspondiente. Este es el valor predeterminado.
verdadero: se habilitará la edición de la columna correspondiente.

Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the IgcTreeGridComponent.

The RowEditable property enables you to specify the following options:

falso: se deshabilitará la edición de filas en la cuadrícula correspondiente. Este es el valor predeterminado.
verdadero: se habilitará la edición de filas en la cuadrícula correspondiente.

In the IgcTreeGridComponent, if you set RowEditable property to true, and the editable property is not explicitly defined for any column, the editing will be enabled for all the columns except the primary key.

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

If you want to use a data type specific edit templates, you should specify the column's dataType property. So let's now see what are the default templates for each type:

For string data type, default template is using IgcInputComponent.
For number data type, default template is using IgcInputComponent type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0.
For date data type, default template is using IgcDatePickerComponent
For dateTime data type, default template is using DateTimeEditor. This editor will give you a mask directions for the input elements part of the DateTime object.
For time - data type, default template is using TimePicker.
For boolean data type, default template is using IgcCheckboxComponent.
For currency data type, default template is using InputGroup with prefix/suffix configuration based on application or grid locale settings.
For percent data type, default template is using InputGroup with suffix element that shows a preview of the edited value in percents.

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`	Si`RowEditing` está habilitado, se activa cuando una fila ingresa al modo de edición	`IgcGridEditEventArgs`	*verdadero-
`CellEditEnter`	Se activa cuando una celda ingresa al modo de edición (después de`RowEditEnter`)	`IgcGridEditEventArgs`	*verdadero-
`CellEdit`	Si se cambia el valor, se dispara justo antes de que se confirme el valor de una celda (por ejemplo, presionando `ENTER`)	`IgcGridEditEventArgs`	*verdadero-
`CellEditDone`	Si se cambia el valor, se activa después de que una celda haya sido editada y el valor de la celda esté *comprometido-	`IgcGridEditDoneEventArgs`	*falso-
`CellEditExit`	Se dispara cuando una celda *sale del modo de edición-	`IgcGridEditDoneEventArgs`	*falso-
`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)	`IgcGridEditEventArgs`	*verdadero-
`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.	`IgcGridEditDoneEventArgs`	*falso-
`RowEditExit`	Si`RowEditing` está activado, se activa cuando una fila *sale del modo de edición-	`IgcGridEditDoneEventArgs`	*falso-

Event Cancellation

RowEditEnter - Neither Row nor Cell will enter edit mode.
CellEditEnter - Prevents entering cell edit. If RowEditable is enabled, row edit will be triggered, although cell edit will remain forbidden.
CellEdit - Allowed Cell and/or Row edit, hitting Done button or Enter won't commit the value or row transaction. Cell editing and Row editing won't be closed until Cancel button is clicked.
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:

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:

Cuadrícula de árbol	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:

<igc-tree-grid id="grid" primary-key="ProductID" >
</igc-tree-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.addEventListener("sorting", this.onSorting);
}

public onSorting(event: IgcSortingEventArgs) {
    var grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.endEdit(true);
}

API References

IgcTreeGridComponent