---
title: "Master / Detail - Detail Refresh"
enterprise: true
framework: javascript
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/javascript-data-grid/data-update-row-data/) updates the parent row and [Row IDs](https://www.ag-grid.com/javascript-data-grid/row-ids/) are provided*.
- A [Transaction Update](https://www.ag-grid.com/javascript-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/javascript-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/javascript-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. If the Detail Panel is using a custom template, then the template will be re-created. Use this option if you want to update the template or 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:

- Each Detail Grid has a title with the record's name and call count eg 'Nora Thomas 24 calls'. This is set by providing a custom Detail Cell Renderer template. Only the “Refresh Everything” strategy will cause this to be updated.

- 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/javascript-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.

- The Detail Grid title 'Nora Thomas 24 calls' doesn't change as the template is only set once for the detail panel.

#### Refresh Rows

```ts
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GetRowIdParams,
  GridApi,
  GridOptions,
  HighlightChangesModule,
  IDetailCellRendererParams,
  ModuleRegistry,
  RowApiModule,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  MasterDetailModule,
} from "ag-grid-enterprise";
import { IAccount } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelApiModule,
  RowSelectionModule,
  RowApiModule,
  HighlightChangesModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  MasterDetailModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IAccount>;

const gridOptions: GridOptions<IAccount> = {
  columnDefs: [
    // group cell renderer needed for expand / collapse icons
    { field: "name", cellRenderer: "agGroupCellRenderer" },
    { field: "account" },
    { field: "calls" },
    { field: "minutes", valueFormatter: "x.toLocaleString() + 'm'" },
  ],
  defaultColDef: {
    flex: 1,
    enableCellChangeFlash: true,
  },
  getRowId: (params: GetRowIdParams) => {
    return String(params.data.account);
  },
  masterDetail: true,
  detailCellRendererParams: {
    refreshStrategy: "rows",
    template: (params) => {
      return `<div class="ag-details-row ag-details-row-fixed-height">
            <div style="padding: 4px; font-weight: bold;">${params.data ? params.data.name : ""} ${params.data ? params.data.calls : ""} calls</div>
            <div data-ref="eDetailGrid" class="ag-details-grid ag-details-grid-fixed-height"/>
         </div>`;
    },

    detailGridOptions: {
      rowSelection: {
        mode: "multiRow",
        headerCheckbox: false,
        checkboxes: true,
      },
      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.successCallback(params.data.callRecords);
    },
  } as IDetailCellRendererParams<IAccount, ICallRecord>,
  onFirstDataRendered: onFirstDataRendered,
};

let allRowData: any[];

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  // arbitrarily expand a row for presentational purposes
  setTimeout(() => {
    params.api.getDisplayedRowAtIndex(0)!.setExpanded(true);
  }, 0);

  setInterval(() => {
    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],
    };

    params.api.applyTransaction(tran);
  }, 2000);
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/master-detail-data.json")
  .then((response) => response.json())
  .then((data: IAccount[]) => {
    allRowData = data;
    gridApi!.setGridOption("rowData", data);
  });
```

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

## 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/javascript-data-grid/row-ids/) is irrelevant as the Detail Grid is recreated.

- The detail grid title 'Nora Thomas 24 calls' updates with the new call count, as the refresh results in the template getting reset.

#### Refresh Everything

```ts
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GetRowIdParams,
  GridApi,
  GridOptions,
  HighlightChangesModule,
  IDetailCellRendererParams,
  ModuleRegistry,
  RowApiModule,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  MasterDetailModule,
} from "ag-grid-enterprise";
import { IAccount } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelApiModule,
  RowSelectionModule,
  RowApiModule,
  HighlightChangesModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  MasterDetailModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IAccount>;

const gridOptions: GridOptions<IAccount> = {
  columnDefs: [
    // group cell renderer needed for expand / collapse icons
    { field: "name", cellRenderer: "agGroupCellRenderer" },
    { field: "account" },
    { field: "calls" },
    { field: "minutes", valueFormatter: "x.toLocaleString() + 'm'" },
  ],
  defaultColDef: {
    flex: 1,
    enableCellChangeFlash: true,
  },
  getRowId: (params: GetRowIdParams) => String(params.data.account),
  masterDetail: true,
  detailCellRendererParams: {
    refreshStrategy: "everything",

    template: (params) => {
      return (
        '<div class="ag-details-row ag-details-row-fixed-height">' +
        '<div style="padding: 4px; font-weight: bold;">' +
        (params.data ? params.data!.name : "") +
        " " +
        (params.data ? params.data!.calls : "") +
        " calls</div>" +
        '<div data-ref="eDetailGrid" class="ag-details-grid ag-details-grid-fixed-height"/>' +
        "</div>"
      );
    },

    detailGridOptions: {
      rowSelection: {
        mode: "multiRow",
        headerCheckbox: false,
        checkboxes: true,
      },
      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.successCallback(params.data.callRecords);
    },
  } as IDetailCellRendererParams<IAccount, ICallRecord>,
  onFirstDataRendered: onFirstDataRendered,
};

let allRowData: any[];

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  // arbitrarily expand a row for presentational purposes
  setTimeout(() => {
    params.api.getDisplayedRowAtIndex(0)!.setExpanded(true);
  }, 0);

  setInterval(() => {
    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],
    };

    params.api.applyTransaction(tran);
  }, 2000);
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/master-detail-data.json")
  .then((response) => response.json())
  .then((data: IAccount[]) => {
    allRowData = data;
    gridApi!.setGridOption("rowData", data);
  });
```

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

## 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.

- The Detail Grid's title remains unchanged.

#### Refresh Nothing

```ts
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GetRowIdParams,
  GridApi,
  GridOptions,
  HighlightChangesModule,
  IDetailCellRendererParams,
  ModuleRegistry,
  RowApiModule,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  MasterDetailModule,
} from "ag-grid-enterprise";
import { IAccount } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelApiModule,
  RowSelectionModule,
  RowApiModule,
  HighlightChangesModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  MasterDetailModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IAccount>;

const gridOptions: GridOptions<IAccount> = {
  columnDefs: [
    // group cell renderer needed for expand / collapse icons
    { field: "name", cellRenderer: "agGroupCellRenderer" },
    { field: "account" },
    { field: "calls" },
    { field: "minutes", valueFormatter: "x.toLocaleString() + 'm'" },
  ],
  defaultColDef: {
    flex: 1,
    enableCellChangeFlash: true,
  },
  getRowId: (params: GetRowIdParams) => String(params.data.account),
  masterDetail: true,
  detailCellRendererParams: {
    refreshStrategy: "nothing",

    template: (params) => {
      return (
        '<div class="ag-details-row ag-details-row-fixed-height">' +
        '<div style="padding: 4px; font-weight: bold;">' +
        (params.data ? params.data!.name : "") +
        " " +
        (params.data ? params.data!.calls : "") +
        " calls</div>" +
        '<div data-ref="eDetailGrid" class="ag-details-grid ag-details-grid-fixed-height"/>' +
        "</div>"
      );
    },

    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 IDetailCellRendererParams<IAccount, ICallRecord>,
  onFirstDataRendered: onFirstDataRendered,
};

let allRowData: any[];

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  // arbitrarily expand a row for presentational purposes
  setTimeout(() => {
    params.api.getDisplayedRowAtIndex(0)!.setExpanded(true);
  }, 0);

  setInterval(() => {
    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],
    };

    params.api.applyTransaction(tran);
  }, 2000);
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/master-detail-data.json")
  .then((response) => response.json())
  .then((data: IAccount[]) => {
    allRowData = data;
    gridApi!.setGridOption("rowData", data);
  });
```

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