Product & Version:
Telerik UI for Blazor v12
.NET 8
Description:
In the Telerik Blazor PivotGrid, when fields are added dynamically (via UI interaction), the fields are placed in the PivotGrid based on the order in which they are defined in the Fields collection, rather than the order in which the user selects or adds them.
This results in an unexpected field arrangement from a user experience perspective, as users expect the PivotGrid to reflect the sequence in which they add fields (especially when adding multiple fields one by one).
Expected Behavior:
Fields should be added to the PivotGrid in the same order as the user clicks/selects them.
Actual Behavior:
Fields are added according to their original order in the PivotGridFields configuration, ignoring the user’s selection order.
Impact:
This causes confusion for end users and limits flexibility in interactive PivotGrid scenarios where field order matters.
Request:
Please confirm if this behavior is expected. If so, is there any supported way to control or override the field insertion order based on user interaction?
<TelerikButton OnClick="@OnRefresh">Refresh</TelerikButton>
<TelerikLoaderContainer Visible="@IsLoading" Text="Please wait..." />
<TelerikPivotGridContainer>
<TelerikPivotGridConfiguratorButton></TelerikPivotGridConfiguratorButton>
<TelerikPivotGridConfigurator></TelerikPivotGridConfigurator>
<TelerikPivotGrid @ref="PivotGridRef"
Data="@PivotData"
DataProviderType="@PivotGridDataProviderType.Local"
ColumnHeadersWidth="100px"
RowHeadersWidth="130px"
Height="70vh">
<PivotGridRows>
<PivotGridRow Name="@nameof(RptContractSalesSummaryModel.Station)" />
</PivotGridRows>
<PivotGridColumns>
<PivotGridColumn Name="@nameof(RptContractSalesSummaryModel.Year)" />
</PivotGridColumns>
<PivotGridMeasures>
<PivotGridMeasure Name="@nameof(RptContractSalesSummaryModel.Rate)" Title="Total"
Aggregate="@PivotGridAggregateType.Sum" />
</PivotGridMeasures>
</TelerikPivotGrid>
</TelerikPivotGridContainer>
@code
{
private List<RptContractSalesSummaryModel> PivotData { get; set; } = [];
public TelerikPivotGrid<RptContractSalesSummaryModel> PivotGridRef { get; set; } = default!;
private CancellationTokenSource cancelToken = new CancellationTokenSource();
private bool IsLoading { get; set; }
protected override async Task OnInitializedAsync()
{
await LoadReportData(cancelToken.Token);
await base.OnInitializedAsync();
}
private async Task LoadReportData(CancellationToken token)
{
IsLoading = true;
await Task.Delay(500);
var dataItemCount = 10000;
var stationCount = 30;
var rnd = Random.Shared;
for (int i = 1; i <= dataItemCount; i++)
{
var stationNumber = rnd.Next(1, stationCount);
if (token.IsCancellationRequested) { return; };
PivotData.Add(new RptContractSalesSummaryModel()
{
Station = $"Station {stationNumber}",
ContractMonth = DateTime.Today.AddMonths(-rnd.Next(0, 13)),
Rate = rnd.Next(123, 987) * 1.23m,
Column1 = $"Column1 {rnd.Next(1, 4)}",
Column2 = $"Column2 {rnd.Next(1, 4)}"
});
}
PivotData = PivotData
.OrderBy(x => x.Station)
.ThenBy(x => x.Year)
.ThenBy(x => x.Month).ToList();
PivotGridRef?.Rebind();
IsLoading = false;
}
public async Task OnRefresh()
{
await LoadReportData(cancelToken.Token);
await Task.CompletedTask;
}
public async ValueTask DisposeAsync()
{
PivotData = [];
await Task.CompletedTask;
}
public class RptContractSalesSummaryModel
{
public DateTime ContractMonth { get; set; }
public string Station { get; set; } = string.Empty;
public int Year => ContractMonth.Year;
public string Month => $"{ContractMonth.Month}-{ContractMonth.ToString("MMMM")}";
public decimal? Rate { get; set; }
public string Column1 { get; set; } = string.Empty;
public int ColumnRate1 { get; set; }
public string Column2 { get; set; } = string.Empty;
public int ColumnRate2 { get; set; }
public string Column3 { get; set; } = string.Empty;
public int ColumnRate3 { get; set; }
public string Column4 { get; set; } = string.Empty;
public int ColumnRate4 { get; set; }
}
}
