Apply custom style to pivot cells in ASP.NET Core Pivotview component

The ASP.NET Core Pivot Table component allows you to alter the appearance of pivot cells using event handlers. This guide demonstrates how to apply custom styling to specific cells in your pivot table.

Overview

You can apply custom styles to different types of cells in the pivot table:

• Use the queryCellInfo event to style row headers and value cells.
• Use the headerCellInfo event to style column headers.

Both events are available through the e-gridSettings property of the Pivot Table component.

Implementation example

The following example shows how to apply styles to:

• The column header “Sold Amount” under “FY 2016” using the headerCellInfo event.
• The row header “Germany” and its aggregated values using the queryCellInfo event.
• Styles are applied by adding the “e-custom” CSS class to the cell elements.

NOTE

The dot(.) character in FY 2016.Sold Amount is used by default to identify the header levels in the pivot table’s row and column. It can be changed by setting the headerDelimiter in the e-valuesortsettings property to any other delimiter instead of the default separator.