The Expand/Collapse icon of the PivotGrid is always a font one. I am using SVG icons in my app and I don't see the any icon in the toggle button.
===
ADMIN EDIT
===
A workaround for the time being is to register the Font icons stylesheet even if you are using SVG icons.
The PivotGrid supports multiple Measures for the same Field on initial load. However, if the user makes a change in the configurator, then only the first Measure per Field remains visible.
===
TELERIK edit: Apart from not using a PivotGrid configurator, another possible workaround is to use custom UI instead of a configurator. Recreate the component to apply the changes:
<label class="k-checkbox-label">
<TelerikCheckBox @bind-Value="@ShowCity"
OnChange="@OnPivotGridConfigurationChanged" />
Show City Column
</label>
<label class="k-checkbox-label">
<TelerikCheckBox @bind-Value="@ShowProduct"
OnChange="@OnPivotGridConfigurationChanged" />
Show Product Row
</label>
@if (RenderPivotGrid)
{
<TelerikPivotGrid Data="@PivotData"
DataProviderType="@PivotGridDataProviderType.Local"
ColumnHeadersWidth="240px">
<PivotGridColumns>
<PivotGridColumn Name="@nameof(PivotModel.Country)" Title="Country" />
@if (ShowCity)
{
<PivotGridColumn Name="@nameof(PivotModel.City)" Title="City" />
}
</PivotGridColumns>
<PivotGridRows>
<PivotGridRow Name="@nameof(PivotModel.Category)" Title="Category" />
@if (ShowProduct)
{
<PivotGridRow Name="@nameof(PivotModel.Product)" />
}
</PivotGridRows>
<PivotGridMeasures>
<PivotGridMeasure Name="@nameof(PivotModel.ContractValue)"
Title="Contract Value"
Aggregate="@PivotGridAggregateType.Sum" />
<PivotGridMeasure Name="@nameof(PivotModel.ContractValue)"
Title="Contract Value"
Aggregate="@PivotGridAggregateType.Average" />
<PivotGridMeasure Name="@nameof(PivotModel.ContractProfit)"
Title="Contract Value"
Aggregate="@PivotGridAggregateType.Sum" />
<PivotGridMeasure Name="@nameof(PivotModel.ContractProfit)"
Title="Contract Value"
Aggregate="@PivotGridAggregateType.Average" />
</PivotGridMeasures>
</TelerikPivotGrid>
}
@code {
private List<PivotModel> PivotData { get; set; } = new List<PivotModel>();
private bool RenderPivotGrid { get; set; } = true;
private bool ShowCity { get; set; }
private bool ShowProduct { get; set; }
private async Task OnPivotGridConfigurationChanged()
{
RenderPivotGrid = false;
await Task.Delay(1);
RenderPivotGrid = true;
}
protected override void OnInitialized()
{
var dataItemCount = 100;
var categoryCount = 2;
var productCount = 4 + 1;
var countryCount = 2;
var cityCount = 4 + 1;
var rnd = Random.Shared;
for (int i = 1; i <= dataItemCount; i++)
{
var productNumber = rnd.Next(1, productCount);
var cityNumber = rnd.Next(1, cityCount);
PivotData.Add(new PivotModel()
{
Category = $"Category {productNumber % categoryCount + 1}",
Product = $"Product {productNumber}",
Country = $"Country {cityNumber % countryCount + 1}",
City = $"City {cityNumber}",
ContractDate = DateTime.Now.AddDays(-rnd.Next(1, 31)).AddMonths(-rnd.Next(1, 12)).AddYears(-rnd.Next(0, 5)),
ContractValue = rnd.Next(456, 987),
ContractProfit = rnd.Next(43, 98)
});
}
base.OnInitialized();
}
public class PivotModel
{
public string Category { get; set; } = null!;
public string Product { get; set; } = null!;
public string Country { get; set; } = null!;
public string City { get; set; } = null!;
public DateTime ContractDate { get; set; }
public decimal ContractValue { get; set; }
public decimal ContractProfit { get; set; }
}
}
I am binding the PivorGrid to local data and I am validating that the list contains some records. However, the PivotGrid appears empty. It looks like if the data arrives after PivotGrid initializes, the component does not display it.
Reproduction: https://blazorrepl.telerik.com/GnYDuvFP13H5RQwk31.
===
ADMIN EDIT
===
A possible option to handle the scenario for the time being is to ensure the PivotGrid initializes only when the data is available. For that purpose, you can conditionally render the component based on the data count. Optionally, you can show a LoaderContainer while the data is being fetched.The component struggles to update Local data source when it changes. I have bound it to a value, but when that value changes it is not reflected in the UI.
The issue occurs when you update the data with an entirely new collection. Calling Rebind afterwards does not help either.
Reproduction: https://blazorrepl.telerik.com/QdvFEDkq548ianYG37.
===
ADMIN EDIT
===
A possible workaround for the time being is to dispose and re-initialize the component when the new data arrives. Here is an example: https://blazorrepl.telerik.com/cHFlaNOg49AjRPUl19.