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