@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid Data="@currentSalesTeamMembers"
             OnRowClick="@OnRowClickHandler"
             @ref="Grid"
             OnRead="@OnReadHandler"
             TotalCount="@Total"
             Sortable="true">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public TelerikGrid<MainModel> Grid { get; set; }
    public int Total { get; set; }
    List<MainModel> salesTeamMembers { get; set; }
    List<MainModel> currentSalesTeamMembers { get; set; } //implementation of OnRead

    public bool shouldPreventOnRead { get; set; }

    MainModel currentItem { get; set; } //need to save the selected item to determine its new index

    async Task OnReadHandler(GridReadEventArgs args)
    {
        var dataSourceResult = salesTeamMembers.ToDataSourceResult(args.Request);

        currentSalesTeamMembers = dataSourceResult.Data.Cast<MainModel>().ToList(); // this is the collection with the sorted items

        int currentIndexOfItem = currentSalesTeamMembers.IndexOf(currentItem);

        Total = dataSourceResult.Total;

        if (Grid != null && !shouldPreventOnRead)
        {
            await ExpandFromState(currentIndexOfItem);
        }

        shouldPreventOnRead = false;

        StateHasChanged();
    }

    async Task OnRowClickHandler(GridRowClickEventArgs args)
    {
        var item = args.Item as MainModel;

        int rowIndex = currentSalesTeamMembers.IndexOf(item);

        currentItem = currentSalesTeamMembers[rowIndex];

        await ExpandFromState(rowIndex);
    }

    async Task ExpandFromState(int rowIndex)
    {
        shouldPreventOnRead = true;

        var currentState = Grid.GetState();

        if (currentState.ExpandedRows.Contains(rowIndex))
        {
            currentState.ExpandedRows = new List<int>();
        }
        else
        {
            currentState.ExpandedRows = new List<int> { rowIndex };
        }

        await Grid.SetState(currentState);
    }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
}

<TelerikGrid Data="@salesTeamMembers"
             OnRowClick="@OnRowClickHandler"
             @ref="Grid"
             Sortable="true">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public TelerikGrid<MainModel> Grid { get; set; }
    List<MainModel> salesTeamMembers { get; set; }

    async Task OnRowClickHandler(GridRowClickEventArgs args)
    {
        var item = args.Item as MainModel;

        await ExpandFromState(item);
    }

    async Task ExpandFromState(MainModel row)
    {
        var currentState = Grid.GetState();

        if (currentState.ExpandedItems.Contains(row))
        {
            currentState.ExpandedItems = new List<MainModel>();
        }
        else
        {
            currentState.ExpandedItems = new List<MainModel>(row);
        }

        await Grid.SetState(currentState);
    }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
}