How to Customize Values in a Blazor Grid Pivot Table?

Introduction

When working with a Blazor pivot table, you may want to customize the displayed cell values based on certain conditions. This customization may be required for both the UI representation and the exported document, like an Excel file. This article demonstrates how to achieve this using coding examples.

Customizing cell values in Blazor Pivot Table

To customize the values displayed in a Blazor pivot table, you need to use the CellTemplate option. This event allows you to define the content of cell elements according to your specific needs.

Here is a code snippet demonstrating how to use the CellTemplate option to replace certain numeric values (i.e., “0”, “1”, “-1”, “-2”) with the text “Custom text”:

[Index.razor]

<SfPivotView>
    <PivotViewTemplates>
        <CellTemplate>
            @{
                var data = (context as AxisSet);
                if (data != null)
                {
                    if (data.Axis == "value")
                    {
                        // Here we checked the formatted text of each cell.
                        if (data.FormattedText == "0" || data.FormattedText == "1" || data.FormattedText == "-1" || data.FormattedText == "-2" || data.FormattedText == "-3")
                        // Here, we changed the formatted text to "Custom text" if it met the condition.
                        Pivot.PivotValues[data.RowIndex][data.ColIndex].FormattedText = "Custom text";                  
                        @Pivot.PivotValues[data.RowIndex][data.ColIndex].FormattedText;
                    }
                    else
                    {
                        // Here, we displayed the original text if no condition is met.
                        @data.FormattedText
                    }
                }
            }
        </CellTemplate>
    </PivotViewTemplates>
</SfPivotView>

In the above code, the CellTemplate option to checks if the cell belongs to the value axis and if its FormattedText matches one of the specified values (i.e., “0”, “1”, “-1”, “-2”). If so, the text is replaced with “Custom text”. This customization appears directly in the displayed pivot table.

The following screenshots portray the difference between before and after customizing cell values in the pivot table,

Screenshots

Before customizing cell values in pivot table,

After customizing cell values in pivot table,

Customizing cell values during excel exporting

Customization of cell values via the CellTemplate option only appears in the pivot table UI and does not apply to other scenarios such as exporting. To retain these customized values when exporting the pivot table to an Excel document, use the ExcelQueryCellInfo event. This event enables you to manipulate cell values during the Excel export process.

Below code snippet demonstrates how to use the ExcelQueryCellInfo event:

[Index.razor]

<SfPivotView>
	<PivotViewEvents TValue="ProductDetails" ExcelQueryCellInfo="ExcelQueryCellInfo"></PivotViewEvents>
</SfPivotView>

@code {
    public void ExcelQueryCellInfo(ExcelQueryCellInfoEventArgs<ProductDetails> args)
    {
        if (args.Value.ToString() == "0" || args.Value.ToString() == "1" || args.Value.ToString() == "-1" || args.Value.ToString() == "-2" || args.Value.ToString() == "-3")
        {
	    // Here, we customize the cell value to "Custom text" during export.
            args.Value = args.Cell.Value = "Custom text";
        }
    }
}

In the above example, the ExcelQueryCellInfo event checks a condition similar to the one implemented in the CellTemplate option. If it matches, the text is replaced with “Custom text” using the args.Value property. These changes are reflected when exporting the pivot table as an excel document.

The following screenshots portray the difference between before and after customizing cell values during Excel exporting,

Screenshots

Before customizing cell values during excel exporting,

After customizing cell values during excel exporting.

View Sample in GitHub

Conclusion

We hope you enjoyed learning how to customize values in a Blazor Pivot Table based on specified conditions.

You can also refer to our Blazor Pivot Table feature tour feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Pivot Table and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!