aggrid update cell

[swuecho]

// Assume 'gridOptions' is your ag-Grid configuration object
const gridOptions = {
  // other configuration settings...
  rowModelType: 'serverSide',
  serverSideStoreType: 'partial',
  // other server-side row model settings...
};

// Function to update a cell value
function updateCellValue(rowNodeId: string, colKey: string, newValue: any) {
  // 1. Update data on the server (Assuming you have an API endpoint for updating data)
  updateDataOnServer(rowNodeId, colKey, newValue)
    .then(() => {
      // 2. Refresh the grid
      const api = gridOptions.api;
      const columnApi = gridOptions.columnApi;

      // 3. Use ag-Grid API to refresh specific rows (optional, depending on your requirements)
      // api.refreshCells({ rowNodes: [api.getRowNode(rowNodeId)], columns: [colKey] });

      // 4. Or, refresh the entire grid
      api.refreshServerSideStore({
        purge: true, // clear all cache
        route: '/your-server-side-api-endpoint', // server-side endpoint to fetch updated data
      });
    })
    .catch((error) => {
      console.error('Error updating cell value:', error);
    });
}

// Example function to update data on the server
function updateDataOnServer(rowNodeId: string, colKey: string, newValue: any): Promise<void> {
  // Make an API call to update data on the server
  // You can use libraries like Axios or fetch for this purpose
  const updateEndpoint = '/your-server-update-api-endpoint';
  const requestBody = {
    rowNodeId,
    colKey,
    newValue,
  };

  // Return a Promise to handle asynchronous updates
  return fetch(updateEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // Add any additional headers as needed
    },
    body: JSON.stringify(requestBody),
  }).then((response) => {
    if (!response.ok) {
      throw new Error('Failed to update data on the server');
    }
  });
}