@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.

@implements IAsyncDisposable
@inject IJSRuntime JS

<TelerikGantt Data="@GanttData"
              @bind-View="@CurrentView"
              Class="scrollable-gantt-1"
              IdField="@nameof(FlatModel.Id)"
              ParentIdField="@nameof(FlatModel.ParentId)"
              Width="700px"
              Height="500px">
    <GanttViews>
        <GanttDayView></GanttDayView>
        <GanttWeekView></GanttWeekView>
        <GanttMonthView></GanttMonthView>
        <GanttYearView></GanttYearView>
    </GanttViews>
    <GanttColumns>
        <GanttColumn Field="@nameof(FlatModel.Id)"
                     Visible="false">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.Title)"
                     Expandable="true"
                     Width="160px"
                     Title="Task Title">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.PercentComplete)"
                     Title="Completed"
                     Width="60px">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.Start)"
                     Width="100px"
                     TextAlign="@ColumnTextAlign.Right">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.End)"
                     DisplayFormat="End: {0:d}"
                     Width="100px">
        </GanttColumn>
    </GanttColumns>
</TelerikGantt>

<script suppress-error="BL9992">
    function initGanttScrollSync(ganttSelector) {
        const ganttTimelineContent = document.querySelector(ganttSelector + " .k-gantt-timeline .k-grid-content");
        if (ganttTimelineContent) {
            ganttTimelineContent.addEventListener("scroll", onGanttTimelineScroll);
        }
    }

    function disposeGanttScrollSync(ganttSelector) {
        const ganttTimelineContent = document.querySelector(ganttSelector + " .k-gantt-timeline .k-grid-content");

        if (ganttTimelineContent) {
            ganttTimelineContent.removeEventListener("scroll", onGanttTimelineScroll);
        }
    }

    function onGanttTimelineScroll(e) {
        const ganttTimelineHeader = e.target.closest(".k-gantt-timeline").querySelector(".k-grid-header-wrap");
        if (ganttTimelineHeader) {
            ganttTimelineHeader.scrollLeft = e.target.scrollLeft;
        }
    }
</script>

@code {
    private List<FlatModel> GanttData { get; set; } = new List<FlatModel>();
    private List<FlatModel> Data { get; set; } = new List<FlatModel>();

    private GanttView CurrentView { get; set; } = GanttView.Week;

    private int LastId { get; set; } = 1;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("initGanttScrollSync", ".scrollable-gantt-1");
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync()
    {
        await JS.InvokeVoidAsync("disposeGanttScrollSync", ".scrollable-gantt-1");
    }

    protected override void OnInitialized()
    {
        GanttData = new List<FlatModel>();
        var random = new Random();

        for (int i = 1; i <= 3; i++)
        {
            var newItem = new FlatModel()
            {
                Id = LastId,
                Title = $"Employee  {i}",
                Start = new DateTime(2020, 12, 10 + i),
                End = new DateTime(2020, 12, 11 + i),
                PercentComplete = Math.Round(random.NextDouble(), 2),
                HasChildren = true
            };

            GanttData.Add(newItem);
            var parentId = LastId;
            LastId++;

            for (int j = 1; j <= 2; j++)
            {
                GanttData.Add(new FlatModel()
                {
                    Id = LastId,
                    ParentId = parentId,
                    Title = $"Employee {i} : {j}",
                    Start = new DateTime(2020, 12, 20 + j),
                    End = new DateTime(2020, 12, 21 + i + j),
                    PercentComplete = Math.Round(random.NextDouble(), 2)
                });

                LastId++;
            }
        }

        base.OnInitialized();
    }

    public class FlatModel
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Title { get; set; } = string.Empty;
        public double PercentComplete { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool HasChildren { get; set; }
    }
}