@using Telerik.DataSource;
@inject NavigationManager NavMan

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Single"
             SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
             Pageable="true"
             Height="300px"
             OnStateInit="@((GridStateEventArgs<Employee> args) => OnStateInitHandler(args))">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }
    public Employee SelectedEmployee { get; set; }

    async Task OnStateInitHandler(GridStateEventArgs<Employee> args)
    {
        GridState<Employee> desiredState = new GridState<Employee>()
        {
            SortDescriptors = new List<SortDescriptor>()
            {
                new SortDescriptor { Member = "EmployeeId", SortDirection = ListSortDirection.Descending }
            }
        };
        args.GridState = desiredState;
    }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }
    }

    protected async Task OnSelect(IEnumerable<Employee> employees)
    {
        SelectedEmployee = employees.FirstOrDefault();

        NavMan.NavigateTo("counter");
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}