Example of Conditional Formatting in Blazor Pivot Table Component

Pivot Table / User Interaction / Conditional Formatting

This sample demonstrates formatting the appearance of pivot table cells with user-defined styles based on applied conditions. The conditional formatting dialog is invoked to add conditions and styles for the conditions. The formatting can be added, removed, and reset dynamically as well.

           
Properties

Conditional formatting works only for cells with values, and it allows the users to change its appearance such as background color, font color, font family, and font size based on specific conditions. Conditional formatting can be applied either through UI or code behind. To enable this in UI, set the AllowConditionalFormatting property to true and invoke ShowConditionalFormattingDialogAsync method to view in UI. To achieve this option in code behind, set the AllowConditionalFormatting property to true and use the PivotViewConditionalFormatSetting in the pivot table along with the following properties. Both options are enabled in this sample.

Measure : Specifies the value field name for which style will be applied.
Condition : Specifies the operator type like equals, greater than, less than, etc.
Value1 : Specifies the start value.
Value2 : Specifies the end value.
Style : Specifies the style for the cell.
ApplyGrandTotals : Allows conditional formatting to be applied to row and column grand totals.

We have applied conditional formatting for the fields In Stock and Sold Amount in code behind. Also, user can clear the entire style applied for the value cell using Reset All option.

More information on the conditional formatting feature can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE