Refreshing a Child Grid When the Parent Selection Changes in Acumatica Modern UI

When building inquiry and maintenance screens in Acumatica Modern UI, it is common to display related data in multiple grids. A typical example is a parent-child relationship where selecting a record in the first grid should automatically refresh records displayed in the second grid.

Scenario

Assume we have the following screen:

• Projects grid – displays available projects.
• Tasks grid – displays tasks related to the selected project.

When the user selects a different project, the Tasks grid should automatically refresh and display the corresponding records.

Screen Definition

The screen contains two collection views:

At this point, both grids are completely independent.

Configuring the Parent Grid

The parent grid requires two important settings.

syncPosition

syncPosition: true

This property synchronizes the currently selected row between the frontend and the backend.

Without it, selecting a different row in the grid may not update the current record in the graph, causing dependent views to use stale data.

autoRepaint

autoRepaint: ["Tasks"]

This property tells Modern UI to refresh the Tasks view whenever the current row in the Projects grid changes.

When a user selects another project, the framework automatically requests updated data for the Tasks view.

Configuring the Child Grid

The child grid typically requires no special configuration.

Backend Relationship

One common misunderstanding is assuming that autoRepaint creates a relationship between the two views.

It does not.

The relationship must already exist in the graph. Modern UI only triggers the refresh.

For example:

public SelectFrom<ProjectRecord>.View Projects;

 public SelectFrom<TaskRecord>

     .Where<TaskRecord.projectID

         .IsEqual<ProjectRecord.noteID.FromCurrent>>

     .View Tasks;

Page Layout

The HTML markup remains straightforward:

<qp-grid

    id="gridProjects" view.bind="Projects" caption="Projects">

</qp-grid>

<qp-grid

    id="gridTasks" view.bind="Tasks" caption="Related Tasks">

</qp-grid>

Common Mistakes

Missing syncPosition

The child grid refreshes, but still displays data related to the previously selected parent record.

Missing autoRepaint

The selected row changes, but the child grid never refreshes.

Missing Backend Filtering

The child grid refreshes correctly but displays all records because the view is not filtered by the current parent record.

How It Works

The process can be summarized as follows:

1. The user selects a row in the parent grid.
2. syncPosition updates the current record in the graph.
3. autoRepaint triggers a refresh of the child view.
4. The child view executes using the current parent record.
5. The refreshed records are displayed in the child grid.