@using System.Collections.ObjectModel

<div class="d-flex flex-row my-2">
    <TelerikButton OnClick="@AddForecast">Add Item</TelerikButton>
    <TelerikButton OnClick="@RemoveForecast">Remove Item</TelerikButton>
    <TelerikButton OnClick="@ChangeData">Change Collection</TelerikButton>
</div>

<TelerikGrid Data=@GridData Height="400px" Pageable="true">
    <GridColumns>
        <GridColumn Field="Id" />
        <GridColumn Field="Name" />
    </GridColumns>
</TelerikGrid>

@code {
    public ObservableCollection<SampleData> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await LoadData();
    }

    private async Task LoadData()
    {
        var forecasts = Enumerable.Range(1, 45).Select(x => new SampleData { Id = x, Name = $"Name {x}" });

        GridData = new ObservableCollection<SampleData>(forecasts);
    }

    void AddForecast()
    {
        GridData.Add(new SampleData { Id = GridData.Count + 1, Name = $"name {GridData.Count + 1}" });
    }

    void RemoveForecast()
    {
        if (GridData.Count > 0)
        {
            GridData.RemoveAt(0);
        }
    }

    void ChangeData()
    {
        var forecasts = Enumerable.Range(1, 15).Select(x => new SampleData { Id = x, Name = $"Second collection - Name {x}" });

        GridData = new ObservableCollection<SampleData>(forecasts);
    }

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