<div class="row">
    <TelerikGrid Data="@Items">
        <RowTemplate Context="sampleData">
            @{
                string detailLink = $"info/{sampleData.Id}";
                string className = $"screenshot-hover-{sampleData.Id}";
                string selector = $".{className}";
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <TelerikTooltip TargetSelector="@selector" ShowOn="@TooltipShowEvent.Hover" Position="@TooltipPosition.Bottom">
                    <Template Context="ttipContext">
                        @{
                            var dataAttributes = ttipContext.DataAttributes;
                            var title = ttipContext.Title;
                            if (title != null && dataAttributes.ContainsKey("id"))
                            {
                                <img src="images/@(dataAttributes["id"])" alt="@title" />
                                <p>@title</p>
                            }
                        }
                    </Template>
                </TelerikTooltip>
            }
        </RowTemplate>

        <GridColumns>
            <GridColumn Field="@(nameof(SampleData.Name))" />
            <GridColumn Field="@(nameof(SampleData.Address))" />
            <GridColumn Field="@(nameof(SampleData.PhoneNumber))" />
        </GridColumns>
    </TelerikGrid>
</div>

@code {
    class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string PhoneNumber { get; set; }
    }

    SampleData[] Items { get; set; }

    protected async override Task OnInitializedAsync()
    {
        const int sampleSize = 25;
        Items = new SampleData[sampleSize];
        for (int i = 0; i < sampleSize; i++)
        {
            Items[i] = new SampleData
            {
                Id = i,
                Name = $"{i}.SomeName",
                Address = $"{i}{i}{i}{i} Cherry Lane",
                PhoneNumber = $"1-512-{i % 100:00}4-6000",
            };

        }

        await Task.CompletedTask;
    }
}

@{
    var model = ViewModel.Model;
}

<TelerikForm EditContext="@EditContext"
             Columns="2"
             ColumnSpacing="20px"
             Orientation="FormOrientation.Vertical"
             OnValidSubmit="OnValidSubmit">
    <FormValidation>
        <FluentValidationValidator />
    </FormValidation>
    <FormItems>
        <FormGroup LabelText="Set options">
            <FormItem>
                <Template>
                    <label class="k-label k-form-label" for="setName">Set Name</label>
                    <TelerikTextBox Id="setName" @bind-Value="@model.SetName"></TelerikTextBox>
                </Template>
            </FormItem>
            <FormItem>
                <Template>
                    <TelerikDateRangePicker @bind-StartValue="@model.StartDate"
                                            @bind-EndValue="@model.EndDate"
                                            Min="@ViewModel.MinStartDate"
                                            StartId="startDate"
                                            EndId="endDate"
                                            DisabledDates="@ViewModel.DisabledDates">
                    </TelerikDateRangePicker>
                </Template>
            </FormItem>
            <FormGroup Columns="2">
                <FormItem>
                    <Template>
                        <label class="k-label k-form-label" for="allowAutoFill">Allow Auto Fill</label>
                        <TelerikCheckBox Id="allowAutoFill" @bind-Value="@model.AllowAutoFill"></TelerikCheckBox>
                    </Template>
                </FormItem>
                <FormItem Field="@nameof(model.RequiredRecsToExpire)">
                    <Template>
                        <label class="k-label k-form-label">Required Recs to Expire</label>
                        <TelerikSlider @bind-Value="@model.RequiredRecsToExpire"
                                       Min="0"
                                       Max="20"
                                       SmallStep="1"
                                       LargeStep="5"
                                       ShowButtons="false"/>
                    </Template>
                </FormItem>
            </FormGroup>
        </FormGroup>
        <FormGroup LabelText="Initial starting point">
            <FormItem LabelText="existingSets">
                <Template>
                    <label class="k-label k-form-label" for="existingSets">From existing recommendation sets:</label>
                    <RecSetSelector AvailableSets="@ViewModel.AvailableSets"
                                    IsNew="true"
                                    SelectedSetId="@ViewModel.SelectedSetId"
                                    OnSetSelected="@OnSetSelected" />
                </Template>
            </FormItem>
            <FormItem>
                <Template>
                    <label class="k-label k-form-label" for="eanList">From a list of EANs:</label>
                    <TelerikTextArea Id="eanList"
                                     @bind-Value="@ViewModel.EanList"
                                     AutoSize="true">
                    </TelerikTextArea>
                </Template>
            </FormItem>
        </FormGroup>
        <FormItem ColSpan="2" Field="@nameof(model.Comment)">
            <Template>
                <TelerikTextArea Id="comment"
                                 @bind-Value="@model.Comment"
                                 AutoSize="true">

                </TelerikTextArea>
            </Template>
        </FormItem>
        <ValidationSummary />
    </FormItems>
    <FormButtons>
        <div class="justify-content-end">
            <TelerikButton ButtonType="ButtonType.Button" OnClick="OnCancel">Cancel</TelerikButton>
            <TelerikButton ButtonType="ButtonType.Submit" Primary="true">Save</TelerikButton>
        </div>
    </FormButtons>
</TelerikForm>

Error: System.InvalidOperationException: No generic method 'Sum' on type 'System.Linq.Enumerable' is compatible with the supplied type arguments and arguments. No type arguments should be provided if the method is non-generic. 
   at System.Linq.Expressions.Expression.FindMethod(Type type, String methodName, Type[] typeArgs, Expression[] args, BindingFlags flags)
   at System.Linq.Expressions.Expression.Call(Type type, String methodName, Type[] typeArguments, Expression[] arguments)
   at Telerik.DataSource.Expressions.EnumerableSelectorAggregateFunctionExpressionBuilder.CreateMethodCallExpression(LambdaExpression memberSelectorExpression)
   at Telerik.DataSource.Expressions.EnumerableSelectorAggregateFunctionExpressionBuilder.CreateAggregateExpression()
   at Telerik.DataSource.EnumerableSelectorAggregateFunction.CreateAggregateExpression(Expression enumerableExpression, Boolean liftMemberAccessToNull)
   at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.<ProjectionPropertyValueExpressions>b__39_0(AggregateFunction f)
   at System.Linq.Enumerable.SelectIListIterator`2.ToList()
   at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.CreateProjectionInitExpression()
   at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.CreateAggregateFunctionsProjectionMemberBinding()
   at Telerik.DataSource.Expressions.QueryableAggregatesExpressionBuilder.CreateMemberBindings()+MoveNext()
   at System.Collections.Generic.LargeArrayBuilder`1.AddRange(IEnumerable`1 items)
   at System.Collections.Generic.EnumerableHelpers.ToArray[T](IEnumerable`1 source)
   at System.Linq.Enumerable.ToArray[TSource](IEnumerable`1 source)
   at System.Dynamic.Utils.CollectionExtensions.ToReadOnly[T](IEnumerable`1 enumerable)
   at System.Linq.Expressions.Expression.MemberInit(NewExpression newExpression, IEnumerable`1 bindings)
   at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.CreateSelectBodyExpression()
   at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilder.CreateSelectExpression()
   at Telerik.DataSource.Expressions.GroupDescriptorExpressionBuilderBase.CreateQuery()
   at Telerik.DataSource.Extensions.QueryableExtensions.Aggregate(IQueryable source, IEnumerable`1 aggregateFunctions)
   at Telerik.DataSource.Extensions.QueryableExtensions.CreateDataSourceResult[TModel,TResult](IQueryable queryable, DataSourceRequest request, Func`2 selector)
   at Telerik.DataSource.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request)
   at Telerik.DataSource.Extensions.QueryableExtensions.ToDataSourceResult(IEnumerable enumerable, DataSourceRequest request)
   at Telerik.Blazor.Data.TelerikDataSourceBase.ProcessData(IEnumerable data)
   at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessDataInternal()
   at Telerik.Blazor.Components.Common.DataBoundComponent`1.ProcessDataAsync()
   at Telerik.Blazor.Components.TelerikGrid`1.DataBoundProcessData()
   at Telerik.Blazor.Components.TelerikGrid`1.ProcessDataAsync()
   at Telerik.Blazor.Components.TelerikGrid`1.ApplyFiltersAsync()
   at Telerik.Blazor.Components.TelerikGrid`1.OnFilterChange(FilterDescriptorBase filter)
   at Telerik.Blazor.Components.Common.Filters.TelerikFilterHeader`1.Filter(FilterDescriptor filterDescriptor)
   at Telerik.Blazor.Components.Common.Filters.TelerikFilterHeader`1.OnValueChanged(Object newValue)
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c.<.cctor>b__23_0(Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

@inject IJSRuntime JsInterop

<TelerikGrid Data="@salesTeamMembers" OnRowClick="@OnRowClickHandler" @ref="@GridRef">
    <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 {
    List<MainModel> salesTeamMembers { get; set; }
    TelerikGrid<MainModel> GridRef { get; set; }

    async Task OnRowClickHandler(GridRowClickEventArgs args) {
        // After adding this line, it now requires a double click when the InvokeAsync call uses "await"
         var width = JsInterop.InvokeAsync<int>("getWidth");


        var model = args.Item as MainModel;
        int index = salesTeamMembers.IndexOf(model);
        //todo: you may want to take paging into account for example, or use js interop to get the index of the row based on contents from it like id
        if (index > -1) {
            var state = GridRef.GetState();
            state.ExpandedRows = new List<int> { index };

            await GridRef.SetState(state);
        }

    }


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

<style>
    .k-animation-container {
        z-index: 15000;
    }
</style>


<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="300px" OnUpdate="@UpdateHandler">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Roles) Title="Position">
            <Template>
                @{
                    var item = context as SampleData;

                    @if (item.Roles.Any())
                    {
                        foreach (var role in item.Roles)
                        {
                            <span>@role</span>
                        }
                    }
                }
            </Template>
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <TelerikMultiSelect @bind-Value="@selectedValues" Data="@CurrentlyEditedEmployee.Roles"></TelerikMultiSelect>
                }
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    List<SampleData> MyData { get; set; }
    List<string> Roles { get; set; }
    SampleData CurrentlyEditedEmployee { get; set; }

    private List<string> selectedValues { get; set; }

    public async Task UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operations here through your service
        await MyService.Update(item);

        // update the local view-model data with the service data
        await GetGridData();
    }

    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public List<string> Roles { get; set; } = new List<string>() { "Test" };
    }

    async Task GetGridData()
    {
        MyData = await MyService.Read();
        Roles = await MyService.GetRoles();
    }

    protected override async Task OnInitializedAsync()
    {
        await GetGridData();
    }

    // the following static class mimics an actual data service that handles the actual data source
    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
    public static class MyService
    {
        private static List<SampleData> _data { get; set; } = new List<SampleData>();
        private static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };

        public static async Task<List<SampleData>> Read()
        {
            if (_data.Count < 1)
            {
                for (int i = 1; i < 50; i++)
                {
                    _data.Add(new SampleData()
                    {
                        ID = i,
                        Name = "Name " + i.ToString()
                    });
                }
            }

            return await Task.FromResult(_data);
        }

        public static async Task<List<string>> GetRoles()
        {
            return await Task.FromResult(Roles);
        }

        public static async Task Update(SampleData itemToUpdate)
        {
            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }
    }
}

    int readCounts { get; set; }
    protected async Task ReadItems(GridReadEventArgs args)
    {
        if (readCounts != 1) // the second call is skipped - that's where the problem lies
        {
            Console.WriteLine("ONREAD with skip " + args.Request.Skip);
            HttpResponseMessage response = await Http.PostAsJsonAsync("WeatherForecast", args.Request);

            if (response.StatusCode == System.Net.HttpStatusCode.OK)
            {
                DataEnvelope<WeatherForecast> envelope = await response.Content.ReadFromJsonAsync<DataEnvelope<WeatherForecast>>();

                GridData = envelope.CurrentPageData;
                Total = envelope.TotalItemCount;

                StateHasChanged();
            }
        }
        readCounts++;
    }

  public enum DeliveryMailOptions
        {
            Regular,
            [Display(Name ="FedEx Priority")]
            FedExPriority,
            [Display(Name ="FedEx Two-Day")]
            FedExTwoDay
        }

[Display(Name = "Mail Option")]
public DeliveryMailOptions MailOption { get; set; }

    body {
        display:flex;
    }

<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
        <br />
        <TelerikButton OnClick="@( _ => isSecondModalVisible = true )">Open the SECOND window</TelerikButton>
        <TelerikButton OnClick="@ShowConfirmWithTitle">Show Confirm</TelerikButton>
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikWindow Modal="true" @bind-Visible="@isSecondModalVisible">
    <WindowTitle>
        <strong>The SECOND</strong>
    </WindowTitle>
    <WindowContent>
        Second modal!
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikButton OnClick="@( _ => isModalVisible = true )">Open the window</TelerikButton>

@code{
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }
    bool isModalVisible { get; set; }
    bool isSecondModalVisible { get; set; }
    async Task ShowConfirmWithTitle()
    {
        bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?", "Confirmation!");

        Console.WriteLine($"The user is sure: {isConfirmed}.");
    }
}

    .k-animation-container {
        z-index: 987654;
    }