Angular Tree Grid Editing

Ignite UI for Angular componente Cuadrícula de árbol 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. Tree 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 a través de la directiva igxCellEditor o las directivas igxRow.

Setup

In order to specify which edit mode should be enabled, the Tree 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 Tree 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 de árbol, 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

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

For string data type, default template is using igxInput
For number data type, default template is using igxInput 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 igxDatePicker
For dateTime data type, default template is using IgxDateTimeEditor directive. This editor will give you a mask directions for the input elements part of the DateTime object.
For date data type, default template is using IgxDatePicker component.
For time - data type, default template is using IgxTimePicker component.
For boolean data type, default template is using igxCheckbox
For currency data type, default template is using IgxInputGroup with prefix/suffix configuration based on application or grid locale settings.
For percent data type, default template is using IgxInputGroup with suffix element that shows a preview of the edited value in percents.
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

The template editors of date, dateTime and time column data types use a default input format as per the IgxGrid's locale.

In case the pipeArgs object format property is set on the column, the input format of the editors will be inferred from it. The condition is that it can be parsed as containing numeric date-time parts only.

If the editors input format should be explicitly set, the editorOptions object of type IColumnEditorOptions can be leveraged. It accepts a dateTimeFormat property that is used as input format for the editors of date, dateTime and time column data types.

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

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

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	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 - 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/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 - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting Done does not commit or close the row. Cancel button closes the editing process and the transaction without committing the changes.

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:

<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

buscando