New to Telerik UI for Blazor? Download free 30-day trial

PivotGrid Templates

This article describes the PivotGrid templates. They allow you to customize the content and appearance of the PivotGrid row headers, column headers and data cells.

Each template is defined at component level. So for example the column header template applies to all column fields and headers.

Column Header Template

Define a column header template with a <ColumnHeaderTemplate> component. The context is of type PivotGridColumnHeaderTemplateContext and has a Text property, which is the original header label (field value).

Data Cell Template

Define a data cell template with a <DataCellTemplate> component. The context is of type PivotGridDataCellTemplateContext. The context exposes Value (object) and FormattedValue (string) properties.

  • You may need to cast the Value property to the correct type before usage.
  • Depending on the Pivot Grid data and configuration, the Value property may be null and the FormattedValue may be an empty string.

Row Header Template

Define a row header template with a <RowHeaderTemplate> component. The context is of type PivotGridRowHeaderTemplateContext and has a Text property, which is the original header label (field value).


All template components expose an optional Context parameter. Set it in scenarios with nested templates of different components, otherwise you will get an error Child content element uses the same parameter name ('context'). The example below sets a custom Context name for the DataCellTemplate.

Using PivotGrid header and data cell templates

<TelerikPivotGrid Data="@PivotData">
            var c = (PivotGridColumnHeaderTemplateContext)context;
        <span class="column-header">@c.Text</span>
    <DataCellTemplate Context="dataCellContext">
            var c = (PivotGridDataCellTemplateContext)dataCellContext;

            if (c.Value != null)
                @( ((decimal)c.Value).ToString("C2") )
            var c = (PivotGridRowHeaderTemplateContext)context;
        <span class="row-header">@c.Text</span>
        <PivotGridColumn Name="@nameof(PivotModel.City)" />
        <PivotGridRow Name="@nameof(PivotModel.Product)" />
        <PivotGridMeasure Name="@nameof(PivotModel.ContractValue)" />

    .column-header {
        color: green;
        font-weight: bold;

    .row-header {
        color: blue;

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

    protected override void OnInitialized()
        var dataItemCount = 100;
        var categoryCount = 3;
        var productCount = 5 + 1; // effectively 5, as rnd.Next() will never return 6
        var cityCount = 3 + 1; // effectively 3
        var rnd = new Random();

        for (int i = 1; i <= dataItemCount; i++)
            var productNumber = rnd.Next(1, productCount);

            PivotData.Add(new PivotModel()
                Category = $"Category {productNumber % categoryCount + 1}",
                Product = $"Product {productNumber}",
                City = $"City {rnd.Next(1, cityCount)}",
                ContractDate = DateTime.Now.AddDays(-rnd.Next(1, 31)).AddMonths(-rnd.Next(1, 12)).AddYears(-rnd.Next(0, 5)),
                ContractValue = rnd.Next(123, 987)


    public class PivotModel
        public string Category { get; set; } = null!;
        public string Product { get; set; } = null!;
        public string City { get; set; } = null!;
        public DateTime ContractDate { get; set; }
        public decimal ContractValue { get; set; }

See Also

In this article