@page "/test"

<h1>Test TelerikGrid</h1>

<button @onclick="ToggleFilter">Toggle filter</button>
<br />
<br />
<p>@CurrentState</p>

<TelerikGrid Data=@CurrentGridData
             ScrollMode="@GridScrollMode.Virtual"
             Height="600px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu">
   <GridColumns>
      <GridColumn Field="Id" />
      <GridColumn Field="Name" Title="First Name" />
      <GridColumn Field="LastName" Title="Last Name" />
      <GridColumn Field="HireData" Width="200px">
         <Template>
            @((context as SampleData).HireDate.ToString("MMMM dd, yyyy"))
         </Template>
      </GridColumn>
   </GridColumns>
</TelerikGrid>

@code {
   public class SampleData
   {
      public int Id { get; set; }
      public string Name { get; set; }
      public string LastName { get; set; }
      public DateTime HireDate { get; set; }
   }

   public List<SampleData> CurrentGridData { get; private set; }

   public string CurrentState => _filterActive
      ? $"Filter active: {CurrentGridData.Count} rows"
      : $"All data displayed: {CurrentGridData.Count} rows - scroll down to the end and toggle the filter to see the problem";

   private List<SampleData> _gridData;
   privatebool _filterActive;

   protected override void OnInitialized()
   {
      _gridData = Enumerable.Range(1, 500).Select(x => new SampleData
         {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x)
         }).ToList();

      CurrentGridData = _gridData;
   }

   private void ToggleFilter()
   {
      _filterActive = !_filterActive;

      CurrentGridData = _filterActive
         ? _gridData.Skip(100).Take(25).ToList()
         : _gridData;
   }
}