React Grid Row Editing
La función de edición de filas Ignite UI for React en React cuadrícula permite editar datos directamente dentro de la IgrGrid
. Además de esta cómoda forma de manipular los datos, hay una potente API para operaciones CRUD completas. Puede realizar la edición de filas de cuadrícula haciendo clic en una fila y presionando la tecla Enter. Otra forma rápida es hacer doble clic con el ratón en la fila que hay que modificar.
React Ejemplo de edición de filas de cuadrícula
El siguiente ejemplo demuestra cómo habilitar la edición de filas en IgrGrid
. Cambiar el valor de una celda y luego hacer clic o navegar a otra celda en la misma fila no actualizará el valor de la fila hasta que se confirme usando el botón Listo o se descarte usando el botón Cancelar.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Cuando una fila está en modo de edición, al hacer clic en una celda de otra fila, se activará como si se presionara el botón "Listo", enviando todos los cambios realizados en la fila anterior. Si la celda recién enfocada es editable, la nueva fila también entra en modo de edición. Sin embargo, si la celda no es editable, solo la fila anterior sale del modo de edición.
Uso de edición de filas
Defina un IgrGrid
con una fuente de datos vinculada y rowEditable
establecido en verdadero:
function unitsInStockCellTemplate(ctx: IgrCellTemplateContext) {
return (
<>
<input name="units" value={ctx.dataContext.cell.value} style={{color: "black"}} />;
</>
);
}
<IgrGrid primaryKey="ProductID" width="100%" height="500px" rowEditable="true"
bodyTemplate={unitsInStockCellTemplate}>
<IgrColumn field="ProductID" header="Product ID" editable="false"></IgrColumn>
<IgrColumn field="ReorderLevel" header="ReorderLever" dataType="number"></IgrColumn>
<IgrColumn field="ProductName" header="ProductName" dataType="string"></IgrColumn>
<IgrColumn field="UnitsInStock" header="UnitsInStock" dataType="number"></IgrColumn>
<IgrColumn field="OrderDate" dataType="date"></IgrColumn>
<IgrColumn field="Discontinued" header="Discontinued" dataType="boolean"></IgrColumn>
</IgrGrid>
tsx
La configuración de la clave principal es obligatoria para las operaciones de edición de filas.
No es necesario habilitar la edición de columnas individuales. Con la propiedad rowEditable en IgrGrid, todas las filas con la propiedad de campo definida (excepto la fila principal) serán editables. Si desea deshabilitar la edición de una columna específica, simplemente establezca la entrada editable de esa columna en false.
IgrGrid utiliza BaseTransactionService, un proveedor interno que mantiene los cambios de celda pendientes hasta que se envía o cancela el estado de la fila.
Posicionamiento
La posición predeterminada de la superposición estará debajo de la fila que está en modo de edición.
Si no hay espacio debajo de la fila, aparecerá una superposición encima de la fila.
Una vez que se muestra, arriba o abajo, la superposición mantendrá esta posición durante el desplazamiento, hasta que se cierre la superposición.
Comportamiento
Si la fila está en modo de edición, la edición continuará si se hace clic en una celda de la misma fila.
Al hacer clic en el botón "Listo", finalizará la edición de la fila y enviará los cambios a la fuente de datos o a una transacción, si está disponible. Además, la fila saldrá del modo de edición.
Al hacer clic en el botón "Cancelar", se revertirán todos los cambios actuales en la fila y la fila saldrá del modo de edición.
Si la fila está en modo de edición, al hacer clic en una celda de otra fila finalizará la edición de la fila actual y se enviarán nuevos cambios en la fila (el mismo comportamiento al hacer clic en el botón "Listo"). Si la nueva celda que recibe el foco es editable, entonces la nueva fila también ingresa al modo de edición, mientras que si la celda no es editable, solo la fila anterior sale del modo de edición.
Si la fila está en modo de edición y
IgrGrid
se desplaza de modo que esa fila salga del área visible, esta última seguirá en modo de edición. Cuando se desplazaIgrGrid
, para que la fila vuelva a ser visible, la fila seguirá en modo de edición. Cuando se hace clic fuera deIgrGrid
, la celda también permanecerá en modo de edición.Al realizar operaciones de clasificación, filtrado, búsqueda y ocultación, se revertirán todos los cambios actuales en la fila y la fila saldrá del modo de edición.
Al realizar operaciones de paginación, cambio de tamaño, fijación y movimiento, saldrá del modo de edición y enviará el último valor.
Cada celda modificada obtiene un estilo editado hasta que finaliza la edición de la fila. Este es el comportamiento cuando
IgrGrid
no recibe transacciones. Cuando las transacciones están disponibles, se aplica el estilo de edición de celda hasta que se confirmen todos los cambios.
Navegación por teclado
Ingrese y F2 ingresa al modo de edición de filas
Esc sale del modo de edición de filas y no envía ninguno de los cambios de celda realizados mientras la fila estaba en modo de edición.
Tab mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.
Integración de funciones
Cualquier operación de cambio de datos finalizará las operaciones de edición de filas y enviará los cambios de filas actuales. Esto incluirá operaciones como ordenar, cambiar criterios de agrupación y filtrado, paginación, etc.
Los resúmenes se actualizarán una vez finalizada la edición de la fila. Lo mismo es válido para otras funciones como ordenar, filtrar, etc.
- Expandir y contraer filas agrupadas no finalizará la edición de la fila actual.
Personalización de la superposición de edición de filas
Personalizando el texto
Es posible personalizar el texto de la superposición de edición de filas mediante plantillas.
La propiedad RowChangesCount
está expuesta y contiene el recuento de celdas modificadas.
function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) {
return (
<>
Changes: {ctx.dataContext.implicit}
</>
);
}
tsx
Personalización de botones
También es posible personalizar los botones de la superposición de edición de filas mediante plantillas.
function rowEditActionsTemplate(ctx: IgrGridRowEditActionsTemplateContext) {
const endRowEdit = ctx.dataContext.implicit;
return (
<>
<button onClick={(event) => endRowEdit(false, event)}>Cancel</button>
<button onClick={(event) => endRowEdit(true, event)}>Apply</button>
</>
);
}
tsx
Estilo
Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:
<IgrGrid className="grid"></IgrGrid>
tsx
Luego configure las propiedades CSS relacionadas para esa clase:
.grid {
--ig-banner-banner-background: #e3e3e3;
--ig-banner-banner-message-color: #423589;
}
css
Manifestación
Problemas conocidos y limitaciones
- Cuando la cuadrícula no tiene
primaryKey
establecida y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado después de un dato. solicitud completa:
- Selección de fila
- Fila Expandir/contraer
- Edición de filas
- Fijación de filas
Referencias de API
rowEditable
RowEditEnter
RowEdit
RowEditDone
endEdit
field
editable
primaryKey
IgrGrid
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.