@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             OnRead="@OnGridRead"
             TItem="@Product"
             EditMode="@GridEditMode.Incell"
             OnCreate="@OnGridCreate"
             OnDelete="@OnGridDelete"
             OnUpdate="@OnGridUpdate"
             Height="600px">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Name)) )">
                    <TelerikTextBox @bind-Value="@dataItem.Name" />
                </span>
            </EditorTemplate>
        </GridColumn>
        @* <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" /> *@
        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Discontinued)) )">
                    <TelerikCheckBox @bind-Value="@dataItem.Discontinued" />
                </span>
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn Width="180px">
            <GridCommandButton Command="Delete">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product>? GridRef { get; set; }

    private ProductService GridProductService { get; set; } = new();

    private async Task OnGridCellFocusOut(string field)
    {
        await Task.Delay(100);

        if (GridRef is null)
        {
            return;
        }

        GridState<Product> gridState = GridRef.GetState();
        Product? editItem = gridState.EditItem as Product;

        if (editItem is null)
        {
            return;
        }

        GridCommandEventArgs args = new GridCommandEventArgs()
        {
             Field = field,
             Item = editItem
        };

        await OnGridUpdate(args);


        gridState.EditField = default;
        gridState.EditItem = default!;
        gridState.OriginalEditItem = default!;

        await GridRef.SetStateAsync(gridState);
    }

    private async Task OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        await GridProductService.Create(createdItem);
    }

    private async Task OnGridDelete(GridCommandEventArgs args)
    {
        var deletedItem = (Product)args.Item;

        await GridProductService.Delete(deletedItem);
    }

    private async Task OnGridRead(GridReadEventArgs args)
    {
        DataSourceResult result = await GridProductService.Read(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    private async Task OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;

        await GridProductService.Update(updatedItem);
    }

    public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
        public decimal? Price { get; set; }
        public int Quantity { get; set; }
        [Required]
        public DateTime? ReleaseDate { get; set; }
        public bool Discontinued { get; set; }
    }

    #region Data Service

    public class ProductService
    {
        private List<Product> Items { get; set; } = new();

        private int LastId { get; set; }

        public async Task<int> Create(Product product)
        {
            await SimulateAsyncOperation();

            product.Id = ++LastId;

            Items.Insert(0, product);

            return LastId;
        }

        public async Task<bool> Delete(Product product)
        {
            await SimulateAsyncOperation();

            if (Items.Contains(product))
            {
                Items.Remove(product);

                return true;
            }

            return false;
        }

        public async Task<List<Product>> Read()
        {
            await SimulateAsyncOperation();

            return Items;
        }

        public async Task<DataSourceResult> Read(DataSourceRequest request)
        {
            return await Items.ToDataSourceResultAsync(request);
        }

        public async Task<bool> Update(Product product)
        {
            await SimulateAsyncOperation();

            int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);

            if (originalItemIndex != -1)
            {
                Items[originalItemIndex] = product;
                return true;
            }

            return false;
        }

        private async Task SimulateAsyncOperation()
        {
            await Task.Delay(100);
        }

        public ProductService(int itemCount = 5)
        {
            Random rnd = Random.Shared;

            for (int i = 1; i <= itemCount; i++)
            {
                Items.Add(new Product()
                {
                    Id = ++LastId,
                    Name = $"Product {LastId}",
                    Description = $"Multi-line\ndescription {LastId}",
                    Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m,
                    Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000),
                    ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)),
                    Discontinued = LastId % 2 == 0
                });
            }
        }
    }

    #endregion Data Service
}

@page "/"

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Multiple"
             SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
             SelectedItems="@PersistedSelectedItems"
             @bind-Page="@CurrentPage"
             PageSize="@PageSize"
             Pageable="true"
             FilterMode="GridFilterMode.FilterRow"
             OnStateChanged="@((GridStateEventArgs<Employee> args) => OnStateChangedHandler(args))">
    <GridColumns>
        <GridCheckboxColumn />
        <GridColumn Field=@nameof(Employee.EmployeeId) />
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) />
    </GridColumns>
</TelerikGrid>

@if (PersistedSelectedItems != null)
{
    <ul>
        @foreach (Employee employee in PersistedSelectedItems.OrderBy(e => e.EmployeeId))
        {
            <li>
                @employee.EmployeeId
            </li>
        }
    </ul>
}

@code {
    public List<Employee> PersistedSelectedItems { get; set; } = new List<Employee>();
    int CurrentPage { get; set; }
    int PageSize { get; set; } = 5;

    private async void OnStateChangedHandler(GridStateEventArgs<Employee> args)
    {
        await Task.Delay(5000);
    }

    protected void OnSelect(IEnumerable<Employee> employees)
    {
        IEnumerable<Employee> CurrentPageEmployees = GridData.Skip(PageSize * (CurrentPage - 1)).Take(PageSize);

        if (employees == null || employees.Count() == 0)
        {
            //the user de-selected all items with the header checkbox
            PersistedSelectedItems = PersistedSelectedItems.Except(CurrentPageEmployees).ToList();
        }
        else
        {
            //handle any deselected items
            var UnselectedEmployees = CurrentPageEmployees.Except(employees);
            PersistedSelectedItems = PersistedSelectedItems.Except(UnselectedEmployees).ToList();

            //add any new items if they were not selected already
            foreach (var item in employees)
            {
                if (!PersistedSelectedItems.Contains(item))
                {
                    PersistedSelectedItems.Add(item);
                }
            }
        }
    }

    //data binding and sample data
    public List<Employee> GridData { get; set; }

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

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

<TelerikButton OnClick="@LoadData">Load Data</TelerikButton>

<TelerikGrid Data=@adminUsers Height="300px" Pageable=true PageSize=10 SelectionMode="@GridSelectionMode.Multiple"
             @bind-SelectedItems="SelectedAdminUsers">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true"></GridCheckboxColumn>
        <GridColumn Field=@nameof(User.DisplayName) Title="User Name" />
        <GridColumn Field=@nameof(User.Department) Title="Department" />
        <GridColumn Field=@nameof(User.Status) Title="Status" />
        <GridColumn Field=@nameof(User.EmployeeId) Title="Employee Id" />
    </GridColumns>

</TelerikGrid>

@code
{
    public IEnumerable<User> SelectedAdminUsers { get; set; } = Enumerable.Empty<User>();

    public List<User> adminUsers { get; set; }

    void LoadData()
    {
        adminUsers = Enumerable.Range(1, 200).Select(x => new User
        {
            EmployeeId = x,
            Status = $"status {x}",
            Department = $"department {x}",
            DisplayName = $"name {x}"
        }
        ).ToList();
    }

    public class User
    {
        public string DisplayName { get; set; }
        public string Department { get; set; }
        public string Status { get; set; }
        public int EmployeeId { get; set; }
    }
}

@using Telerik.Blazor.Common.Export.Excel
@using Telerik.Blazor.Components.Grid

<TelerikGrid TItem="@FlowRun"
             Pageable="true"
             OnRead="@GetData">

    <GridToolBar>
        <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
        <GridCommandButton Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>

    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeExcelExport" />
        <GridCsvExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeCsvExport" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(FlowRun.FileName)" Title="File Name" Width="300px" />
        <GridColumn Field="@nameof(FlowRun.Type)" Title="Type" Width="100px" />
        <GridColumn Field="@nameof(FlowRun.FileSize)" Title="File Size" Width="200px" />
        <GridColumn Title="Source">
            <Columns>
                <GridColumn Field="@(nameof(FlowRun.Source))" Title="MPID"/>
                <GridColumn Field="@(nameof(FlowRun.SourceFileProtocol))" Title="Type" />
            </Columns>
        </GridColumn>
        <GridColumn Field="@nameof(FlowRun.ErrorMessage)"
                    Title = "Error"
                    Width="0" />
    </GridColumns>
</TelerikGrid>

@code {
    bool ExportAllPages { get; set; }

    private async Task GetData(GridReadEventArgs args)
    {
        args.Data = Enumerable.Range(1, 10).Select(x => new FlowRun
            {
                FileName = $"File {x}",
                Type = $"Type {x}",
                FileSize = x * 2,
                Source = $"Source {x}",
                SourceFileProtocol = FileProtocol.CIX,
                ErrorMessage = $"Error {x}"
            }).ToList();

        args.Total = 100;
    }

    private void BeforeCsvExport(GridBeforeCsvExportEventArgs obj)
    {
        AddErrorMessageColumn(obj);
    }

    private void BeforeExcelExport(GridBeforeExcelExportEventArgs obj)
    {
        AddErrorMessageColumn(obj);
    }

    private void AddErrorMessageColumn(GridBeforeSpreadsheetExportEventArgs args)
    {
        args.Columns.Find(x => x.Field == nameof(FlowRun.ErrorMessage)).Width = "100px";

        //args.Columns.Add(new ExcelExportableColumn
        //{            
        //    Field = nameof(FlowRun.ErrorMessage),
        //    Title = "Error"
        //});
    }

    public class FlowRun
    {
        public string FileName { get; set; }
        public string Type { get; set; }
        public long? FileSize { get; set; }
        public string Source { get; set; }
        public FileProtocol SourceFileProtocol { get; set; }
        public string ErrorMessage { get; set; }
    }

    public enum FileProtocol
    {
        Unknown,
        PIX,
        CIX,
        SS
    }
}

When the Grid is grouped and aggregate functions are enabled, paging performance degrades significantly because grouping and aggregate calculations are executed on every page change. This results in noticeable delays and UI stutter, especially in WebAssembly applications and larger datasets.

This enhancement optimizes page navigation for grouped Grid scenarios with aggregates by avoiding repeated processing when the underlying data has not changed, resulting in substantially faster paging performance while preserving existing functionality and first-load behavior.