0

Question on ReactJS...

I need to have 2 ag-grids next to each other where the first one displays master records and the second one displays child records.

When a row is selected in the first ag-grid, the second ag-grid (which originally shows all child records) will filter down to display only the relevant child records pertaining to the selected master record in the first ag-grid table.

Example,

  • table # 1 : country
  • table # 2 : metropolitan cities

When page loads, table # 1 and table # 2 both show all countries and all metropolitan cities

When user clicks on, say, "India" in table # 1, the table # 2 will show the list of metropolitan cities in India only.

Some guidance in how to achieve this will be greatly appreciated.

beedeegeezz
  • 29
  • 6

1 Answers1

2

Suppose we have a parent component which renders two child grid components, the first grid for selecting a row and the second grid to filter based on the selected row.

  1. In the parent component, provide a callback to the first grid component as props, so that the grid can notify the parent when the selected row has changed.

  2. Also in the parent component, provide a prop value to the second grid component which receives the current selected row:

const GridExample = () => {
  const [filter, setFilter] = useState(null);
  return (
    <div style={{ height: '100%', width: '100%', display: 'flex' }}>
      <CountryGrid filterHasChanged={setFilter} />
      <CityGrid currentFilter={filter} />
    </div>
  );
};

In the first grid, use the Grid Event onSelectionChanged to know when a row has been selected, and then simply pass this selected row to the parent via the callback provided above:

  const selectionChanged = (params) => {
    const selectedRows = params.api.getSelectedRows()[0];

    // create an object for the filterModel to be applied in the City Grid
    const filterModel = {
      country: {
        values: [selectedRows.country],
      },
    };

    props.filterHasChanged(filterModel);
  };

Then inside the second grid, listen to the changes via a useEffect hook and call gridApi.setFilterModel to set the filter whenever the selected row changes:

Documentation on Filter Models:

  useEffect(() => {
    if(props.currentFilter) {
      gridApi.setFilterModel(props.currentFilter)
    }
  }, [props.currentFilter]);

See this implemented in the following sample.

Note: that the sample is not using a country / city dataset, however it shows the main principle of how you would go about achieving two grids communicating with each other.

Shuheb
  • 2,012
  • 1
  • 4
  • 6
  • Thanks for this !! Is it not possible to push the selected row details from the Country grid into Redux and have an useEffect in the City grid which fires on change in state.selectedCOuntryRow ? – beedeegeezz Jul 26 '21 at 03:35
  • when I declare the const selectionChanged at my end with the = (params) =>, I am getting an error on "params" that says parameter "params" implicitly has an any type – beedeegeezz Jul 26 '21 at 06:17
  • With regards to using Redux, yes it will work just fine. I didn't use any particular store in the example to showcase the principle but it will work with Redux. And it sounds like you're using typescript, so you should supply (params:any) instead or use the defined type: https://github.com/ag-grid/ag-grid/blob/b54c6f9eaef8f1f87c7ab4872430f441112910d9/community-modules/core/src/ts/entities/gridOptions.ts#L554 – Shuheb Jul 26 '21 at 08:35