How to do cross-row validation in Syncfusion Blazor DataGrid Batch edit using custom validator?

I am using the Syncfusion Blazor DataGrid in batch edit mode. For each model, my grid displays 2 rows: Time and Value.

If a user enters a value in the Time row for a given column (AM/PM), I want to require that the corresponding Value row for that same model and column also has a value (and vice versa).

In summary my requirement is: If one is filled, both should be required.

- Is there a way to trigger this validation when a user edits a cell? Or do I need to do it outside of validator in the page's "Save" button handler? I'd much prefer to do it cleanly inside the custom validator.

    private async Task SaveAllAsync()
    {
        var batchChanges = await Grid.GetBatchChangesAsync();
        // Do I need to do cross row validation here when user clicks "Save"
        // Or can I do this in the custom validator I have: GridEditValidator.cs?
        // Save logic here...
        // Reload fresh data from db
    }

- Block navigation and disallow "Save" until both rows are filled.


- It'd be ideal if after a user inputs something in the Time row, and if Value row is empty for that column, it automatically moves to that cell when user hits TAB or ENTER.


Please take a look at the runnable sample code I have prepared to see what I've done so far and help me with my requirements:

https://blazorplayground.syncfusion.com/VXhyjwAXRPhjJccc


Let me show my requirements using screenshots.

As you can see 7/10/2025 AM column of Model2Ord1 had both Time and Value rows as empty in the first screenshot, so I start by entering value for the Time row of that column. It kicks my custom validator which is good.

Now I enter valid value. At this point when I hit ENTER or TAB, it should force navigation to the Value row of that column since Time row is populated, now Value row is required. If the user tries to navigate to some other cell, it should be blocked.

The validation for Value row kicks in through my custom validator which is good.

Now when I click TAB from Value row of 7/10/2025 AM column, it can go to next column because the Time row for 7/10/2025 AM column already has a value (12). 

If the Time row for 7/10/2025 AM column didn't have a value, the navigation must have moved to it while clicking ENTER or TAB from Value row of 7/10/2025 AM column.

Now when I click TAB from Time row of 7/10/2025 AM column, it can go to next column because the Value row for 7/10/2025 AM column already has a value (400). 


Please route this ticket to some senior engineer in the data grid team as this might require expertise. 

Any guidance and best practices for this scenario would be appreciated!

Thank You!


https://blazorplayground.syncfusion.com/VXhyjwAXRPhjJccc


5 Replies

AK Ashish Khanal July 30, 2025 11:08 PM UTC

This is what I have decided to do, and I have made some great progress on it, but it's not working correctly.

https://blazorplayground.syncfusion.com/htryZGAtvWFABdap


1. Allow per-cell editing with immediate cell-level validation. [Already done in my custom validator.]

2. On "Save" button click, perform cross-row cell validation and show validation message in all invalid cells.


My progress so far:


Created this method in custom validator

    // This method allows to trigger cell-level validation errors
    public void SetValidationError(GridRowViewModelV2 row, string fieldName, string message)
    {
        var fieldIdentifier = new FieldIdentifier(row, fieldName);
        messageStore.Add(fieldIdentifier, message);
        context.ShowValidationMessage(fieldName, false, message);
    }


Perform cross-row cell validation during "Save":

    private async Task SaveAllAsync()
    {
        var batchChanges = await Grid.GetBatchChangesAsync();
        var mergedGridData = MergeBatchChanges(gridData, batchChanges);

        var validationErrors = new List<(GridRowViewModelV2 row, string fieldName, string message)>();

        // Only validate for Model2Ord1 (as an example)
        var heRow = mergedGridData.FirstOrDefault(r => r.RowType == RowType.Time && r.Model == "Model2Ord1");
        var valueRow = mergedGridData.FirstOrDefault(r => r.RowType == RowType.Value && r.Model == "Model2Ord1");

        if (heRow is null || valueRow is null) return;

        for (int i = 0; i < dateHeaders.Count; i++)
        {
            var heAM = heRow.GetAM(i);
            var valueAM = valueRow.GetAM(i);

            if (heAM is not null && valueAM is null)
                validationErrors.Add((valueRow, $"Day{i}AM", "Both HE and Forecast AM must be entered."));
            if (valueAM is not null && heAM is null)
                validationErrors.Add((heRow, $"Day{i}AM", "Both HE and Forecast AM must be entered."));

            var hePM = heRow.GetPM(i);
            var valuePM = valueRow.GetPM(i);

            if (hePM is not null && valuePM is null)
                validationErrors.Add((valueRow, $"Day{i}PM", "Both HE and Forecast PM must be entered."));
            if (valuePM is not null && hePM is null)
                validationErrors.Add((heRow, $"Day{i}PM", "Both HE and Forecast PM must be entered."));
        }

        if (validationErrors.Any())
        {
            foreach (var err in validationErrors)
            {
                GridEditValidatorRef?.SetValidationError(err.row, err.fieldName, err.message);
            }
            return;
        }

        // Save logic here...
        // Reload fresh data from db
    }

This works, but only when the sibling cell is highlighted. For example: I changed Time row > highlighted Value row > Clicked "Save" button. And this is the output.

But it doesn't work if the sibling cell is not highlighted. For example: I just changed time row and highlighted nothing else > Clicked "Save" button and there's no validation error.

Please help me get this work correctly.


Thank You!



AK Ashish Khanal July 31, 2025 09:11 PM UTC

Could someone please help me with this?

This is a big blocker for me and would appreciate help from someone at Syncfusion. 



AK Ashish Khanal July 31, 2025 11:12 PM UTC

From today's troubleshooting, I have found 2 issues with this but I'm not sure how to fix them.


1. Cross-cell validation only works if the sibling cell is selected:

When I click "Save", my cross-row/cell validation logic in SaveAllAsync correctly detects errors using merged batch data. However, the validation message only appears if the sibling cell is in edit mode. If the sibling cell is not selected, the error is not shown in the grid.

2. FieldIdentifier mismatch prevents clearing validation messages:

My custom validator sets validation errors using SetValidationError(GridRowViewModelV2 row, string fieldName, string message), where row is the instance from merged batch data.

However, it looks like Syncfusion's validator ties messages to the specific object instance from the grid’s edit context.

When cell-level validation runs (via ValidateSingleField(FieldIdentifier identifier)), it uses the fieldIdentifier using grid’s row instance, which is a different object reference than the one I create in SetValidationError method.

As a result, validation messages set by SetValidationError cannot be cleared by cell-level validation (in ValidateSingleField), even if the user corrects the value. This leaves the editing in a broken state.

Please help me get this working.



PS Prathap Senthil Syncfusion Team August 1, 2025 01:05 PM UTC

Hi Ashish Khanal,

Based on your requirement, we understand that you are looking to implement cross-validation between different rows but within the same column (for example, validating a Time cell’s value based on its corresponding Value cell in another row). We regret to inform you that this type of cross-row validation is not natively supported. Currently, custom validators in the grid have access only to the data in the row being edited, not to data in other rows. As a result, only cell-based validation for the current row is possible at this time. Thank you for your understanding.

Note: Additionally, we would like to clarify that the Blazor EditForm is used in our grid editing implementation. However, Blazor EditForm does not natively support live, cross-row cell validation during editing. Collection-level, cross-row checks can be performed when saving values, but real-time validation as the user edits cells or rows is not supported.

Regards,
Prathap Senthil



AK Ashish Khanal August 8, 2025 12:30 AM UTC

Hi,

I created a new ticket that is clearer and more streamlined. 

Perform validation across multiple ce... | Blazor Forums | Syncfusion®

Please answer on the new ticket. ☝️


You can delete this ticket.


Loader.
Up arrow icon