How to customize the styles for SummaryRows in the SfDataGrid?

SfDataGrid contains different types of summary rows and their appearance can be easily customized in the UI. The different types of summary rows in the SfDataGrid are,

• Caption Summary Row
• Table Summary Row
• Group Summary Row

The following screenshot illustrates the default appearance of the summary rows in the SfDataGrid.

Figure 1: Default appearance of summary rows in SfDataGrid

The above summary rows can be styled by customizing its appropriate target type.

Style for CaptionSummaryRow:

SfDataGrid.CaptionSummaryRowStyle property allows you to customize the appearance and styles of the group caption row. The following code example shows the customized style for group caption summary row in the SfDataGrid.

XAML

Style for GroupSummaryRow:

SfDataGrid.GroupSummaryRowStyle property allows you to customize the style of the group summary rows. The following code example shows how to customized style for the group summary rows in the SfDataGrid.

XAML

Style for TableSummaryRow:

SfDataGrid.TableSummaryRowStyle property allows you to customize the style and appearance of the table summary rows in the SfDataGrid. The following code example illustrates how to apply the styles for table summary rows in the SfDataGrid.

XAML

To apply the above customized style, you need to bind the keys CaptionSummaryRowStyle, TableSummaryRowStyle, and GroupSummaryRowStyle to the corresponding property in the SfDataGrid.

XAML

The above styles can be applied to the summary rows as shown in the following screenshot.

Figure 2: Customized appearance of summary rows

Sample Links:

WPF

WinRT

Windows Phone

UWP