Inline Editable Subgrid Row Field OnChange Event with Javascript Business use case

Scenario: Validate “Start Time” in Editable Subgrid of Appointment Table on Contact Form. Start Time cant be backdated.

We want to:

• Monitor changes to the Start Time column in an editable grid
• If the entered date is in the past, show an alert and revert the change

🛠 Step-by-Step Implementation

1. Add JavaScript Web Resource

Create a JavaScript file (e.g., gridValidation.js) with this code:

javascriptCopyEditfunction validateStartDate(executionContext) {
    var formContext = executionContext.getFormContext(); // Grid row context
    var startDateAttr = executionContext.getEventSource(); // Start Date field

    if (!startDateAttr) return;

    var startDate = startDateAttr.getValue();
    var today = new Date();

    // Clear time portion from both dates for accurate comparison
    startDate.setHours(0, 0, 0, 0);
    today.setHours(0, 0, 0, 0);

    if (startDate < today) {
        var alertOptions = {
            text: "Start Date cannot be a past date.",
            title: "Invalid Date"
        };
        Xrm.Navigation.openAlertDialog(alertOptions);

        // Revert the value or clear it
        startDateAttr.setValue(null);
    }
}

2. Add This Script to Your Solution

• Go to Solutions > Add a new JavaScript web resource
• Upload the .js file and publish it

3. Attach Script to Editable Grid Control

• Open the form with the subgrid
• Select the subgrid and go to Controls
• Under Editable Grid, scroll to Events
• For OnChange, add a handler:
  • Library: the JS web resource (e.g., gridValidation.js)
  • Function: validateStartDate
  • Add parameter: select Start Date as the event field

✅ Make sure the Start Date field is included in the grid’s view.

✅ Result

Now, if a user enters a backdated Start Time:

• An alert is shown
• The value is cleared or reverted

Hope it helps.