How to customize the expander icon for each level of group in .NET MAUI DataGrid(SfDataGrid)?

By default, the .NET MAUI DataGrid has the same expander icon for all the caption summaries. But we can customize that expander icon for each group by using SfDataGrid.CaptionSummaryTemplate property. We need to set AllowGroupExpandAndCollapse to false.

XAML

<ContentPage.Resources>
   <ResourceDictionary>
       <local:GroupCaptionConverter x:Key="SummaryConverter" />
       <local:GroupBackgroundColor x:Key="SummaryBackground" />
       <local:GroupIconConverter x:Key="SummaryIcon"></local:GroupIconConverter>
       <Style  TargetType="syncfusion:DataGridIndentCell">
           <Setter Property="Background"
                   Value="White" />
       </Style>
   </ResourceDictionary>
</ContentPage.Resources>


<syncfusion:SfDataGrid  ItemsSource="{Binding Employees}"
                       AutoGenerateColumnsMode="None"
                       GroupingMode="Multiple"
                       GridLinesVisibility="Vertical"
                       HeaderGridLinesVisibility="Both"
                       AllowGroupExpandCollapse="False"
                       x:Name="dataGrid"
                       ColumnWidthMode="Auto"
                       DefaultColumnWidth="155">
   <syncfusion:SfDataGrid.Columns>
       <syncfusion:DataGridTextColumn MappingName="EmployeeID"
                                      HeaderText="Employee ID" />
       <syncfusion:DataGridTextColumn MappingName="Name"
                                      HeaderText="Name" />
       <syncfusion:DataGridTextColumn MappingName="IDNumber"
                                      HeaderText="ID Number" />
   </syncfusion:SfDataGrid.Columns>

   <syncfusion:SfDataGrid.CaptionSummaryTemplate>
       <DataTemplate>
           <Grid Padding="5"
                 HorizontalOptions="FillAndExpand"
                 BackgroundColor="{Binding Converter={StaticResource SummaryBackground}, ConverterParameter={x:Reference dataGrid}}">

               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"></ColumnDefinition>
                   <ColumnDefinition Width="*"></ColumnDefinition>
               </Grid.ColumnDefinitions>
               <Label Grid.Column="1"
                      x:Name="captionSummary"
                      HorizontalOptions="StartAndExpand"
                      VerticalOptions="FillAndExpand"
                      WidthRequest="250"
                      Text="{Binding Converter={StaticResource SummaryConverter}, 
                                             ConverterParameter = {x:Reference dataGrid} }">

               </Label>
               <Image Grid.Column="0"
                      WidthRequest="35"
                      Source="{Binding Converter={StaticResource SummaryIcon}, ConverterParameter={x:Reference dataGrid}}"
                      VerticalOptions="Center"
                      HorizontalOptions="End"
                      HeightRequest="20">

               </Image>
           </Grid>
       </DataTemplate>
   </syncfusion:SfDataGrid.CaptionSummaryTemplate>

   <syncfusion:SfDataGrid.GroupColumnDescriptions>
       <syncfusion:GroupColumnDescription ColumnName="EmployeeID" />
       <syncfusion:GroupColumnDescription ColumnName="Name" />
   </syncfusion:SfDataGrid.GroupColumnDescriptions>

</syncfusion:SfDataGrid>

C#

public class GroupCaptionConverter : IValueConverter
{
   public string Name { get; set; }
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       var data = value != null ? value as Group : null;
       if (data != null)
       {
           SfDataGrid dataGrid = (SfDataGrid)parameter;
           if ((value as Group).Parent is TopLevelGroup)
           {
               return dataGrid.View.TopLevelGroup.GetGroupCaptionText((value as Group), "{ColumnName} : {Key} - {ItemsCount} Items", dataGrid.GroupColumnDescriptions[0].ColumnName);
           }
           else
           {
               return dataGrid.View.TopLevelGroup.GetGroupCaptionText((value as Group), "{ColumnName} : {Key} - {ItemsCount} Items", dataGrid.GroupColumnDescriptions[1].ColumnName);
           }
       }
       return null;
   }
   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       return null;
   }
}


public class GroupBackgroundColor : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       var data = value != null ? value as Group : null;
       if (data != null)
       {
           SfDataGrid dataGrid = (SfDataGrid)parameter;
           if ((value as Group).Parent is TopLevelGroup)
           {
               return "LightGray";
           }
           else
           {
               return "LightBlue";
           }
       }
       return null;
   }
   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       return null;
   }
}

public class GroupIconConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       var data = value != null ? value as Group : null;
       if (data != null)
       {
           SfDataGrid dataGrid = (SfDataGrid)parameter;
           if ((value as Group).Parent is TopLevelGroup)
           {
               return "upword_icon.png";
           }
           else
           {
               return "downward_icon.png";
           }
       }
       return null;
   }
   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       return null;
   }
}

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to customize the expander icon for each level of group in .NET MAUI DataGrid (SfDataGrid).

You can refer to our .NET MAUI DataGrid feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI DataGrid and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!