How to highlight a specific row in a Blazor Pivot Table?

Introduction

In certain scenarios, you may want to highlight specific rows in the Blazor Pivot Table to enhance readability and improve the presentation of data. This can be achieved by adding a custom style to your stylesheet and then using the CellTemplate property to apply this style to the rows you wish to highlight. Below is a step-by-step guide on how to do this, along with a code example.

Adding custom style to your stylesheet

First, you need to define the custom style that you want to apply to the rows. Here’s an example of how to define a custom style with a specific background color:

[Index.razor]

<style>
 .custom {
     background-color: #80cbc4 !important;
 }
</style>

The !important rule is used to ensure that this style overrides any other background color styles that might be applied to the cells in the row.

Apply the style using the CellTemplate property

Next, you need to use the CellTemplate property to apply the custom style to the specific row. This property is triggered during the rendering of each cell in the pivot table and allows you to add the custom CSS style to the cells of the row you want to highlight.

Here’s a code example that demonstrates how to use the CellTemplate property to apply the custom style to a specific row:

[Index.razor]

<SfPivotView @ref="Pivot" TValue="ProductDetails" Height="500">
    <PivotViewTemplates>
        <CellTemplate>
            @{
                var data = (context as AxisSet);
                if (data != null)
                {
		    // Here we have applied background color for "Road Bikes" row in "France"
		    if ((data.ValueSort != null && data.ValueSort["levelName"].Equals("France.Road Bikes")) ||
		        (data.RowHeaders != null && data.RowHeaders.Equals("France.Road Bikes"))) {
			 Pivot.PivotValues[data.RowIndex][data.ColIndex].CssClass = "custom";
			 @data.FormattedText
		    }
                    else
                    {
                        // Here, we displayed the original text if no condition is met.
                        @data.FormattedText
                    }
                }
            }
        </CellTemplate>
    </PivotViewTemplates>
</SfPivotView>

In the code example above, we access the data for the current cell through the context parameter within the CellTemplate property. Following this, the properties data.ValueSort["levelName"] and data.RowHeaders are used to identify the current row header name. If it matches the condition (in this case, France.Road Bikes), the custom style is applied to the cell using Pivot.PivotValues[data.RowIndex][data.ColIndex].CssClass property. This will change the background color of the specific row (in this case, the “Road Bikes” row under “France”). You can adapt the code to fit your specific requirements, such as checking for different row headers or applying different styles.

The following screenshot, which portrays the results of the code snippet mentioned above,

Screenshot

You can refer to this GitHub sample for a practical demonstration of this code.

Conclusion

I hope you enjoyed learning how to highlight a specific row in a Blazor Pivot Table.

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

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries 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!