Cómo implementar el arrastre de varias filas sin gestionar en ag-grid react?

16 Jul, 2023 Programación 0

He estado tratando de resolver cómo implementar el arrastre de múltiples filas en ag-grid cuando también se utiliza el arrastre de filas sin gestionar. Hasta ahora, tengo funcionando correctamente el arrastre de una sola fila, pero no puedo acceder a la lista de nodos de fila al arrastrar varias.

En los eventos de tipo RowDragEvent que obtengo en mis funciones onRowDragEnter, onRowDragMove, etc., incluso al seleccionar varias filas y arrastrarlas, el valor RowDragEvent.nodes está vacío, cuando debería ser una lista de todos los nodos que se están moviendo. Debido a esto, en la pantalla se muestra como si “mantuviera” varias, pero solo “moviera” una, si eso tiene sentido. Consulte a continuación lo que quiero decir.

(solo está arrastrando “Test 23” cuando también debería arrastrar los otros dos)

¿Podría estar relacionado con no usar las propiedades/configuraciones correctas en mi componente <aggridreact ...=""></aggridreact>? ¿O esta función no está actualmente disponible con el arrastre sin gestionar?

Para contextualizar, mi cuadrícula está agrupada y he agregado parte de mi código a continuación.

// https://www.ag-grid.com/react-data-grid/row-dragging/#example-dragging-with-row-groups
const onRowDragMove = (event: RowDragEvent) => {
  // aquí es donde quiero usar event.nodes, pero siempre está indefinido
  !event.node.group &&
    // funcionalidad adicional aquí para guardar datos en nuestro backend
    rowDragUpdateFn(event, (movingData, changedParams) => {
      gridAPI.applyTransaction({
        update: [movingData],
      });
      gridAPI.clearFocusedCell();
    });
};

<aggridreact ...="" onrowdragenter="{onRowDragEnter}" onrowdragend="{onRowDragEnd}" onrowdragmove="{onRowDragMove}" rowdragentirerow="" rowdragmultirow="" rowselection="{"multiple"}" ...=""></aggridreact>

davy.ai

July 16, 2023 at 2:17 pm

Solución para Arrastrar Múltiples Filas en Ag-Grid con Arrastre de Filas no Gestionado

Si RowDragEvent.nodes está vacío y no devuelve la lista de todos los nodos en movimiento, indica que la propiedad rowDragMultiRow no está configurada correctamente en el componente AgGridReact. Para habilitar el arrastre de múltiples filas en Ag-Grid con arrastre de filas no gestionado, se deben configurar las siguientes propiedades en el componente AgGridReact:

rowDragManaged={false}
rowDragMultiRow={true}
rowDragEntireRow={true}

Además, el código de la función onRowDragMove debe modificarse para obtener la lista de nodos correctamente de la siguiente manera:

const onRowDragMove = (event: RowDragEvent) => {
  // obtener la lista de nodos en movimiento
  const movingNodes = event.api.getSelectedNodes();
  // funcionalidad adicional aquí para guardar datos en nuestro backend si es necesario
  rowDragUpdateFn(event, (movingData, changedParams) => {
    gridAPI.applyTransaction({
      update: [movingData],
    });
    gridAPI.clearFocusedCell();
  });
};

Con estos cambios, la función de arrastre de múltiples filas debería funcionar correctamente en Ag-Grid con arrastre de filas no gestionado.

Answer

davy.ai

July 16, 2023 at 2:17 pm
Solución para Arrastrar Múltiples Filas en Ag-Grid con Arrastre de Filas no Gestionado

Si RowDragEvent.nodes está vacío y no devuelve la lista de todos los nodos en movimiento, indica que la propiedad rowDragMultiRow no está configurada correctamente en el componente AgGridReact. Para habilitar el arrastre de múltiples filas en Ag-Grid con arrastre de filas no gestionado, se deben configurar las siguientes propiedades en el componente AgGridReact:
```
rowDragManaged={false}
rowDragMultiRow={true}
rowDragEntireRow={true}
```
Además, el código de la función onRowDragMove debe modificarse para obtener la lista de nodos correctamente de la siguiente manera:
```
const onRowDragMove = (event: RowDragEvent) => {
  // obtener la lista de nodos en movimiento
  const movingNodes = event.api.getSelectedNodes();
  // funcionalidad adicional aquí para guardar datos en nuestro backend si es necesario
  rowDragUpdateFn(event, (movingData, changedParams) => {
    gridAPI.applyTransaction({
      update: [movingData],
    });
    gridAPI.clearFocusedCell();
  });
};
```
Con estos cambios, la función de arrastre de múltiples filas debería funcionar correctamente en Ag-Grid con arrastre de filas no gestionado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo implementar el arrastre de varias filas sin gestionar en ag-grid react?

Answer

davy.ai