Declined
Last Updated: 09 Jul 2025 10:16 by ADMIN
Rob
Created on: 04 Jun 2020 22:58
Category: Grid
Type: Bug Report
0
Grid OnRead .Clear()

Grid OnRead .Clear() Issue

With the following component:

@page "/counter"
@using System.Collections.ObjectModel
General grid with its most common features
<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> MyData { get; set; } = new List<SampleData>();
    //public ObservableCollection<SampleData> MyData { get; set; } = new ObservableCollection<SampleData>();
    private int page = 1;

    private void ReadItems(GridReadEventArgs args)
    {
        //MyData = new List<SampleData>();  //OK!
        //MyData = new ObservableCollection<SampleData>(); //OK!
        MyData.Clear();  //List: No update. ObservableCollection: System.StackOverflowException!
        Populate();
        StateHasChanged();
    }

    private void Populate()
    {
        foreach (var data in Enumerable.Range((page - 1) * 5, 5).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        }))
        {
            MyData.Add(data);
        }
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

I see the issues in the comment fields.  Changing OnRead to async makes no difference.  

The workaround is to assign a new List or ObservableCollection instead of using .Clear()

3 comments
ADMIN
Ivan Danchev
Posted on: 09 Jul 2025 10:16

Hello Rob,

Yes, you are correct. Binding the Grid through the Data parameter and binding it using the OnRead event are two alternative binding approaches that should not be mixed together. 

Regards,
Ivan Danchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Rob
Posted on: 03 Jul 2025 22:35

I found this old thread in my search of infinite loop with OnRead.  I noticed you are using Data and OnRead, I was told by Telerik support that it's one or the other but NOT both.

<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >

This seems to be contradiction what Marin indicated.

Rob.

ADMIN
Marin Bratanov
Posted on: 05 Jun 2020 07:37

Hello Rob,

When an observable collection is .Clear()-ed, the grid monitors that and updates its data. Now that you have bound the OnRead event, it will fire. This will, in turn, update the collection again and so you get an infinite loop which causes the stack overflow. I will add this info to the docs (commit).

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.