<FormItems>
              <FormItem Field="@nameof(ViewModel.SomeField)" />
              <FormItem Field="@nameof(ViewModel.NumericField)" Enabled="@some_variable"/>
</FormItems>

<TelerikTreeView Data=“@TreeData”><TreeViewBindings><TreeViewBinding><ItemTemplate> @{ TreeItem itm = context as TreeItem; 

<span @onkeydown=“@(_ => NodeKeyDown(_))” tabindex=“0”> Node: <strong>@itm.Text</strong></span> 
}
 </ItemTemplate>
</TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
<label id=“result”>@result</label>

@code { string result { get; set; }

async Task NodeKeyDown(KeyboardEventArgs args)
{
    result = $"You pressed key: {args.Code}";
}

// sample data
public IEnumerable<TreeItem> TreeData { get; set; }

public class TreeItem
{
    public string Text { get; set; }
    public int Id { get; set; }
    public List<TreeItem> Items { get; set; } = new List<TreeItem>();
    public bool HasChildren { get; set; }
}

protected override void OnInitialized()
{
    LoadHierarchical();
}

private void LoadHierarchical()
{
    List<TreeItem> roots = new List<TreeItem>()
    {
        new TreeItem { Text = "Item 1", Id = 1, HasChildren = true },
        new TreeItem { Text = "Item 2", Id = 2, HasChildren = true }
    };

    roots[0].Items.Add(new TreeItem { Text = "Item 1 first child", Id = 3 });
    roots[0].Items.Add(new TreeItem { Text = "Item 1 second child", Id = 4 });
    roots[1].Items.Add(new TreeItem { Text = "Item 2 first child", Id = 5 });
    roots[1].Items.Add(new TreeItem { Text = "Item 2 second child", Id = 6 });

    TreeData = roots;
}
 
 
 

    

@using [***].Common.Dtos;
@using [***].Common.Enumerations;
@using [***].Features.EmployeeInfoAndTravelRequestLists.TravelRequestListingTab

@if (ViewModel is not null)
{
    <!-- Render loader until grid initial data load is complete -->
    @if(!ShouldRenderGrid)
    {
        {
            <div style="height:500px">
                <TelerikLoaderContainer></TelerikLoaderContainer>
            </div>
        }
    } else
    {
        <TelerikGrid OnRead="@TravelRequestGridOnReadAsync"
                        Class="grid-no-scroll"
                        TItem="@TravelRequestFullDto"
                        EnableLoaderContainer="true"
                        Pageable="true"
                        Sortable="true"
                        SortMode="SortMode.Multiple"
                        PageSize="10"
                        SelectionMode="@GridSelectionMode.Single"
                        FilterMode="GridFilterMode.FilterMenu">
            <!-- dropdown, search box and new request button above grid -->
            <GridToolBarTemplate>
                <div class="dropdown-list-container">
                    <TelerikDropDownList Width="100px" Data="@ViewModel.EmployeeStatuses" @bind-Value="ViewModel.EmployeeStatusDDLSelectedValue">
                        <DropDownListSettings>
                            <DropDownListPopupSettings Height="58px" />
                        </DropDownListSettings>
                    </TelerikDropDownList>
                </div>
                <GridSearchBox Placeholder="Name/SAP/Personal ID..."
                                Width="280px" />
                <button class="new-request-button"><span class="k-icon k-i-plus"></span>New Request</button>
            </GridToolBarTemplate>
            <GridColumns>
                <GridCheckboxColumn SelectAll="false" Width="40px" />
                <GridColumn Title="SAP Number" Width="195px">
                    <Template>
                        @{
                            var SAPNumber = ((TravelRequestFullDto)context).SAPNumber;
                            var RequestStatus = ((TravelRequestFullDto)context).Status;
                            // render a chip in travel request number column if record has a request status
                            <span>
                                @SAPNumber
                                <span class="cell-padding" />
                                <TelerikChip Class="travel-request-status-chip"
                                                Text=@TravelRequestStatusExtensions.ToDisplayValue(RequestStatus)
                                                Disabled=true
                                                Rounded="full"
                                                ThemeColor=@GetChipColorClass(RequestStatus) />
                            </span>
                        }
                    </Template>
                </GridColumn>
                <GridColumn Title="Workday Number" Field="@(nameof(TravelRequestFullDto.WorkdayNumber))" Width="140px" />
               <!-- other grid columns here.... -->
            </GridColumns>
        </TelerikGrid>
    }
}

<div><TelerikFloatingLabel Text="Level 1"><TelerikComboBox Class="justification" AllowCustom="true" Data="@L1" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value=@L1Value OnChange="@(GetNextLevelTest)"></TelerikComboBox></TelerikFloatingLabel></div>

@if (!String.IsNullOrEmpty(L1Value))
{
    <div><TelerikFloatingLabel Text="Level 2"><TelerikComboBox Class="justification" @ref="TestRef" id="L2" AllowCustom="true" Data="@L2" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value=@L2Value OnChange="@(() => GetNextLevel(L2Value, 2))"></TelerikComboBox></TelerikFloatingLabel></div>
}

@if (!String.IsNullOrEmpty(L2Value))
{
    <div><TelerikFloatingLabel Text="Level 3"><TelerikComboBox Class="justification" Data="@L3" AllowCustom="true" TextField="Name" ClearButton=false ValueField="TaxonomyId" @bind-Value="@L3Value" OnChange="@(() => GetNextLevel(L3Value, 3))"></TelerikComboBox></TelerikFloatingLabel></div>
}

@if (!String.IsNullOrEmpty(L3Value))
{
    <div><TelerikFloatingLabel Text="Level 4"><TelerikComboBox Class="justification" Data="@L4" AllowCustom="true" TextField="Name" ClearButton=false ValueField="TaxonomyId" @bind-Value="@L4Value" OnChange="@(() => GetNextLevel(L4Value, 4))"></TelerikComboBox></TelerikFloatingLabel></div>
}

@if (!String.IsNullOrEmpty(L4Value))
{
    <div><TelerikFloatingLabel Text="Level 5"><TelerikComboBox Class="justification" Data="@L5" AllowCustom="true" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value="@L5Value" OnChange="@(() => GetNextLevel(L5Value, 5))"></TelerikComboBox></TelerikFloatingLabel></div>
}

        /// <summary>
        /// Populates a change ddl based on the parent id of the previous ddl and adds the selection to a ChangeDetailDTO object.
        /// </summary>
        /// <param name="selectedValue">This has to be a string because of the ability to edit the selected value</param>
        /// <param name="level"></param>
        public async Task GetNextLevel(string selectedValue, int level)
        {
            //Get the appropriate Taxonomy List object
            var SelectedLevels = GetType().GetProperty(DDLGroup+"Levels"??"").GetValue(this,null) as List<TaxonomyDdlDTO>;

            //if this is replacing a level that is last in the index, remove the old value. 
            //further down I'm clearing a range if a new dd value is selected to remove all the child values

            if (string.IsNullOrEmpty(selectedValue))
                return;

            //if the selected value is not changed, do nothing.
            if (level <= SelectedLevels!.Count())
            {
                if (selectedValue == SelectedLevels[level-1].TaxonomyId)
                return;
            }

            int selectedId = 0;
            int.TryParse(selectedValue, out selectedId);

            //Parent int of 0 means its a top-level item
            if (selectedId != 0)
            {
                var currentLevel = TaxonomyList.Where(x => x.TaxonomyId == selectedValue).Single();
                if (!SelectedLevels.Contains(currentLevel))
                {
                    SelectedLevels.Add(currentLevel);
                };
            }
            else
            {
                if (SelectedLevels.Count <= level-1 && SelectedLevels[level - 2] != null)
                    SelectedLevels.RemoveAt(level - 2);

                    SelectedLevels.Add(new TaxonomyDdlDTO()
                {
                    TaxonomyId = selectedValue,
                    Name = selectedValue
                });
            }

            //Event passes the new selection object to the parent page
            if(DDLGroup == "Current")
                await CurrentLevelSelectedEvent.InvokeAsync(SelectedLevels);
            else
                await NewLevelSelectedEvent.InvokeAsync(SelectedLevels);

            //populates the next dropdown list based on the selection justmade
            var nextLevelTaxonomy = TaxonomyList.Where(x => x.ParentId == selectedId).ToList();

            //Level5 has no children.
            if (level <= 4)
                GetType().GetProperty(string.Concat("L", level + 1)).SetValue(this, nextLevelTaxonomy);

            if (SelectedLevels.Count > level)
                SelectedLevels.RemoveRange(level-1, SelectedLevels.Count-1);
        }