Unplanned
Last Updated: 07 Oct 2025 08:08 by Niraj
Niraj
Created on: 07 Oct 2025 08:08
Category: PivotGrid
Type: Bug Report
1
PivotGrid column headers misalign after filtering

The PivotGrid layout and cell alignment break when filtering expanded child columns by a value that exists only in some of the columns.

Here is a test page:

  1. Expand 2024 and 2025.
  2. Filter Month by a month name, which exists only in on the of two years. At the time of writing, this is "November".
  3. Observe how the first cell in the header row has a larger colspan (2 instead of 1), so the header cells are misaligned with the data cells.
<TelerikPivotGridContainer>
    <TelerikPivotGridConfiguratorButton></TelerikPivotGridConfiguratorButton>
    <TelerikPivotGridConfigurator></TelerikPivotGridConfigurator>
        <TelerikPivotGrid Data="@PivotGridData" DataProviderType="@PivotGridDataProviderType.Local"
                          @ref="PivotGridRef" ColumnHeadersWidth="100px" RowHeadersWidth="130px">
            <ColumnHeaderTemplate>
                @{
                    var ctx = (PivotGridColumnHeaderTemplateContext)context;
                    int underscoreIndex = ctx.Text.IndexOf("-");
                    string text = ctx.Text;
                    if (underscoreIndex > 0)
                    {
                        text = text.Replace(text.Substring(0, underscoreIndex + 1), "");
                        <span>@text</span>
                    }
                    else
                    {
                        <span>@ctx.Text</span>
                    }
                }
            </ColumnHeaderTemplate>

            <DataCellTemplate Context="dataCellContext">
                @{
                    var c = (PivotGridDataCellTemplateContext)dataCellContext;
                    var amt = c.Value == null ? (0m).ToString("C2") : ((decimal)c.Value).ToString("C2");
                }
                <div style="text-align: right;">
                    @amt
                </div>
            </DataCellTemplate>

            <PivotGridRows>
                <PivotGridRow Name="@nameof(PivotGridModel.Station)" Title="Station" />
            </PivotGridRows>

            <PivotGridColumns>
                <PivotGridColumn Name="@nameof(PivotGridModel.Year)" Title="Year" HeaderClass="year-header" />
                <PivotGridColumn Name="@nameof(PivotGridModel.MonthName)" Title="Month" />
            </PivotGridColumns>

            <PivotGridMeasures>
                <PivotGridMeasure Name="@nameof(PivotGridModel.Rate)" Title="Total"
                                  Aggregate="@PivotGridAggregateType.Sum" />
            </PivotGridMeasures>
        </TelerikPivotGrid>
</TelerikPivotGridContainer>

@code
{
    private TelerikPivotGrid<PivotGridModel>? PivotGridRef { get; set; }

    private List<PivotGridModel> PivotGridData { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        var dataItemCount = 10000;
        var stationCount = 30;
        var rnd = Random.Shared;

        for (int i = 1; i <= dataItemCount; i++)
        {
            var stationNumber = rnd.Next(1, stationCount);

            PivotGridData.Add(new PivotGridModel()
            {
                Station = $"Station {stationNumber}",
                ContractMonth = DateTime.Today.AddMonths(-rnd.Next(0, 13)),
                Rate = rnd.Next(123, 987) * 1.23m
            });
        }

        PivotGridRef?.Rebind();

        await base.OnInitializedAsync();
    }

    public class PivotGridModel
    {
        public DateTime ContractMonth { get; set; }
        public int Year => ContractMonth.Year;
        public int Month => ContractMonth.Month;
        public string MonthName => $"{Month}-{ContractMonth.ToString("MMMM")}";
        public string Station { get; set; } = string.Empty;
        public decimal? Rate { get; set; }
    }
}

 

0 comments