Cell value disappears during editing in Syncfusion Blazor DataGrid

[Ashish Khanal]

I got this sample ready to describe my problem:

https://blazorplayground.syncfusion.com/rjheZGLCQoXxiMRI

I want to implement batch editing with a "Save" button that persists all grid edits and comments with validation.

I followed directions here: Batch Editing in Blazor DataGrid, but that wasn't enough as my situation is a little different because my editable column uses Template.

The issue now is that the cell value disappears/hides when I click on it, effectively making the edit operation impossible. For example: Notice that the value in Time row-AM column of Model2Ord1 model disappeared when I clicked on it.

My requirements:

- Edit the first model's 2 rows only. I have implemented this in CellEditHandler. Could you please verify it?

- Edit in single click.  I have implemented this in CellSelectHandler. Could you please verify it?

- Validation for data in Time row in AM column should be that it should be between 1-12 and data in PM column should be between 12-24.

- Validation for data in Value row should be that it should be between 1-100.

- Validation for comments should be at least 10 characters long.

- If validations pass, all cell edits and comments need to be saved.

- Do not display edit toolbar because I need to update edited cells + comments field when I hit Save button.

- The dates are dynamic so it can be 2,3,4 etc., or any number of days but will be <= 7.

How would you recommend I structure this flow? Could you please provide a working example that implements above requirements while following best practices?

    private async Task SaveAllAsync()

    {

        // Get cell updates, comments

        // Apply validation:

        // Comments should be at least 10 characters long

        // Time in AM cell should be between 1-12 and PM cell should be between 13 to 24. Where and how to apply this validation? Here, or in the grid definition?

        // Value cell should be between 1 and 100. Where and how to apply this validation? Here, or in the grid definition?         // Save

    }

Thank you for your help!

[Sanjay Kumar Suresh]

Hi Ashish Khanal,

We were able to replicate the reported issue from our end. Upon investigation, we found that the Field property has not been set for the GridColumn, which is likely causing the behavior you're experiencing.

For CRUD operations to function correctly, it's essential to define a valid Field name so that the Grid can properly map and reflect the values. We kindly request you to specify the appropriate Field value in your GridColumn definition and then recheck the scenario from your end.

Code Snippet:

<GridColumn HeaderText="@date.ToString("MM/dd/yyyy")" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">

    <GridColumns>

        <GridColumn HeaderText="AM" Width="60px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" AllowFiltering="false"> @* Missing the field name *@

Additional Reference: https://blazor.syncfusion.com/documentation/datagrid/editing

If you still have any concerns, feel free to reach out.

Regards,

Sanjay Kumar Suresh

[Ashish Khanal]

Hi Sanjay,

Thank you for the response.

I have added the field name, and now the cell disappearing problem has been resolved.

Full working sample here:

https://blazorplayground.syncfusion.com/BDrSXGhrvJLlwySW

Now could you please help me on the questions below:

- Clicking on the cell erases the background color of the row. How to stop this from happening?

For eg:

It's all good at the start:

Now I try to edit Value in AM column. It erases the background color of that row. I want to avoid this.

To get the background color of the row, I need to click somewhere on the grid.

- Validation for data in Time row in AM column should be that it should be between 1-12 and data in PM column for time row should be between 12-24. How to specify this validation?

- Validation for data in Value row should be that it should be between 1-100 for both AM and PM columns.  How to specify this validation?

- Validation for comments should be at least 10 characters long.  

- If validations pass, all cell edits and comments need to be saved. How to grab the cell updates and the comments and save in the most elegant/best practice way?

    private async Task SaveAllAsync()

    {

        // Get cell updates, comments

        // Make sure validation is applied:

        // Time in AM cell should be between 1-12 and PM cell should be between 13 to 24. Where and how to apply this validation? Here, or in the grid definition?

        // Value cell should be between 1 and 100. Where and how to apply this validation? Here, or in the grid definition?

        // Save

    }

- Do not display edit toolbar because I need to update edited cells + comments field when I hit Save button.

Could you please provide an example that implements above requirements while following best practices?

Thank you for the help!

[Sanjay Kumar Suresh]

Hi Ashish Khanal,

Query: Clicking on the cell erases the background color of the row. How to stop this from happening?

When editing a cell in the Syncfusion SfGrid (Blazor), your row background color is lost ("erased") while that row is in edit mode. This is standard behavior in Syncfusion Grids, because editing a row adds e-editedrow. Modify your css as like below to achieve your requirement.

Code Snippet:

<style>

    .time-row {

        background-color: #e8e8e8;

    }

    .value-row {

        background-color: #87ceeb;

    }

    .e-row.value-row.e-editedrow .e-rowcell.e-selectionbackground {

        background-color: #87ceeb;

    }

</style>

Query 2: Validation for data in Value row should be that it should be between 1-100 for both AM and PM columns.  How to specify this validation?

We would like to inform you that the validations are done through the Column level not by the row level, which is the default behavior of blazor grid. We have applied the column level validations for the given values in the attached sample please ensure from your end.

Code Snippet:

<GridColumn Field="@amField" HeaderText="AM" ValidationRules="@(new ValidationRules {Required=true, Min=1, Max=12})" …>

 

<GridColumn Field="@pmField"  ValidationRules="@(new ValidationRules {Required=true, Min=12, Max=24})"

….

Query 3: Validation for comments should be at least 10 characters long. 

To perform validation on the SfTextArea placed inside an editform please take a look at the below code snippet.

Simple Sample: https://blazorplayground.syncfusion.com/embed/hDLeDGLgTFoAdCHu?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Code Snippet:

  <EditForm Model="@commentModel" OnValidSubmit="HandleValidSubmit">

      <DataAnnotationsValidator />

      <SfTextArea @bind-Value="commentModel.Comment"

      Placeholder='Add your Comments'

      FloatLabelType='@FloatLabelType.Auto'>

      </SfTextArea>

      <ValidationMessage For="@(() => commentModel.Comment)" />

      <button type="submit">Submit</button>

  </EditForm>

Query 4: If validations pass, all cell edits and comments need to be saved.

You can retrieve the batch changes using the public API method GetBatchChangesAsync() and pass them to the ApplyBatchChangesAsync() method to save the cells.
To save in the grid you can use the EndEdit() method to simply save the changes without manually handling the batch details.

Code Snippet:

private async Task HandleValidSubmit()

{

    // Handle the valid form submission

    // var batchChanges = await Grid.GetBatchChangesAsync();

    // await Grid.ApplyBatchChangesAsync(batchChanges);

    await Grid.EndEditAsync();

}

Sample: https://blazorplayground.syncfusion.com/embed/VZVIjwLAStDWwTmJ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

We have attached the modified sample please check and let us know if you have any questions.

Regards,

Sanjay Kumar Suresh

[Ashish Khanal]

Hi Sanjay,

Thank you for the response.

Question 2: Validation for data in Time row in AM column should be that it should be between 1-12 and data in PM column for time row should be between 12-24. How to specify this validation?

We would like to inform you that the validations are done through the Column level not by the row level, which is the default behavior of blazor grid. We have applied the column level validations for the given values in the attached sample please ensure from your end.

Custom validation allows you to do validation by row level. Column level validation wasn't enough for my case so your solution didn't work for me. 

But I figured it out. Check out the fully working sample here:      https://blazorplayground.syncfusion.com/VXBIDwVAPNVfpiwI

Please do a bit more research on your product before helping out users who are new to it, so they are guided in the right direction.

Question 4: If validations pass, all cell edits and comments need to be saved.

- I need that "Are you sure you want to save changes?" dialog box showing before I save my data

- That's why I called await Grid.EndEditAsync();, when I hit "Save" but it messes up my grid. Why?

Before saving, it's all good:

I make changes to 7/10/2025 day's AM column's time (change from 6 to 7) and value (change from 35 to 78).

Then hit "Save" button and click "Ok":

As you can see, the highlighted area's data is all messed up.

You can try it yourself here:  https://blazorplayground.syncfusion.com/VXBIDwVAPNVfpiwI

What's the issue? Why did that happen?

This is my save method:

    private async Task SaveAllAsync()

    {

        // Show the confirmation dialog

        // Is this supposed to clear the "dirty" cells and update my grid data source?

        await Grid.EndEditAsync();

        // Get the changes.  Is this the right way to get changes? Or do I get latest data from grid datasource:

        // private List<GridRowViewModelV2> gridData = new();

        var batchChanges = await Grid.GetBatchChangesAsync();

        // Save by calling backend API

        // Do that here...

    }

My goal is to:

1. Edit the cells

2. Hit "Save" button

3. Get the "Are you sure you want to save changes?" dialog box. 

4. When user clicks Ok, get the grid changes + comments from textarea and then call by backend API to save the data to database

Could you please help me get this kind of flow? Please give me a sample Save method for this flow.

https://blazorplayground.syncfusion.com/VXBIDwVAPNVfpiwI

Thank you!

[Sanjay Kumar Suresh]

Hi Ashish Khanal,

Query 1: Custom validation allows you to do validation by row level.

We apologize for any confusion caused by our earlier response. Your example is a great illustration of how custom validation can be tailored to meet more complex scenarios, and we’ll be sure to incorporate this insight into future guidance to better support similar use cases.

Query 2: After Saving the saved record values are getting not maintained correctly.

Upon reviewing your sample, we observed that the primary key column does not contain unique values. This is causing the edited row to collapse after saving, and the latest edited value to reflect across multiple rows—particularly because the first two records share the same key. This behavior stems from the lack of uniqueness in the primary key values, which is essential for proper row identification during CRUD operations.

We recommend ensuring that each record has a unique value assigned to the primary key column. This will allow the DataGrid to manage updates reliably and reflect changes as expected. We have added the unique key value and ensured the scenario from our end it works well please check the below code snippet.

Code Snippet:

<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

<GridColumns>

    <GridColumn Field="Id" IsPrimaryKey="true" Visible="false" Width="1px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" />

    <GridColumn HeaderText="My Grid" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">

….

 

 

public record GridRowViewModelV2

{

     public int Id { get; init; }          // <-- NEW PRIMARY KEY FIELD

     public string Model { get; init; } = default!;

     public string ModelColor { get; init; } = default!;

     …..

}

 

int idSeed = 1;

 

gridData = testData

     .GroupBy(d => d.MODEL)

     .SelectMany(g =>

     {

         var (bg, fg, order) = modelDisplayData.TryGetValue(g.Key, out var c) ? c : ("#FFFFFF", "black", int.MaxValue);

         var sortOrder = order;

         var timeRow = new GridRowViewModelV2

         {

                 Id = idSeed++, // Assign unique id

             Model = g.Key,

             ….

         };

         var valueRow = new GridRowViewModelV2

         {

                 Id = idSeed++, // Assign unique id

             Model = g.Key,

             …

 

We have attached the concern sample please check and get back to us if you have any concerns.

Query 3:  When user clicks Ok, get the grid changes + comments from textarea and then call by backend API to save the data to database

You can retrieve the changes made within the DataGrid using the GetBatchChanges() method. This API allows you to fetch the records that have been added, modified, or deleted during batch editing operations

Code Snippet:

private async Task SaveAllAsync()

{

     // To get the changes done in the Grid.

     var batchChanges = await Grid.GetBatchChangesAsync();

 

     // In the above variable you can able to access the records changed, edited and added you can customize these changes accordingly to your use.

 

     // Show the confirmation dialog

     await Grid.EndEditAsync();

}

Concern API Method: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetBatchChangesAsync

Regards,

Sanjay Kumar Suresh

Attachment: SupportTickets_60fa0942.zip

[Ashish Khanal]

Thank you for the response, Sanjay.

Now this sample looks good:

https://blazorplayground.syncfusion.com/VDVSNcLTxCmzHWFW

Could you please make sure that this sample doesn't get deleted even after 90 days, so future users can take a look at it if they face similar issues? 

I ask this because I believe the online Blazor Playground samples get deleted after 90 days, is that correct?

Thank you!

[Sanjay Kumar Suresh]

Hi Ashish Khanal,

Thanks for the update.

Since the provided playground link will no longer be accessible after 90 days, we’ve created a separate web app sample based on the playground sample. The attached file has been added to the forum and will remain permanently available, ensuring you can refer to it at any time in the future.

Regards,

Sanjay Kumar Suresh

Attachment: SupportTickets_a816fa90.zip