---
title: "Master / Detail - Detail Refresh"
enterprise: true
framework: react
version: "36.1.0"
---

# Master / Detail - Detail Refresh

It is desirable for the Detail Grid to refresh when fresh data is available for it. The grid will attempt to refresh the data in the Detail Grid when the parent Master Grid row is updated.

The update actions that cause the Detail Rows to refresh are as follows:

- A change to [Row Data](https://www.ag-grid.com/react-data-grid/data-update-row-data/) updates the parent row and [Row IDs](https://www.ag-grid.com/react-data-grid/row-ids/) are provided*.
- A [Transaction Update](https://www.ag-grid.com/react-data-grid/data-update-transactions/) updates the parent row.
- The method `rowNode.setRowData(data)` is called on the parent row's [Row Node](https://www.ag-grid.com/react-data-grid/row-object/).

> **Note**
>
> *If Row IDs are not provided, the grid will not match rows and treat the new Row Data as a new set. In this case, all rows are destroyed and re-created.

How the refresh occurs depends on the Refresh Strategy set on the Detail Cell Renderer. There are three Refresh Strategies which are as follows:

1. **Refresh Rows** - The detail panel calls `getDetailRowData(params)` again and sets the row data in the Detail Grid by using its `setRowData` grid API. This will keep the Detail Grid instance thus any changes in the Detail Grid (scrolling, column positions, etc.) will be kept. If the Detail Grid has [getRowId()](https://www.ag-grid.com/react-data-grid/row-ids/) implemented, then more grid context will be kept such as row selection, etc.

1. **Refresh Everything** - The Detail Panel will get destroyed and a fresh Detail Panel will be redrawn. This will result in `getDetailRowData(params)` getting called again. The Detail Grid will be a new instance and any changes in the Detail Grid (scrolling, column position, row selection, etc.) will be lost. Use this option if you want a fresh detail grid instance.

1. **Do Nothing** - The Detail Panel will do nothing. The method `getDetailRowData(params)` will not be called. If any refresh is required within the detail grid, this will need to be handled independently by the application. Use this if your refresh requirements are not catered for by the other two options.

The strategy is set via the `refreshStrategy` parameter of the Detail Cell Renderer params. Valid values are `rows` for Refresh Rows, `everything` for Refresh Everything and `nothing` for Refresh Nothing. The default strategy is Refresh Rows.

Below are different examples to demonstrate each of the refresh strategies. Each example is identical with the exception of the refresh strategy used. Note the following about each example:

- The grid refreshes the first master row every two seconds as follows:
  - The call count is incremented.
  - Half of the call records (displayed in the detail grid) have their durations updated.

  All refresh strategies will have the Master Grid updated (as the strategy applies to the Detail Grid only), however each strategy will have the Detail Grid updated differently.

## Refresh Rows

This example shows the Refresh Rows strategy. Note the following:

- The Detail Cell Renderer params has `refreshStrategy='rows'`.
- The Detail Grid is **not** recreated. The callback `getDetailRowData(params)` is called. The row data in the Detail Grid is updated to reflect the new values. The grid's context (column position, vertical scroll) is kept. Try interacting with the Detail Grid for the first row (move columns, vertical scroll) and observe the grid is kept intact.
- Because the Detail Grid is configured with [getRowId()](https://www.ag-grid.com/react-data-grid/row-ids/) the data rows are updated rather than replaced. This preserves row state across data changes, such as keeping Row Selection and flashing cells that have changed.

#### Refresh Rows

```tsx
'use client';
import React, {
  StrictMode,
  useCallback,
  useMemo,
  useRef,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

import type {
  ColDef,
  FirstDataRenderedEvent,
  GetDetailRowDataParams,
  GetRowIdParams,
  GridReadyEvent,
} from "ag-grid-community";
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  HighlightChangesModule,
  RowApiModule,
  RowSelectionModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  MasterDetailModule,
} from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelApiModule,
  RowSelectionModule,
  RowApiModule,
  HighlightChangesModule,
  ClientSideRowModelModule,
  MasterDetailModule,
  ColumnMenuModule,
  ContextMenuModule,
  ColumnsToolPanelModule,
];

let allRowData: any[];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    // group cell renderer needed for expand / collapse icons
    { field: "name", cellRenderer: "agGroupCellRenderer" },
    { field: "account" },
    { field: "calls" },
    { field: "minutes", valueFormatter: "x.toLocaleString() + 'm'" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      enableCellChangeFlash: true,
    };
  }, []);
  const getRowId = useCallback(function (params: GetRowIdParams) {
    return String(params.data.account);
  }, []);
  const detailCellRendererParams = useMemo(() => {
    return {
      refreshStrategy: "rows",
      detailGridOptions: {
        rowSelection: {
          mode: "multiRow",
          headerCheckbox: false,
        },
        getRowId: (params: GetRowIdParams) => {
          return String(params.data.callId);
        },
        columnDefs: [
          { field: "callId" },
          { field: "direction" },
          { field: "number", minWidth: 150 },
          { field: "duration", valueFormatter: "x.toLocaleString() + 's'" },
          { field: "switchCode", minWidth: 150 },
        ],
        defaultColDef: {
          flex: 1,
          enableCellChangeFlash: true,
        },
      },
      getDetailRowData: (params: GetDetailRowDataParams) => {
        // params.successCallback([]);
        params.successCallback(params.data.callRecords);
      },
    };
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    fetch("https://www.ag-grid.com/example-assets/master-detail-data.json")
      .then((resp) => resp.json())
      .then((data) => {
        allRowData = data;
        setRowData(data);
      });
  }, []);

  const onFirstDataRendered = useCallback((params: FirstDataRenderedEvent) => {
    // arbitrarily expand a row for presentational purposes
    setTimeout(function () {
      gridRef.current!.api.getDisplayedRowAtIndex(0)!.setExpanded(true);
    }, 0);
    setInterval(function () {
      if (!allRowData) {
        return;
      }
      const data = allRowData[0];
      const newCallRecords: any[] = [];
      data.callRecords.forEach(function (record: any, index: number) {
        newCallRecords.push({
          name: record.name,
          callId: record.callId,
          duration: record.duration + (index % 2),
          switchCode: record.switchCode,
          direction: record.direction,
          number: record.number,
        });
      });
      data.callRecords = newCallRecords;
      data.calls++;
      const tran = {
        update: [data],
      };
      gridRef.current!.api.applyTransaction(tran);
    }, 2000);
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            getRowId={getRowId}
            masterDetail={true}
            detailCellRendererParams={detailCellRendererParams}
            onGridReady={onGridReady}
            onFirstDataRendered={onFirstDataRendered}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Refresh Rows](https://www.ag-grid.com/examples/master-detail-refresh/refresh-rows/reactFunctionalTs)

## Refresh Everything

This example shows the Refresh Everything strategy. Note the following:

- The Detail Cell Renderer params has `refreshStrategy='everything'`.
- The callback `getDetailRowData(params)` is called. The Detail Grid is recreated and contains the most recent data. The grid's context (column position, vertical scroll) is lost.
- The Detail Grid providing [getRowId()](https://www.ag-grid.com/react-data-grid/row-ids/) is irrelevant as the Detail Grid is recreated.

#### Refresh Everything

```tsx
'use client';
import React, {
  StrictMode,
  useCallback,
  useMemo,
  useRef,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

import type {
  ColDef,
  FirstDataRenderedEvent,
  GetRowIdFunc,
  GetRowIdParams,
  GridReadyEvent,
} from "ag-grid-community";
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  HighlightChangesModule,
  RowApiModule,
  RowSelectionModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  MasterDetailModule,
} from "ag-grid-enterprise";
import type { CustomDetailCellRendererProps } from "ag-grid-react";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

import type { IAccount } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelApiModule,
  RowSelectionModule,
  RowApiModule,
  HighlightChangesModule,
  ClientSideRowModelModule,
  MasterDetailModule,
  ColumnMenuModule,
  ContextMenuModule,
  ColumnsToolPanelModule,
];

let allRowData: any[];

const GridExample = () => {
  const gridRef = useRef<AgGridReact<IAccount>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<IAccount[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    // group cell renderer needed for expand / collapse icons
    { field: "name", cellRenderer: "agGroupCellRenderer" },
    { field: "account" },
    { field: "calls" },
    { field: "minutes", valueFormatter: "x.toLocaleString() + 'm'" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      enableCellChangeFlash: true,
    };
  }, []);
  const getRowId = useMemo<GetRowIdFunc>(() => {
    return (params: GetRowIdParams) => String(params.data.account);
  }, []);
  const detailCellRendererParams = useMemo(() => {
    return {
      refreshStrategy: "everything",
      detailGridOptions: {
        rowSelection: { mode: "multiRow", headerCheckbox: false },
        getRowId: (params: GetRowIdParams) => {
          return String(params.data.callId);
        },
        columnDefs: [
          { field: "callId" },
          { field: "direction" },
          { field: "number", minWidth: 150 },
          { field: "duration", valueFormatter: "x.toLocaleString() + 's'" },
          { field: "switchCode", minWidth: 150 },
        ],
        defaultColDef: {
          flex: 1,
          enableCellChangeFlash: true,
        },
      },
      getDetailRowData: (params) => {
        params.successCallback(params.data.callRecords);
      },
    } as CustomDetailCellRendererProps<IAccount, ICallRecord>;
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    fetch("https://www.ag-grid.com/example-assets/master-detail-data.json")
      .then((resp) => resp.json())
      .then((data: IAccount[]) => {
        allRowData = data;
        setRowData(data);
      });
  }, []);

  const onFirstDataRendered = useCallback(
    (params: FirstDataRenderedEvent) => {
      // arbitrarily expand a row for presentational purposes
      setTimeout(function () {
        gridRef.current!.api.getDisplayedRowAtIndex(0)!.setExpanded(true);
      }, 0);
      setInterval(function () {
        if (!allRowData) {
          return;
        }
        const data = allRowData[0];
        const newCallRecords: any[] = [];
        data.callRecords.forEach(function (record: any, index: number) {
          newCallRecords.push({
            name: record.name,
            callId: record.callId,
            duration: record.duration + (index % 2),
            switchCode: record.switchCode,
            direction: record.direction,
            number: record.number,
          });
        });
        data.callRecords = newCallRecords;
        data.calls++;
        const tran = {
          update: [data],
        };
        gridRef.current!.api.applyTransaction(tran);
      }, 2000);
    },
    [allRowData],
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IAccount>
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            getRowId={getRowId}
            masterDetail={true}
            detailCellRendererParams={detailCellRendererParams}
            onGridReady={onGridReady}
            onFirstDataRendered={onFirstDataRendered}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Refresh Everything](https://www.ag-grid.com/examples/master-detail-refresh/refresh-everything/reactFunctionalTs)

## Refresh Nothing

This example shows the Refresh Nothing strategy. Note the following:

- The Detail Cell Renderer params has `refreshStrategy='nothing'`.
- No refresh is attempted.
- The callback `getDetailRowData(params)` is **not** called.
- The Detail Grid shows old data.

#### Refresh Nothing

```tsx
'use client';
import React, {
  StrictMode,
  useCallback,
  useMemo,
  useRef,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

import type {
  ColDef,
  FirstDataRenderedEvent,
  GetRowIdParams,
  GridReadyEvent,
} from "ag-grid-community";
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  HighlightChangesModule,
  RowApiModule,
  RowSelectionModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  MasterDetailModule,
} from "ag-grid-enterprise";
import type { CustomDetailCellRendererProps } from "ag-grid-react";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

import type { IAccount } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelApiModule,
  RowSelectionModule,
  RowApiModule,
  HighlightChangesModule,
  ClientSideRowModelModule,
  MasterDetailModule,
  ColumnMenuModule,
  ContextMenuModule,
  ColumnsToolPanelModule,
];

let allRowData: any[];

const GridExample = () => {
  const gridRef = useRef<AgGridReact<IAccount>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<IAccount[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    // group cell renderer needed for expand / collapse icons
    { field: "name", cellRenderer: "agGroupCellRenderer" },
    { field: "account" },
    { field: "calls" },
    { field: "minutes", valueFormatter: "x.toLocaleString() + 'm'" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      enableCellChangeFlash: true,
    };
  }, []);
  const getRowId = useMemo(() => {
    return (params: GetRowIdParams) => String(params.data.account);
  }, []);
  const detailCellRendererParams = useMemo(() => {
    return {
      refreshStrategy: "nothing",
      detailGridOptions: {
        rowSelection: {
          mode: "multiRow",
          headerCheckbox: false,
        },
        getRowId: (params: GetRowIdParams) => String(params.data.callId),
        columnDefs: [
          { field: "callId" },
          { field: "direction" },
          { field: "number", minWidth: 150 },
          { field: "duration", valueFormatter: "x.toLocaleString() + 's'" },
          { field: "switchCode", minWidth: 150 },
        ],
        defaultColDef: {
          flex: 1,
          enableCellChangeFlash: true,
        },
      },
      getDetailRowData: (params) => {
        // params.successCallback([]);
        params.successCallback(params.data.callRecords);
      },
    } as CustomDetailCellRendererProps<IAccount, ICallRecord>;
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    fetch("https://www.ag-grid.com/example-assets/master-detail-data.json")
      .then((resp) => resp.json())
      .then((data: IAccount[]) => {
        allRowData = data;
        setRowData(data);
      });
  }, []);

  const onFirstDataRendered = useCallback(
    (params: FirstDataRenderedEvent) => {
      // arbitrarily expand a row for presentational purposes
      setTimeout(function () {
        gridRef.current!.api.getDisplayedRowAtIndex(0)!.setExpanded(true);
      }, 0);
      setInterval(function () {
        if (!allRowData) {
          return;
        }
        const data = allRowData[0];
        const newCallRecords: ICallRecord[] = [];
        data.callRecords.forEach(function (record: any, index: number) {
          newCallRecords.push({
            name: record.name,
            callId: record.callId,
            duration: record.duration + (index % 2),
            switchCode: record.switchCode,
            direction: record.direction,
            number: record.number,
          });
        });
        data.callRecords = newCallRecords;
        data.calls++;
        const tran = {
          update: [data],
        };
        gridRef.current!.api.applyTransaction(tran);
      }, 2000);
    },
    [allRowData],
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IAccount>
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            getRowId={getRowId}
            masterDetail={true}
            detailCellRendererParams={detailCellRendererParams}
            onGridReady={onGridReady}
            onFirstDataRendered={onFirstDataRendered}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Refresh Nothing](https://www.ag-grid.com/examples/master-detail-refresh/refresh-nothing/reactFunctionalTs)