<TelerikGrid Data="@MyData"
             Size="@ThemeConstants.Grid.Size.Small"
             ScrollMode="GridScrollMode.Virtual"
             Sortable="true" 
             FilterMode="@GridFilterMode.FilterRow"
             RowHeight="100"
			 PageSize="50"
             Width="1000px"
             Height="600px">
	<GridColumns>
		<GridColumn Title="#" Width="100px">
			<Template>
				@{
					var row = context as ExpandoObject;
					var rowIndex = MyData.IndexOf(row) + 1;
				}
				@rowIndex
			</Template>
		</GridColumn>

		@{
			foreach (var item in MyData.First())
			{
				<GridColumn Field="@item.Key" FieldType="@item.Value.GetType()"
							Title="@item.Key.Replace("_"," ")"
				            Width="@(item.Key.EndsWith("3") ? "300px" : "75px")">
				</GridColumn>
			}
			
		}
	</GridColumns>
</TelerikGrid>

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