Problem with Blazor SFGrid freezes when deleting rows and using a column template

[David van Duijne]

Hello,

When a SFGrid uses a custom column template, the default actions to delete freezes the grid and page. It starts to show a loading spinner and then nothing happens.

The default action for adding a new row does not freeze the grid, but it doesn't add a row either.

I've replicated this with a base example that I got from a previous question. I tried to wire it up with an ObservableCollection but the result was exactly the same.

Why does this happen and how can we work around it?

Thanks in advance for taking the time to answer.

Example Code:

@page "/"

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Grids

   

   

       

       

           

       

       

           

       

   

@code{

    SfGrid Grid { get; set; }

    public List Orders { get; set; }

    public async Task OnChange(ChangedEventArgs Args, Order Val, string field)

    {

        Val.GetType().GetProperty(field).SetValue(Val, Args.Value);

        var RowIndex = await Grid.GetRowIndexByPrimaryKey(Val.OrderID);

        await Grid.UpdateRow(RowIndex, Val);

    }

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 75).Select(x => new Order()

        {

            OrderID = 1000 + x,

            FirstName = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            LastName = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

}

[David van Duijne]

Edit the question strips out all the HTML markup in the example. Please see below for the HTML part:

<SfGrid @ref="Grid" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

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

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Visible="false" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>

        <GridColumn Field=@nameof(Order.FirstName) HeaderText="First Name" Width="150">

            <Template>

                @{

                    var employee = (context as Order);

                    <div>

                        First Name

                    </div>

                    <div @onkeydown:stopPropagation="true">

                        <SfTextBox Value="@employee.FirstName" ValueChange="@((args)=>OnChange(args,employee, "FirstName"))"></SfTextBox>

                    </div>

                }

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(Order.LastName) HeaderText="Last Name" Width="150">

            <Template>

                @{

                    var employee = (context as Order);

                    <div>

                        Last Name

                    </div>

                    <div @onkeydown:stopPropagation="true">

                        <SfTextBox Value="@employee.LastName" ValueChange="@((args)=>OnChange(args,employee, "LastName"))"></SfTextBox>

                    </div>

                }

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

[Rahul Narayanasamy]

Hi David, 

Greetings from Syncfusion. 

We have validated your query with the provided details and we have modified the sample to work correctly. Now, the delete and add operations are work without any issues. Find the below sample for your reference. 

 

<SfGrid @ref="Grid" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

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

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Visible="false" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn> 

        <GridColumn Field=@nameof(Order.FirstName) HeaderText="First Name" Width="150"> 

            <Template> 

                @{ 

                    var employee = (context as Order); 

                    <div> 

                        First Name 

                    </div> 

                    <div @onkeydown:stopPropagation="true"> 

                        <SfTextBox @bind-Value="@employee.FirstName"></SfTextBox> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.LastName) HeaderText="Last Name" Width="150"> 

            <Template> 

                @{ 

                    var employee = (context as Order); 

                    <div> 

                        Last Name 

                    </div> 

                    <div @onkeydown:stopPropagation="true"> 

                        <SfTextBox @bind-Value="@employee.LastName"></SfTextBox> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

Sample: https://www.syncfusion.com/downloads/support/forum/160745/ze/BlazorApp1Modified-1260363641  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[David van Duijne]

Hi Rahul,

Thanks, it was that simple? I wonder why the previous question on how to achieve this editable card like row included the @OnChange event then.

Nevertheless, this works, thanks.

Kind regards,

David.

[Rahul Narayanasamy]

Hi David, 

Thanks for the update.  

We are happy to hear that the provided solution was helpful to achieve your requirement. Please let us know if you have any concerns. 

Regards, 

Rahul