Inline editing row disappears during edit

I have this SfGrid

           <SfGrid @ref="PupilLocationGrid" TValue="PupilLocation" DataSource="@PupilLocations" AllowPaging="true" AllowSorting="true" Width="100%" Toolbar="@(new List<string>() {"Edit", "Delete"})" Style="min-height: 300px;">

               <GridEvents OnActionBegin="OnActionBeginHandlerPupilLocation" OnActionComplete="OnActionCompleteHandlerPupilLocation" TValue="PupilLocation"></GridEvents>

               <GridEditSettings AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

               <GridPageSettings PageSize="5"></GridPageSettings>

               <GridColumns>

                   <GridColumn Field=@nameof(PupilLocation.Id) IsPrimaryKey="true"></GridColumn>

                   <GridColumn HeaderText="Pupil Name" Width="150" AllowEditing="false">

                       <Template>

                           @{

                               var pp = (context as PupilLocation);

                               @pp?.Pupil.Name

                           }

                       </Template>

                   </GridColumn>

                   <GridColumn HeaderText="Pupil Surname" Width="150" AllowEditing="false">

                       <Template>

                           @{

                               var pp = (context as PupilLocation);

                               @pp?.Pupil.Surname

                           }

                       </Template>

                   </GridColumn>

                   <GridColumn HeaderText="Address" Width="150" AllowEditing="false">

                       <Template>

                           @{

                               var pp = (context as PupilLocation);

                               @pp?.Location.Address

                           }

                       </Template>

                   </GridColumn>

                   <!-- Editable Columns -->

                   <GridColumn Field=@nameof(PupilLocation.Comment) HeaderText="Comment"></GridColumn>

                   <GridColumn Field="@nameof(PupilLocation.IsActive)" Width="100" Type="ColumnType.Boolean">

                       <Template Context="Templ01Context">

                           @{

                               bool isActive = ((Templ01Context as PupilLocation)?.IsActive) ?? false;

                           }

                           <span class="@((isActive ? "text-success" : "text-danger"))">

                               @((isActive ? "✔" : "❌"))

                           </span>

                       </Template>

                   </GridColumn>

               </GridColumns>

           </SfGrid>


I have only one row (and usually in this application in this specific grid there will be only one row).

It is annoying that data row disappears. 

I sent to you a clip of the UI showing how it behaves. I zipped it a, .mp4 is not allowed.


Attachment: SfGridInlineEditing_808fcb34.zip

1 Reply

NP Naveen Palanivel Syncfusion Team March 24, 2025 12:55 PM UTC

Hi Nikos

Based on your query and the provided code, we noticed that the values in the column are defined within a template, but the Field property is not set. Since your template column does not have a defined Field, the values cannot be displayed during CRUD operations. Templates are used only for display purposes. If you need the value to be displayed during CRUD operations, we recommend binding the column to a Field accordingly. Additionally, it looks like you are trying to bind values from a complex model class. We would like to inform you that the Grid supports complex data binding. Please refer to the documentation and sample for more details.

Reference: https://blazor.syncfusion.com/documentation/datagrid/column-rendering#complex-data-generation

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

Regards,
Naveen


Loader.
Up arrow icon