<TelerikDockManager Height="100vh" OnStateChanged="OnStateChanged" OnStateInit="OnStateInit" @ref="dockManager">
        <DockManagerPanes>
            <DockManagerSplitPane>
                <Panes>
                    <DockManagerContentPane Closeable="false" Maximizable="true" HeaderText="Content1 header" @bind-Size="Content1PaneSize">
                        <Content>
                            <div>
                                yada yada 
                            </div>
                        </Content>
                    </DockManagerContentPane>
                    <DockManagerSplitPane Orientation="DockManagerPaneOrientation.Vertical">
                        <Panes>
                            <DockManagerContentPane Maximizable="false" Closeable="false" @bind-Size="Content2PaneSize">
                                <HeaderTemplate>
                                    <span>content 2 header gets erased</span>
                                </HeaderTemplate>
                                <Content>
                                    <div>
                                        Content 2
                                    </div>
                                </Content>
                            </DockManagerContentPane>
                            <DockManagerContentPane HeaderText="header 3" Closeable="false" @bind-Size="Content3PaneSize">
                                <Content>
                                    <div>
                                        content 3
                                    </div>
                                </Content>
                            </DockManagerContentPane>
                        </Panes>
                    </DockManagerSplitPane>
                </Panes>
            </DockManagerSplitPane>
        </DockManagerPanes>
    </TelerikDockManager>

 <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)