¿Cuáles son las 4 principales características Angular de manipulación de datos de cuadrícula?

Uno de los propósitos principales de cualquier componente de cuadrícula es trabajar con datos. Esto significa no solo transformarlo y presentarlo de una manera más digerible, sino también proporcionar los medios para actualizarlo con facilidad. Sin embargo, el mantenimiento de una base de datos requiere mucho trabajo. Excepto cuando se utilizan las herramientas adecuadas. En este caso, puede realizar fácilmente operaciones de administración de datos como actualizar, eliminar y crear nuevos registros de datos. Pero esto no siempre es suficiente. ¿Por qué? Porque tener un mecanismo de validación de datos también es una funcionalidad imprescindible.

Un vistazo rápido a la cuadrícula de Ignite UI Angular

Ignite UI for Angular Grid te ofrece una potente API pública que te permite personalizar la forma en que se realizan estas operaciones. Además, cada función de administración de datos expone varios editores predeterminados basados en el tipo de datos de columna que se pueden personalizar fácilmente.

Ahora, directo al grano: las 4 principales funciones de manipulación de datos

Edición de celdas/filas en Angular cuadrícula

De forma predeterminada, la cuadrícula utiliza la edición en la celda y se mostrarán diferentes editores en función del tipo de datos de la columna, gracias a la plantilla de edición de celda predeterminada. Además, puede definir sus propias plantillas personalizadas para las acciones de actualización de datos y anular el comportamiento predeterminado para confirmar y descartar cualquier cambio.

Para habilitar la edición predeterminada, simplemente configure la entrada [editable] en true para las columnas que desea editar.

Puede cambiar fácilmente el modo de edición a Fila con la entrada [rowEditable] en igxGrid. Al cambiar el valor de una celda y, a continuación, hacer clic o desplazarse a otra celda de la misma fila, no se actualizará el valor de la fila hasta que se confirme mediante el botón Listo o se descarte mediante el botón Cancelar.

Más de estas características:

• La cuadrícula expone una amplia gama de eventos que proporcionan un mayor control sobre la experiencia de edición. Estos eventos se activan durante el ciclo de vida de la edición de filas y la edición de celdas, al iniciar, confirmar o cancelar la acción de edición.
• 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

Angular Edición por lotes de cuadrícula con transacciones

La función de edición por lotes de IgxGrid se basa en un servicio de transacciones. Gracias al marco de Angular, la creación de un servicio de transacciones de este tipo es fácil y fácil de mantener. El servicio de transacciones es un middleware inyectable (a través de Angular DI) que un componente puede usar para acumular cambios sin afectar inmediatamente a los datos subyacentes.

Puede aprovechar el Servicio de transacciones al utilizar cualquier componente que necesite conservar el estado de su origen de datos y confirmar muchas transacciones a la vez.

El servicio de transacciones permite agregar transacciones. Después de agregar al menos una transacción, puede confirmar o borrar todos los cambios o los cambios de un solo registro. Mantiene un registro detallado y puede ejecutar operaciones de deshacer y rehacer.

Cada vez que se ejecuta una operación (transacción), se agrega al registro de transacciones y a la pila de deshacer. Todos los cambios en el registro de transacciones se acumulan por registro. A partir de ese momento, el servicio mantiene un estado agregado que consta solo de operaciones de adición, actualización y eliminación de registros únicos.

Angular Mecanismos de validación de datos de cuadrícula

La edición de cuadrícula expone un mecanismo de validación integrado de la entrada del usuario al editar celdas/filas. Amplía la funcionalidad de validación de formularios Angular para permitir una integración más fácil con una funcionalidad conocida. Cuando cambia el estado del editor, se aplican indicadores visuales a la celda editada.

Ampliamos algunas de las directivas de validación de Angular Forms para que funcionen directamente con IgxColumn. Los mismos validadores están disponibles como atributos que se establecerán declarativamente en igx-column. Los siguientes validadores son compatibles de forma predeterminada:

• requerido
• mín.
• máximo
• correo electrónico
• longitud mínima
• longitud máxima
• patrón

Para validar que se establecerá una entrada de columna y que el valor se formateará como un correo electrónico, puede utilizar las directivas relacionadas:

<igx-column [field]="email" [header]="User E-mail" required email><

En el ejemplo siguiente se muestra cómo usar las directivas de validador required, email y min predefinidas en una cuadrícula.

Angular Adición de filas de cuadrícula

La cuadrícula proporciona una forma conveniente de realizar manipulaciones de datos a través de la adición de filas en línea y una potente API para Angular operaciones CRUD. Agregue un componente de la tira de acciones con acciones de edición habilitadas en la plantilla de la cuadrícula, coloque el cursor sobre una fila y use el botón proporcionado. O presione "ALT" + "+" para generar la fila que agrega la interfaz de usuario.

En el ejemplo siguiente se muestra cómo habilitar la adición de filas nativas en la cuadrícula. Al cambiar el valor de una celda y, a continuación, hacer clic o desplazarse a otra celda de la misma fila no se actualiza el valor de la fila hasta que se confirma mediante el botón Listo o se descarta mediante el botón Cancelar.

Envolver

El componente Grid en Ignite UI for Angular (y en general) desempeña un papel crucial en la gestión de datos porque:

• Permite la visualización eficiente de grandes conjuntos de datos.
• Ofrece funciones integradas de clasificación, filtrado y otras.
• Proporciona una serie de funciones de manipulación de datos para que pueda modificar los datos directamente de forma eficaz.
• Le ayuda a garantizar actualizaciones en tiempo real del conjunto de datos subyacente, etc.

Si bien la administración de una base de datos puede ser un desafío, el uso de las herramientas adecuadas ricas en funciones (como Ignite UI Angular componentes) puede simplificar significativamente el proceso. De esta manera, puede ejecutar casi sin esfuerzo operaciones críticas de administración de datos, como editar, eliminar y crear nuevos registros de datos, además de implementar un mecanismo de validación de datos en su cuadrícula Angular.

Si necesitas más detalles, te animamos a que consultes nuestro:

• Canal de discordia
• Discusiones de GitHub
• Mapa vial
• Canal de YouTube
• Twitter

Para experimentar todo, visite el portal del cliente y obtenga la última versión. Como de costumbre, siempre estamos emocionados de recibir sus comentarios y escuchar lo que desea agregar o recomendar. Así que envíeme un correo electrónico a zkolev@infragistics.com y hágame saber cómo podemos ayudarlo a continuar brindando valor a sus clientes con Infragistics.