Search code examples
xamldatagridmauisyncfusion

Style Group Header Rows in .NET Maui application SFDataGrid

I have a Syncfusion SFDataGrid in my .NET Maui application. I have set this up to use a KeySelector for custom grouping of the rows in my DataGrid. However, despite trying to set various different properties such as GroupSummaryRowBackground, I haven't been able to change the color of the row or find documentation pointing to how to change this. Below is the current view and the rows describing 'Date Needed' are what I am referring to. SFDataGrid documentation can be found here.

enter image description here


 <sf:SfDataGrid
     x:Name="dataGrid"
     Grid.Row="1"
     Grid.Column="1"
     Margin="10"
     AllowEditing="True"
     AllowGroupExpandCollapse="True"
     AutoExpandGroups="False"
     AutoGenerateColumnsMode="None"
     EditTapAction="OnDoubleTap"
     GridLinesVisibility="Both"
     HeaderGridLinesVisibility="Both"
     ItemsSource="{Binding OrderItems}"
     NavigationMode="Cell"
     SelectionMode="Multiple"
     SortingMode="Single">

     <sf:SfDataGrid.DefaultStyle>
         <sf:DataGridStyle
             CurrentCellBorderColor="{AppThemeBinding Light={StaticResource HeaderBackgroundLight},
                                                      Dark={StaticResource HeaderBackgroundDark}}"
             GroupSummaryRowBackground="{AppThemeBinding Light={StaticResource HeaderBackgroundLight},
                                                         Dark={StaticResource HeaderBackgroundDark}}"
             GroupSummaryRowTextColor="{AppThemeBinding Light={StaticResource TextHeaderLight},
                                                        Dark={StaticResource TextHeaderDark}}"
             HeaderRowBackground="{AppThemeBinding Light={StaticResource HeaderBackgroundLight},
                                                   Dark={StaticResource HeaderBackgroundDark}}"
             HeaderRowFontAttributes="Bold"
             HeaderRowTextColor="{AppThemeBinding Light={StaticResource TextHeaderLight},
                                                  Dark={StaticResource TextHeaderDark}}"
             RowBackground="{AppThemeBinding Light={StaticResource PrimaryBackgroundLight},
                                             Dark={StaticResource PrimaryBackgroundDark}}"
             RowTextColor="{AppThemeBinding Light={StaticResource TextLight},
                                            Dark={StaticResource TextDark}}"
             SelectedRowTextColor="{AppThemeBinding Light={StaticResource White},
                                                    Dark={StaticResource White}}"
             SelectionBackground="{AppThemeBinding Light={StaticResource CallToActionLight},
                                                   Dark={StaticResource CallToActionDark}}" />
     </sf:SfDataGrid.DefaultStyle>
Solution

  • The rows Date Needed as you described are the caption summary cells and they can be customized by the writing style for DataGridCaptionSummaryCell TargetType:

    
<ContentPage xmlns:syncfusion="http://schemas.syncfusion.com/maui">
    <ContentPage.Resources>
        <Style TargetType="syncfusion:DataGridCaptionSummaryCell">
            <Setter Property="Background" Value="#0074E3"/>
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="FontAttributes" Value="Bold"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontFamily" Value="TimesNewRoman"/>
        </Style>
    </ContentPage.Resources>
</ContentPage>

    For more details, you can refer to Styling Caption Summary cell and Styling Caption Summary row.