<TelerikGrid TItem="@MaintenanceCounterpartyModel" OnRead="@GridReadHandler" Pageable="true" Sortable="true" @ref="@GridRef" Id="MA-MaintenanceGrid" EditMode="@Telerik.Blazor.GridEditMode.Popup">
	<GridToolBarTemplate>
		<GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
		<span id="search-on-grid" class="k-textbox k-grid-search k-display-flex" style="width: auto; margin-left: 15px;">
			<span class="k-input-icon">
				<span class="k-icon k-i-search"/>
			</span>
			<TelerikTextBox Value="@SearchValue" ValueChanged="@SearchGrid" Placeholder="Search counterparties..." AutoComplete="off" Id="MA-MaintenanceGridToolbarSearch"/>
			<span unselectable="on" class="k-clear-value" title="clear" role="button" tabindex="-1" @onclick="async () => await ClearSearch()">
				<span class="k-icon k-i-x"/>
			</span>
		</span>
		<GridCommandButton Command="Add" Icon="@FontIcon.Plus" Id="M-AddNewCounterParty" Class="k-button k-primary add-counterparty-button">NEW COUNTERPARTY</GridCommandButton>
	</GridToolBarTemplate>
	<GridExport>
		<GridExcelExport FileName="Counterparties" AllPages="true"/>
	</GridExport>
	<GridSettings>
		<GridPopupEditSettings Title="Add new Counterparty">
		</GridPopupEditSettings>
		<GridPopupEditFormSettings>
			<FormTemplate>
                                @{
                                    CPEditItem = context.Item as MaintenanceCounterpartyModel;

                                    <TelerikForm Model="@CPEditItem" OnValidSubmit="@OnValidSubmit">
					<FormValidation>
						<DataAnnotationsValidator/>
					</FormValidation>
					<FormItems>
						<FormItem Field="@nameof(MaintenanceCounterpartyModel.CounterpartyName)"/>
					</FormItems>
					<FormButtons>
						<TelerikButton Icon="@nameof(FontIcon.Save)">Save</TelerikButton>
						<TelerikButton Icon="@nameof(FontIcon.Cancel)" ButtonType="@ButtonType.Button" OnClick="@OnCancel">Cancel</TelerikButton>
					</FormButtons>
				</TelerikForm>
                                }
			</FormTemplate>
		</GridPopupEditFormSettings>
	</GridSettings>
	<GridColumns>
		<GridColumn Title="Counterparty ID" Field="CounterpartyID"/>
		<GridColumn Title="Counterparty Name" Field="CounterpartyName"/>
		<GridColumn Title="Create User" Field="CreateUser"/>
		<GridColumn Title="Create Datetime" Field="CreateDateTime"/>
		<GridColumn Title="Update User" Field="UpdateUser"/>
		<GridColumn Title="Update Datetime" Field="UpdateDateTime"/>
	</GridColumns>
	<DetailTemplate Context="counterparty">
		<TelerikGrid Data="counterparty.LegalEntities">
			<GridColumns>
				<GridColumn Title="Legal Entity ID" Field=@nameof(MaintenanceCounterpartyLegalModel.LegalEntityID)/>
				<GridColumn Title="Legal Entity Name" Field=@nameof(MaintenanceCounterpartyLegalModel.LegalEntityName)/>
				<GridColumn Title="Jurisdiction" Field=@nameof(MaintenanceCounterpartyLegalModel.Jurisdiction)/>
				<GridColumn Title="Create User" Field=@nameof(MaintenanceCounterpartyLegalModel.CreateUser)/>
				<GridColumn Title="Create Datetime" Field=@nameof(MaintenanceCounterpartyLegalModel.CreateDateTime)/>
				<GridColumn Title="Update User" Field=@nameof(MaintenanceCounterpartyLegalModel.UpdateUser)/>
				<GridColumn Title="Update Datetime" Field=@nameof(MaintenanceCounterpartyLegalModel.UpdateDateTime)/>
			</GridColumns>
			<DetailTemplate Context="legalEntity">
				<TelerikGrid Data="legalEntity.RegistrationNumbers">
					<GridColumns>
						<GridColumn Title="Registration Number ID" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumberID)/>
						<GridColumn Title="Registration Type" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationType)/>
						<GridColumn Title="Registration Number" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumber)/>
						<GridColumn Title="Registration Date" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationNumber)/>
						<GridColumn Title="Registration Comments" Field=@nameof(MaintenanceRegistrationNumberModel.RegistrationDate)/>
					</GridColumns>
				</TelerikGrid>
			</DetailTemplate>
		</TelerikGrid>
	</DetailTemplate>
</TelerikGrid>

@code {
    privateint  _filteredCount = 0; // How to set this?
}
<TelerikGrid Data="@_applications"
             Pageable="false"
             Sortable="true"
             Resizable="true"
             FilterMode="@GridFilterMode.FilterRow"
             Width="100%"
             ScrollMode="@GridScrollMode.Virtual"
             OnStateInit="(GridStateEventArgs<ApplicationListDTO> args) => StateInitHandler(args)"
             OnStateChanged="(GridStateEventArgs<ApplicationListDTO> args) => StateChangedHandler(args)"
             Height="540px" RowHeight="60">
    <GridColumns>
    Column definitions left outfor brevity
    </GridColumns>
</TelerikGrid>
<div class="applicationCount">@(_applications.Count()) applications found, @_filteredCount listed</div>
  

@using Telerik.Blazor
@using Telerik.Blazor.Components

<div id="treeSelectorComponent">
    <span class="telerik-blazor k-dropdownlist k-valid k-picker k-picker-solid k-picker-md k-rounded-md"
          onclick="@ToggleDropdown">
        <span class="k-input-inner @( DropDownShown ? "k-state-focused" : "" )">
            <span class="k-input-value-text">@GetSelectedItemsText()</span>
        </span>
        <button class="telerik-blazor k-button k-input-button k-button-solid k-button-md k-button-solid-base k-icon-button"
                type="button">
            <span class="telerik-blazor k-button-icon k-icon k-i-caret-alt-down"></span>
        </button>
    </span>
    <TelerikAnimationContainer @ref="dropdown" Class="k-popup treeView-scrollable-element" >
        <TelerikTreeView Data="TreeItems"
                         SelectionMode="TreeViewSelectionMode.Single"
                         OnItemClick="OnTreeItemClicked">
            <TreeViewBindings>
                <TreeViewBinding ParentIdField="ParentId"
                                 TextField="Text"
                                 IdField="Id">
                    <ItemTemplate>
                        @{
                            TreeItemSelector item = context as TreeItemSelector;
                            <span>@item!.Text</span>
                        }
                    </ItemTemplate>
                </TreeViewBinding>
            </TreeViewBindings>
        </TelerikTreeView>
    </TelerikAnimationContainer>
</div>

@code {
    private bool DropDownShown { get; set; }
    private TelerikAnimationContainer dropdown;

    [Parameter, EditorRequired]
    public List<TreeItemSelector> TreeItems { get; set; } = new List<TreeItemSelector>();
    [Parameter]
    public int TreeId { get; set; } = default!;
    [Parameter]
    public EventCallback<int> TreeIdChanged { get; set; }

    async Task ToggleDropdown()
    {
        DropDownShown = !DropDownShown;
        await dropdown.ToggleAsync();
    }
    string GetSelectedItemsText()
    {
        return TreeItems.FirstOrDefault(p => p.Id == TreeId)?.Text!;
    }

    private async Task OnTreeItemClicked(TreeViewItemClickEventArgs arg)
    {
        var item = arg.Item as TreeItemSelector;
        TreeId = item!.Id;
        if(TreeIdChanged.HasDelegate)
            await TreeIdChanged.InvokeAsync(TreeId);

        await ToggleDropdown();
    }

  public class TreeItemSelector 
  {
      public int Id { get; set; }
      public string Text { get; set; }
      public int? ParentId { get; set; }
      public bool HasChildren { get; set; }
  }
}

#treeSelectorComponent {
    .k-popup {
        &.treeView-scrollable-element{
            overflow-y: auto;
            max-height: 300px;
        }
    }
}