<TelerikCalendar Views="1"
                 View="CalendarView.Month"
                 SelectionMode="CalendarSelectionMode.Range"
                 RangeStart="@StartTime"
                 RangeEnd="@EndTime"
                 RangeStartChanged="@((DateTime value) => { StartTime = value.Date + value.TimeOfDay; })"
                 RangeEndChanged="@((DateTime value) => { EndTime = value.Date + value.TimeOfDay; })">
</TelerikCalendar>
<br />
START DATE: @StartTime
<br />
END DATE: @EndTime

<br />

<TelerikDateInput @bind-Value="@inputTimeForStartDate" OnBlur="@OnBlurHandlerFirst" Format="hh:mm">
</TelerikDateInput>

<TelerikDateInput @bind-Value="@inputTimeForEndDate" OnBlur="@OnBlurHandlerSecond" Format="hh:mm">
</TelerikDateInput

DateTime inputTimeForStartDate { get; set; }
DateTime inputTimeForEndDate { get; set; }

public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }

private void OnBlurHandlerFirst()
{
    StartTime += inputTimeForStartDate.TimeOfDay;
}

private void OnBlurHandlerSecond()
{
    EndTime += inputTimeForEndDate.TimeOfDay;

<TelerikTreeList Data=Data
                 IdField="@nameof(Record.Id)"
                 ParentIdField="@nameof(Record.ParentId)"
                 Height="100%">
    <TreeListColumns>
        <TreeListCheckboxColumn CheckBoxOnlySelection="true" />
        <TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
        <TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
        <TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
    </TreeListColumns>
</TelerikTreeList>
@code {
    protected IEnumerable<Record> Data = new List<Record>();

    protected override void OnInitialized()
    {
        Data = Enumerable.Range(1, 10).Select(i => new Record(i));
    }

    public class Record
    {
        public Record(int i)
        {
            Id = i;
            if (i % 5 == 1)
                ParentId = null;
            else
                ParentId = (i - ((i - 1) % 5));
            Text = "Item " + i;
        }
        public long Id { get; set; }
        public long? ParentId { get; set; }
        public string Text { get; set; }
    }
} 

<TelerikTreeList Data=Data
                 IdField="@nameof(Record.Id)"
                 ParentIdField="@nameof(Record.ParentId)"
                 Height="100%">
    <TreeListColumns>
        <TreeListCheckboxColumn CheckBoxOnlySelection="true" />
        <TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
        <TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
        <TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
    </TreeListColumns>
</TelerikTreeList>
@code {
    protected List<Record> Data = new List<Record>();

    protected override void OnInitialized()
    {
        Data = Enumerable.Range(1, 10).Select(i => new Record(i)).ToList();
    }

    public class Record
    {
        public Record(int i)
        {
            Id = i;
            if (i % 5 == 1)
                ParentId = null;
            else
                ParentId = (i - ((i - 1) % 5));
            Text = "Item " + i;
        }
        public long Id { get; set; }
        public long? ParentId { get; set; }
        public string Text { get; set; }
    }
} 

 <TelerikDialog @ref="@DialogRef" Visible="@ShowDialog" Width="600px" Title="My Dialog" VisibleChanged="@WindowVisibilityChangeHandler">
     <DialogContent>
         <TelerikFilter Value="@Value" OnUpdate="@((value) => OnFilterUpdate(value))">
             <FilterFields>
                 <FilterField Name="@(nameof(Person.EmployeeId))" Type="@(typeof(int))" Label="Id"></FilterField>
                 <FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="First Name"></FilterField>
                 <FilterField Name="@(nameof(Person.AgeInYears))" Type="@(typeof(int))" Label="Age"></FilterField>
             </FilterFields>
         </TelerikFilter>
   </DialogContent>
   <DialogButtons>
    <TelerikButton OnClick="@(() => ResetDialogState())">Cancel</TelerikButton>
    <TelerikButton ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" OnClick="@(() => PrimaryAction())">Confirm</TelerikButton>
</DialogButtons>
</TelerikDialog>

@code {
private CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();

private void OnFilterUpdate(object filter)
{
    if (filter is null)
    {
        return;
    }
    Value = (CompositeFilterDescriptor)filter;
    DialogRef.Refresh();
}

public class Person
{
    public int EmployeeId { get; set; }
    public string Name { get; set; } = string.Empty;
    public int AgeInYears { get; set; }
}
}

 Unhandled exception rendering component: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
      System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
         at System.Collections.ObjectModel.Collection`1.RemoveAt(Int32 index)
         at Telerik.Blazor.Components.Filter.FilterGroup.OnFilterRemove(Int32 index, String removedFilterId)
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

@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; }
    }
}