AG Grid: Solucionando el Problema de Value Setter que No Actualiza los Datos Subyacentes

En el desarrollo de aplicaciones web, es común trabajar con tablas de datos dinámicas donde los usuarios pueden interactuar y modificar los valores de ciertas celdas. AG Grid es una biblioteca poderosa que permite la creación de estas tablas. Sin embargo, a veces nos encontramos con problemas, como cuando el "value setter" no actualiza los datos subyacentes. En este artículo, abordaremos este problema específico y cómo solucionarlo.

Entendiendo el Problema

Al intentar aplicar una fórmula básica para calcular el "costo total" multiplicando la "cantidad" por el "costo", es posible que notes que, aunque se visualiza correctamente en la tabla, los datos subyacentes no reflejan estos cambios. Esto ocurre típicamente cuando el "value setter" no está configurado adecuadamente para actualizar el objeto de datos original después de que el usuario edita un valor.

Ejemplo de Código

A continuación, se presenta un ejemplo básico de cómo establecer la estructura de la tabla en AG Grid:

let gridApi;

const gridOptions = {
    rowData: [ { item: "Camisa", quantity: 10, cost: 2.00 , total: 20.00 } ],
    columnDefs: [
        { field: "item" },
        { field: "quantity", headerName: 'Cantidad', editable: true },
        { field: "cost", headerName: 'Costo', editable: true },
        {
            field: "total",
            headerName: 'Costo Total',
            editable: false,
            valueGetter: params => params.data.quantity * params.data.cost,
            valueSetter: params => {
                params.data.total = params.newValue;
                return true;
            },
        },
    ],
};

document.addEventListener("DOMContentLoaded", function () {
    const gridDiv = document.querySelector("#myGrid");
    gridApi = agGrid.createGrid(gridDiv, gridOptions);
});

$("#ButtonDisplayData").click(function () {
    const allRowData = [];
    gridApi.forEachNode(node => allRowData.push(node.data));

    console.log(allRowData);
    console.log(gridOptions.rowData);
});

Solución al Problema del Value Setter

Para que el "value setter" actualice los datos subyacentes correctamente, es crucial realizar los siguientes pasos:

1. Clonación de Parámetros: Al modificar los datos, asegúrate de que estás trabajando con una copia del objeto, como se recomienda en la documentación.
2. Actualización de los Datos: Cambia el valor en el objeto de datos original y luego utiliza params.node.setData() para que AG Grid se entere de los cambios.

Aquí tienes un código de muestra revisado:

valueSetter: params => {
    const colId = params.colDef.colId;
    const paramsCopy = { ...params.data }; // Clonación del objeto
    paramsCopy[colId] = params.newValue;   // Actualización del valor
    params.node.setData(paramsCopy);        // Establecer nuevos datos en el nodo
    return true;
},

Probando la Solución

Una vez que hayas implementado estos cambios, asegúrate de probar la funcionalidad editando la "cantidad" o el "costo" para observar si ahora el "costo total" refleja los cambios en los datos subyacentes. Puedes usar el botón que mostramos en el código anterior para mostrar los datos de todas las filas en la consola y verificar que la manipulación de datos se esté llevando a cabo correctamente.

Conclusión

La capacidad de actualizar datos subyacentes en AG Grid es esencial para mantener la coherencia y la integridad de los datos en las aplicaciones. Si te encuentras con el problema en el que el "value setter" no actualiza los datos subyacentes, sigue los pasos mencionados en este artículo. Con la implementación correcta, será posible mantener sincronizados los datos mostrados y los datos subyacentes, mejorando así la experiencia del usuario en tu aplicación.