How to Validate Field value changes in an Editable Subgrid Using OnSave in Dataverse Model-Driven Apps

Editable subgrids in model-driven apps allow users to quickly update related records inline — making data entry more efficient. But what if you want to validate business rules like ensuring a start date isn’t in the past, or an end date is not before the start date?

In this blog, we’ll explore how to use JavaScript on the OnSave event of an editable subgrid to enforce such validations.

🎯 Scenario

You’re working on a project table related to an Account, where each project row has:

• Start Date
• End Date

You want to ensure:

1. Start Date cannot be in the past
2. End Date must be the same or after Start Date

🛠 Step-by-Step: Implementing Date Validation on Editable Subgrid Save

1. Add Editable Subgrid to Your Form

• Open make.powerapps.com
• Go to the form where your subgrid exists (e.g., Account Main form)
• Add or select a subgrid showing related records (e.g., Projects)
• Under Controls, make sure Editable Grid is enabled

2. Create JavaScript Web Resource

Create a new .js file named gridValidation.js with the following code:

function onGridRowSave(executionContext) {
    var formContext = executionContext.getFormContext(); // Editable subgrid row context

    var startDateAttr = formContext.getAttribute("cr_startdate");
    var endDateAttr = formContext.getAttribute("cr_enddate");

    if (!startDateAttr || !endDateAttr) return;

    var startDate = startDateAttr.getValue();
    var endDate = endDateAttr.getValue();

    var today = new Date();
    today.setHours(0, 0, 0, 0); // Normalize

    // Rule 1: Start Date must not be in the past
    if (startDate && startDate < today) {
        Xrm.Navigation.openAlertDialog({
            text: "Start Date cannot be in the past.",
            title: "Validation Error"
        });
        executionContext.getEventArgs().preventDefault();
        return;
    }

    // Rule 2: End Date must be equal to or after Start Date
    if (startDate && endDate && endDate < startDate) {
        Xrm.Navigation.openAlertDialog({
            text: "End Date cannot be earlier than Start Date.",
            title: "Validation Error"
        });
        executionContext.getEventArgs().preventDefault();
        return;
    }
}

📝 Replace cr_startdate and cr_enddate with your actual field logical names.

3. Add Script to the Form

• Navigate to Solutions > Your Solution > Web Resources
• Add a new Web Resource with the gridValidation.js file
• Publish it

4. Register OnSave Event on the Editable Grid

• Go back to your form
• Select the subgrid and open the Controls tab
• Under Events > OnSave:
  • Add Library: gridValidation.js
  • Function Name: onGridRowSave
  • No need to pass parameters
• Save and publish the form

✅ Expected Result

When a user:

• Edits a row in the subgrid
• Clicks away or presses Enter (to trigger save)

The OnSave function runs, and:

• Shows an alert if the start date is in the past
• Shows an alert if the end date is before the start date
• Cancels the row save

🧠 Why Use OnSave?

💡 Bonus Tip: Combine with OnChange for Instant Feedback

You can also register similar validation on OnChange of both Start Date and End Date for immediate alerts as the user types.

📌 Conclusion

Validating data in editable grids helps maintain accuracy without sacrificing user experience. The OnSave event gives you the control to enforce multi-field rules effectively.