Auto Refresh Subgrid in Dynamics 365 CRM Based on Changes in Another Subgrid

In Dynamics 365 CRM implementations, subgrids are used extensively to show related records within the main form. But what if you want Subgrid B to automatically refresh whenever a new record is added to Subgrid A, especially when that record triggers some automation like a Power Automate flow or a plugin that creates or updates related data?

In this blog, I’ll walk you through how to make one subgrid refresh when another subgrid is updated — a common real-world scenario that enhances user experience without needing a full form refresh.

Let’s say you have two subgrids on your form:

• 1.Chargeable Categories (Subgrid A)
• 2.Order Line Categories (Subgrid B)

Whenever a new record is added in the Chargeable Categories subgrid, a Power Automate flow or backend logic creates corresponding records in Order Line Categories. However, these new records are not immediately visible in the second subgrid unless the user manually refreshes the entire form or clicks on the refresh icon.

This can be confusing or frustrating for end-users.

Solution Overview

To solve this, we’ll use JavaScript to listen for changes in Subgrid A and automatically refresh Subgrid B once something is added.

Here’s the high-level approach:

1. Use JavaScript to register an event on Subgrid A.
2. When Subgrid A reloads (after a record is added), automatically refresh Subgrid B.
3. Optionally, add a slight delay if automation (like a flow) is asynchronous.

Implementation Steps

1. Create the JavaScript Web Resource

Create a new JS web resource and add the following code:

function refreshSubgridB(executionContext) {
    var formContext = executionContext.getFormContext();
    var subgridB = formContext.getControl("orderlinecategoriesgrid"); // Replace with actual name

    if (subgridB) {
        subgridB.refresh();
    }
}

function registerSubgridEvent(executionContext) {
    var formContext = executionContext.getFormContext();
    var subgridA = formContext.getControl("chargeablecategoriesgrid"); // Replace with actual name

    if (subgridA) {
        subgridA.addOnLoad(function () {
            // Optional delay if automation is async (e.g., Power Automate)
            setTimeout(function () {
                refreshSubgridB(executionContext);
            }, 5000); // Delay for 5 seconds
        });
    }
}

Make sure you replace chargeablecategoriesgrid and orderlinecategoriesgrid with the actual name of the subgrids from your form.

2. Register the Script on the Form

• Go to the form editor of the entity where both subgrids are present.
• Add the JavaScript web resource.
• Call the function registerSubgridEvent under Form OnLoad.
• Save and publish the form.

How It Works

• Whenever a new record is added in Subgrid A, Dynamics internally refreshes the subgrid view.
• The addOnLoad function listens to that reload.
• Once that happens, we trigger a refresh of Subgrid B.
• If Power Automate or backend logic is being used, the optional setTimeout allows that logic to complete before refreshing.

To conclude, this simple yet effective approach ensures a smoother user experience by reflecting backend changes instantly without needing to manually refresh the entire form. It’s particularly helpful when automations or plugins create or update related records that must appear in real-time.

By combining JavaScript with Dynamics’ form controls, you can add polish and usability to your applications without heavy customization.

I hope you found this blog useful, and if you would like to discuss anything, you can reach out to us at transform@cloudfronts.com.