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

public class PivotModel
{
    [Display(Name = "Net Revenue")]
    public decimal Field1 { get; set; }
}

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

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

<TelerikPivotGridContainer>

    <TelerikPivotGridConfigurator />

    <TelerikPivotGridConfiguratorButton />

    <TelerikPivotGrid Data="@PivotData"
                      DataProviderType="@PivotGridDataProviderType.Local"
                      ColumnHeadersWidth="160px"
                      Class="no-headers">
        <PivotGridColumns>
            <PivotGridColumn Name="@nameof(PivotModel.Country)" Title="Country" />
            <PivotGridColumn Name="@nameof(PivotModel.City)" Title="City" />
        </PivotGridColumns>
        <PivotGridRows>
            <PivotGridRow Name="@nameof(PivotModel.Category)" Title="Category" />
            <PivotGridRow Name="@nameof(PivotModel.Product)" Title="Product" />
        </PivotGridRows>
        <PivotGridMeasures>
            <PivotGridMeasure Name="@nameof(PivotModel.ContractValue)"
                              Title="Contract Value"
                              Aggregate="@PivotGridAggregateType.Sum" />
        </PivotGridMeasures>
    </TelerikPivotGrid>

</TelerikPivotGridContainer>

<style>
    /* Hide Grand Total column text. Remove cell paddings and borders. */
    .k-pivotgrid-column-headers .k-pivotgrid-row:first-child .k-pivotgrid-header-total:last-child,
    .k-pivotgrid-values .k-pivotgrid-header-total:last-child {
        color: transparent;
        font-size: 0;
        padding: 0;
        border-width: 0;
    }

    /* Shrink Grand Total column */
    div.k-pivotgrid.no-headers .k-pivotgrid-column-headers col:last-child,
    div.k-pivotgrid.no-headers .k-pivotgrid-values col:last-child {
        width: 0 !important;
    }

    /* Hide Total row headers text */
    /* Uncomment the not:() selector if you want to show back the Grand Total row. There must be no space before :not() */
    div.k-pivotgrid.no-headers .k-pivotgrid-row-headers tr.k-pivotgrid-row:has(.k-pivotgrid-header-total)/*:not(:last-child)*/,
    div.k-pivotgrid.no-headers .k-pivotgrid-values tr.k-pivotgrid-row:has(.k-pivotgrid-header-total:first-child)/*:not(:last-child)*/ {
        font-size: 0;
        color: transparent;
    }

        /* Remove Total headers cell paddings and borders */
        /* Uncomment the not:() selector if you want to show back the Grand Total row. There must be no space before :not() */
        div.k-pivotgrid.no-headers .k-pivotgrid-row-headers tr.k-pivotgrid-row:has(.k-pivotgrid-header-total)/*:not(:last-child)*/ th,
        div.k-pivotgrid.no-headers .k-pivotgrid-values tr.k-pivotgrid-row:has(.k-pivotgrid-header-total:first-child)/*:not(:last-child)*/ td {
            padding: 0;
            border-width: 0;
        }
</style>

@code {
    private List<PivotModel> PivotData { get; set; } = new();

    protected override void OnInitialized()
    {
        var dataItemCount = 100;
        var categoryCount = 3;
        var productCount = 10 + 1;
        var countryCount = 2;
        var cityCount = 4 + 1;
        var rnd = Random.Shared;

        for (int i = 1; i <= dataItemCount; i++)
        {
            var productNumber = Random.Shared.Next(1, productCount);
            var categoryNumber = productNumber % categoryCount + 1;
            var cityNumber = rnd.Next(1, cityCount);
            var countryNumber = cityNumber % countryCount + 1;

            PivotData.Add(new PivotModel()
            {
                Category = $"Category {categoryNumber}",
                Product = $"Product {productNumber}",
                Country = $"Country {countryNumber}",
                City = $"City {cityNumber}",
                ContractDate = DateTime.Now.AddDays(-rnd.Next(1, 31)).AddMonths(-rnd.Next(1, 12)).AddYears(-rnd.Next(0, 5)),
                ContractValue = (productNumber == 3 || cityNumber == 2 || categoryNumber == 1) ? 0 : rnd.Next(123, 987)
            });
        }

        base.OnInitialized();
    }

    public class PivotModel
    {
        public string Category { get; set; } = string.Empty;
        public string Product { get; set; } = string.Empty;
        public string Country { get; set; } = string.Empty;
        public string City { get; set; } = string.Empty;
        public DateTime ContractDate { get; set; }
        public decimal ContractValue { get; set; }
    }
}