@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@using System.IO

<TelerikGrid TItem="@object"
             LoadGroupsOnDemand="true"
             Groupable="true"
             OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
             OnRead="@ReadItems"
             ScrollMode="@GridScrollMode.Virtual" PageSize="20" RowHeight="60"
             Navigable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Height="600px">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" FieldType="@typeof(string)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.Team)" FieldType="@typeof(string)" Title="Team" />
        <GridColumn Field="@nameof(Employee.Salary)" FieldType="@typeof(decimal)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.IsOnLeave)" FieldType="@typeof(bool)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    List<object> GridData { get; set; }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        DataEnvelope<Employee> result = await MyService.GetData(args.Request);

        if (args.Request.Groups.Count > 0)
        {
            args.Data = result.GroupedData.Cast<AggregateFunctionsGroup>().ToList();
        }
        else
        {
            args.Data = result.CurrentPageData.Cast<Employee>().ToList();
        }

        args.Total = result.TotalItemCount;

        if (args.Request.Groups.Count > 0)
        {
            try
            {
                List<AggregateFunctionsGroup> items = result.GroupedData.Cast<AggregateFunctionsGroup>().ToList();

                await using var s = new MemoryStream();
                await System.Text.Json.JsonSerializer.SerializeAsync(s, items);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
        }
    }

    void OnStateInitHandler(GridStateEventArgs<object> args)
    {
        // set initial grouping
        GridState<object> desiredState = new GridState<object>()
        {
            GroupDescriptors = new List<GroupDescriptor>()
    {
                new GroupDescriptor()
                {
                    Member = "Team",
                    MemberType = typeof(string)
                },
                new GroupDescriptor()
                {
                    Member = "IsOnLeave",
                    MemberType = typeof(bool)
                }
            }
        };

        args.GridState = desiredState;
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
        public decimal Salary { get; set; }
    }

    public class DataEnvelope<T>
    {
        public List<AggregateFunctionsGroup> GroupedData { get; set; }
        public List<T> CurrentPageData { get; set; }
        public int TotalItemCount { get; set; }
    }

    public static class MyService
    {
        private static List<Employee> SourceData { get; set; }
        public static async Task<DataEnvelope<Employee>> GetData(DataSourceRequest request)
        {
            if (SourceData == null)
            {
                SourceData = new List<Employee>();
                var rand = new Random();
                for (int i = 1; i <= 2500; i++)
                {
                    SourceData.Add(new Employee()
                    {
                        EmployeeId = i,
                        Name = "Employee " + i.ToString(),
                        Team = "Team " + i % 100,
                        IsOnLeave = i % 3 == 0,
                        Salary = rand.Next(1000, 5000)
                    });
                }
            }

            await Task.Delay(500);// deliberate delay to showcase async operations, remove in a real app

            // retrieve data as needed, you can find more examples and runnable projects here
            // https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
            var datasourceResult = SourceData.ToDataSourceResult(request);

            DataEnvelope<Employee> dataToReturn;

            if (request.Groups.Count > 0)
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    GroupedData = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }
            else
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    CurrentPageData = datasourceResult.Data.Cast<Employee>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }

            return await Task.FromResult(dataToReturn);
        }
    }
}

    DataSourceRequest request1 = new()
    {
         Filters = new[] {new FilterDescriptor("Test", FilterOperator.IsEqualTo, DateTime.Now.Date) {MemberType = typeof(DateTime)}},
         Sorts = new List<SortDescriptor>()
    };

    DataSourceRequest request2 = new()
    {
         Filters = new[] { new FilterDescriptor("Test", FilterOperator.IsEqualTo, DateTime.Now.Date) { MemberType = typeof(DateTime?) } },
         Sorts = new List<SortDescriptor>()
    };

    string query1 = request1.ToODataString(); // outputs $count=true&$filter=(Test%20eq%202022-05-12T00:00:00.0000000Z)&$skip=0
    string query2 = request2.ToODataString(); // outputs $count=true&$filter=(Test%20eq%202022-05-12%2000:00:00)&$skip=0

Is Groupable: @IsGroupable
<TelerikButton OnClick="@ToggleGroupable">Toggle Groupable</TelerikButton>

@if (isGridVisible)
{
    <TelerikGrid Data=@GridData @ref="@GridRef" Groupable="@IsGroupable" Pageable="true" Height="400px">
        <GridColumns>
            <GridColumn Field=@nameof(Employee.Name) Groupable="false" />
            <GridColumn Field=@nameof(Employee.Team) Title="Team" />
            <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
        </GridColumns>
    </TelerikGrid>
}

@code {
    bool IsGroupable { get; set; }
    bool isGridVisible { get; set; } = true;
    TelerikGrid<Employee> GridRef { get; set; }
    async Task ToggleGroupable()
    {
        //save state (sorting, paging,...) - it will be lost when we hide the grid
        var state = GridRef.GetState();

        //hide the grid so it can later re-initialize with the new groupable setting
        isGridVisible = false;
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        IsGroupable = !IsGroupable;
        isGridVisible = true;

        //afte the grid re-initialized and rendered with the new setting, restore its state
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        await GridRef.SetState(state);
    }


    public List<Employee> GridData { get; set; }

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

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

<GridColumn Field="@nameof(SalesOrderLineItem.Quantity)">
    <HeaderTemplate>
        <span title="Order Quantity">Order Quantity</span>
    </HeaderTemplate>
</GridColumn>