Ag-grid hacks 1 - getting updated rows

Prologue

Implementing ag-grid functionalities can be quite frustrating at times especially when you are handling the enterprise version, the ag-grid hacks series will be considerate in reducing implementation time and reducing the extent of frustration that may arise scavenging the internet for sample implementations.

Introduction

To all who are not familiar: Ag-grid is a library to implement data grids and charts in your project , where data changes can be in real time as well, the community version is free while you need to pay a hefty amount to get the enterprise version which is loaded with more features.

Problem Statement

It becomes difficult at times to get the list of all recent rows in the from of objects while dealing with an editable ag-grid as there is no straight api like getUpdatedRows() in ag grid documentation though we can trigger a method when cell value changes.
Link

Solution

Consider the following piece of code:

import React from 'react'
import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-community/dist/styles/ag-grid.css'
import 'ag-grid-community/dist/styles/ag-theme-balham.css'
import { getColumnDefs } from './ColumnDefUtils'

const columnDefs=[
{
      headerName: 'City',
      field: 'type',
      filter: 'text',
      editable: true,
    },
    {
      headerName: 'Population',
      field: 'children',
      filter: 'text',
      editable: true,
    },{
      headerName: 'Currency',
      field: 'children',
      filter: 'text',
      editable: true,
    },

]



class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      rowData: [],
    }
  }

  componentDidMount() {
    methodToFetchDataFromBackend()
      .then((response) => {
        this.setState({ rowData: response.data })
      })
      .catch(() => {})
  }

  getUpdatedRows = () => {
    return this.state.rowData.filter((row) => row.changed === true)
  }

  handleSave = async () => {
    // filter the row data(this.state.rowData) where the changed in true and send ony those objects to backend
    saveMethod(this.getUpdatedRows())
  }

  onCellValueChanged = (params) => {
    this.setState({ saveButtonDisableFlag: false })
    params.node.data['changed'] = true
  }

  render() {
    return (
      <AgGridReact
        columnDefs={columnDefs}
        rowData={this.state.rowData}
        onCellValueChanged={this.onCellValueChanged}
      />
    )
  }
}

Consider the rowData being updated when the component mounts by fetching data from backend. Ag grid api provides an inbuilt method "onCellValueChanged" that is triggered when we edit the grid.
Ag grid api methods: link

The line params.node.data['changed'] = true inserts an extra field to the row object whose cell underwent change.
Note that, here params contains all information about the row and cell.
Here is the sample params object

It contains the oldValue , newValue , the data is the rowData for which the cell belongs.
In the above code getUpdatedRows filters the data by "changed " field and sends only the updated rows to the backend for saving.

This is how one can get hold of updated rows by a simple hack!