Arrastre de filas en React Grid
La función Ignite UI for React Row Dragging en React Grid es fácilmente configurable y se usa para reorganizar filas dentro de la cuadrícula arrastrándolas y soltándolas en una nueva posición con el mouse. Se inicializa en el componente raíz IgrGrid
y se puede configurar mediante la entrada rowDraggable
.
React Grid Row Drag Example
Configuration
Para habilitar el arrastre de filas para su IgrGrid
, todo lo que necesita hacer es configurar el rowDraggable
de la cuadrícula en true. Una vez que esto esté habilitado, se mostrará un controlador de arrastre de fila en cada fila. Este controlador se puede utilizar para iniciar el arrastre de filas. Al hacer clic en el controlador de arrastre y mover el cursor mientras se mantiene presionado el botón, se activará el evento RowDragStart
de la cuadrícula. Si suelta el clic en cualquier momento, se activará el evento RowDragEnd
.
<IgrGrid rowDraggable="true">
</IgrGrid>
Templating the Drag Icon
El icono del controlador de arrastre se puede crear como plantilla usando dragIndicatorIconTemplate
de la cuadrícula. En el ejemplo que estamos creando, cambiemos el ícono predeterminado (drag_indicator) a drag_handle.
Para hacerlo, podemos usar DragIndicatorIcon
para pasar una plantilla dentro del cuerpo de IgrGrid
:
function dragIndicatorIconTemplate(ctx: IgrGridEmptyTemplateContext) {
return (
<>
<IgrIcon name="drag_handle" collection="material" />
</>
);
}
<IgrGrid rowDraggable="true" dragIndicatorIcon={dragIndicatorIconTemplate}>
</IgrGrid>
Application Demo
Row Reordering Demo
Con la ayuda de los eventos de arrastre de filas de la cuadrícula, puede crear una cuadrícula que le permita reordenar las filas arrastrándolas.
<IgrGrid rowDraggable="true" primaryKey="ID" rowDragEnd={webGridReorderRowHandler}>
</IgrGrid>
[!Note] Make sure that there is a
primaryKey
specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered.
Una vez que rowDraggable
esté habilitado y se haya definido una zona de colocación, debe implementar un controlador simple para el evento de colocación. Cuando se arrastra una fila, verifique lo siguiente:
- ¿Se dejó caer la fila dentro de la cuadrícula?
- Si es así, ¿en qué otra fila se soltó la fila arrastrada?
- Una vez que haya encontrado la fila de destino, intercambie las ubicaciones de los registros en la matriz
data
.
A continuación, puedes ver esto implementado:
function webGridReorderRowHandler(grid: IgrGridBaseDirective, args: IgrRowDragEndEventArgs): void {
const ghostElement = args.detail.dragDirective.ghostElement;
const dragElementPos = ghostElement.getBoundingClientRect();
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
const currRowIndex = this.getCurrentRowIndex(rows,
{ x: dragElementPos.x, y: dragElementPos.y });
if (currRowIndex === -1) { return; }
// remove the row that was dragged and place it onto its new location
grid.deleteRow(args.detail.dragData.key);
grid.data.splice(currRowIndex, 0, args.detail.dragData.data);
}
function getCurrentRowIndex(rowList: any[], cursorPosition) {
for (const row of rowList) {
const rowRect = row.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
// return the index of the targeted row
return parseInt(row.attributes["data-rowindex"].value);
}
}
return -1;
}
¡Con estos sencillos pasos, ha configurado una cuadrícula que permite reordenar filas mediante arrastrar y soltar! Puede ver el código anterior en acción en la siguiente demostración.
Mantener presionado el ícono de arrastrar le permitirá mover una fila a cualquier lugar de la cuadrícula:
Limitations
Actualmente, no existen limitaciones conocidas para rowDraggable
.
API References
rowDraggable
RowDragStart
RowDragEnd
IgrGrid
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.