Articles in this section
Category / Section

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

2 mins read

By default, DataGrid having 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 null value for GroupCollapseIcon and GroupExpanderIcon in DataGridStyle class.

Code Example

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="DataGridDemo.MainPage"
             xmlns:local="clr-namespace:DataGridDemo"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"
             Padding="10,10,10,10">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:GroupCaptionConverter x:Key="SummaryConverter" />
            <local:GroupBackgroundColor x:Key="SummaryBackground" />
            <local:GroupIconConverter x:Key="SummaryIcon"></local:GroupIconConverter>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.BindingContext>
        <local:OrderInfoRepository x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <syncfusion:SfDataGrid
            x:Name="dataGrid"
             ItemsSource="{Binding OrderInfoCollection}"
             AutoGenerateColumns="False"
            AllowGroupExpandCollapse="True"
            ColumnSizer="Star"
             GroupingMode="Multiple"
             AllowEditing="True"
             NavigationMode="Cell"
             SelectionMode="Single">
            <syncfusion:SfDataGrid.GroupColumnDescriptions>
                <syncfusion:GroupColumnDescription ColumnName="OrderID" />
                <syncfusion:GroupColumnDescription ColumnName="CustomerID" />
            </syncfusion:SfDataGrid.GroupColumnDescriptions>
            <syncfusion:SfDataGrid.Columns>
                <syncfusion:GridTextColumn HeaderText="Order ID" MappingName="OrderID" />
                <syncfusion:GridTextColumn HeaderText="Customer ID" MappingName="CustomerID" />
                
                <syncfusion:GridTextColumn HeaderText="City" MappingName="ShipCity" />
                <syncfusion:GridTextColumn HeaderText="Ship Country" MappingName="ShipCountry" />
            </syncfusion:SfDataGrid.Columns>
            <syncfusion:SfDataGrid.CaptionSummaryTemplate>
                <DataTemplate>
                    <Grid Padding="5"  HorizontalOptions="CenterAndExpand" BackgroundColor="{Binding Converter={StaticResource SummaryBackground}, ConverterParameter={x:Reference dataGrid}}">
 
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" x:Name="captionSummary" VerticalOptions="CenterAndExpand" WidthRequest="250"  Text="{Binding Converter={StaticResource SummaryConverter}, 
                                                  ConverterParameter = {x:Reference dataGrid} }" >
                            
                        </Label>
                        <Image Grid.Column="1" Source="{Binding Converter={StaticResource SummaryIcon}, ConverterParameter={x:Reference dataGrid}}" VerticalOptions="Center" HorizontalOptions="End" HeightRequest="20">
                            
                        </Image>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfDataGrid.CaptionSummaryTemplate>
 
 
        </syncfusion:SfDataGrid>
    </ContentPage.Content>
</ContentPage>
 

 

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 "plus_icon_black.png";
                }
                else
                {
                    return "plus_icon_green.png";
                }
            }
            return null;
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }


public class CustomStyle : DataGridStyle
    {
        public override ImageSource GetGroupCollapseIcon()
        {
            return null;
        }
 
        public override ImageSource GetGroupExpanderIcon()
        {
            return null;
        }
 
        public override Color GetIndentBackgroundColor(RowType rowType)
        {
            return Color.White;
        }
    }

SfDataGrid UWP

Sample link : XamarinForms

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied