<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true">
        <GridColumns>
            <GridColumn Field="@nameof(SampleComplexObject.ID)" Title="ID"></GridColumn>
            <GridColumn Field="@nameof(SampleComplexObject.Name)" Title="The Name"></GridColumn>
            <GridColumn Title="First Nested Property" Field="SomeNavigationProperty.Field1">
                <GroupFooterTemplate>
                   Count: @context.Count
                </GroupFooterTemplate>
            </GridColumn>
            <GridColumn Field="SomeNavigationProperty.OtherField" />
        </GridColumns>
        <GridAggregates>
            <GridAggregate Field="SomeNavigationProperty.Field1" Aggregate="@GridAggregateType.Count" />
        </GridAggregates>
    </TelerikGrid>


@code {
    public class SampleComplexObject
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public NestedObject SomeNavigationProperty { get; set; } // use this field name for data binding
    }

    public class NestedObject
    {
        public string Field1 { get; set; }
        public string OtherField { get; set; }
    }

    public IEnumerable<SampleComplexObject> myData = Enumerable.Range(1, 50).Select(x =>
            new SampleComplexObject
            {
                ID = x,
                Name = "Name " + x,
                SomeNavigationProperty = new NestedObject
                {
                    Field1 = "first " + x % 4,
                    OtherField = "second " + x % 6
                }
            }
        );
}

<TelerikGrid Data="@MyData" Height="300px" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterMenu" Reorderable="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.ID))" Title="This title will not be rendered">
            <HeaderTemplate>
                Continent <br />
                <div style="text-align:center">Id</div>
                <div @onclick:stopPropagation="true" data-draggable="false">
                    <TelerikComboBox Data="@Continents" Filterable="true" class="headerCombo"
                                     @bind-Value="@SelectedContinentId"
                                     TextField="@nameof(Continent.Name)" ValueField="@nameof(Continent.Id)" Id="MyId">
                    </TelerikComboBox>
                </div>
            </HeaderTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(SampleData.Name) Title="First Name" />
    </GridColumns>
</TelerikGrid>

@code {
    /* Grid */
    string result { get; set; }
    void DoSomething()
    {
        result = $"button in header template clicked on {DateTime.Now}, something happened";
    }

    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        ID = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });

    /* ComboBox */

    public class Continent
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    IEnumerable<Continent> Continents = new List<Continent>() { new Continent { Id = 1, Name = "Africa" }, new Continent { Id = 2, Name = "Asia" }, new Continent { Id = 3, Name = "South America" } };
    public int SelectedContinentId { get; set; } = 1;

}

@using System.Net.Http.Json
@using System.Text.RegularExpressions
@using Telerik.Blazor.Extensions
@using WasmApp.Shared
@inject HttpClient Http

<TelerikGrid Data=@GridData
             Height="460px"
             RowHeight="60"
             PageSize="10"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow"
             SortMode="@SortMode.Multiple"
             OnRead=@ReadItems
             TotalCount=@Total>
    <GridColumns>
        <GridColumn Field="ProductID" />
        <GridColumn Field="ProductName" />
        <GridColumn Field="Discontinued" />
    </GridColumns>
</TelerikGrid>

@code{
    public List<ODataProduct> GridData { get; set; } = new List<ODataProduct>();
    public int Total { get; set; } = 0;

    protected async Task ReadItems(GridReadEventArgs args)
    {
        var baseUrl = "https://demos.telerik.com/kendo-ui/service-v4/odata/Products?";

        string OdataUrl = args.Request.ToODataString();

        // replace the original orederby clause with one that contains all the order rules
        Regex x = new Regex("(orderby=)(.*?)(&)", RegexOptions.IgnoreCase);
        string actualOrderByClause = "orderby=";

        for (int i = 0; i < args.Request.Sorts.Count; i++)
        {
            if (i > 0)
            {
                actualOrderByClause += ",";
            }
            string order = args.Request.Sorts[i].SortDirection == Telerik.DataSource.ListSortDirection.Ascending ? "" : "%20desc";
            actualOrderByClause += $"{args.Request.Sorts[i].Member}{order}";
        }

        actualOrderByClause += "&";

        string OdataQueryWithMultipleOrder = x.Replace(OdataUrl, actualOrderByClause);

        //do the request as usual
        var requestUrl = $"{baseUrl}{OdataQueryWithMultipleOrder}";

        ODataResponseOrders response = await Http.GetFromJsonAsync<ODataResponseOrders>(requestUrl);

        GridData = response.Products;
        Total = response.Total;
    }
}

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

<style>
    .custom-row-draggable-col-width.k-grid .k-drag-col {
        width: 100px;
    }
</style>

<TelerikGrid Data="@MyData" Height="400px"
             Class="custom-row-draggable-col-width"
             Pageable="true"
             Resizable="true"
             Reorderable="true"
             RowDraggable="true"
             OnRowDrop="@((GridRowDropEventArgs<SampleData> args) => OnRowDropHandler(args))">
    <GridSettings>
        <GridRowDraggableSettings DragClueField="@nameof(SampleData.Name)"></GridRowDraggableSettings>
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    private void OnRowDropHandler(GridRowDropEventArgs<SampleData> args)
    {
        //The data manipulations in this example are to showcase a basic scenario.
        //In your application you should implement them as per the needs of the project.

        MyData.Remove(args.Item);

        var destinationItemIndex = MyData.IndexOf(args.DestinationItem);

        if (args.DropPosition == GridRowDropPosition.After)
        {
            destinationItemIndex++;
        }

        MyData.Insert(destinationItemIndex, args.Item);
    }

    public List<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    }).ToList();

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}