Articles in this section
Category / Section

How to display multiple data in the group header template using converter?

1 min read

List view allows you to display multiple data in the group header template with different labels using IValueConverter with the help of GroupResult. It contains various information: levels, items, subgroups, etc., and pass those values in the ConverterParameter

XAML

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
 
  <ContentPage.Resources>
        <ResourceDictionary>
            <local:GroupHeaderConverter x:Key="TemplateConverter"/>
            <local:GroupHeaderImageConverter x:Key="ImageConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
 
  <ContentPage.Content>
        <Grid >
            <syncfusion:SfListView x:Name="listView" ItemSize="80" 
                                   SelectionMode="Single"
                                   AllowGroupExpandCollapse="True"
                                   GroupHeaderSize="60"
                                   ItemsSource="{Binding EmployeeInfo}"                                   
                                   ItemSpacing="2">
                <syncfusion:SfListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid>
                                   <Grid.RowDefinitions>
                                      <RowDefinition Height="Auto"/>
                                      <RowDefinition Height="Auto"/>
                                   </Grid.RowDefinitions>
                                   <Grid.ColumnDefinitions>
                                      <ColumnDefinition Width="50"/>
                                      <ColumnDefinition Width="*"/>
                                   </Grid.ColumnDefinitions>
                                   <Image Source="{Binding .,Converter={StaticResource ImageConverter}}" Grid.RowSpan="2" HeightRequest="35" WidthRequest="35"/>
                                    <Label x:Name="grouplabel" Grid.Column="1" Grid.Row="0"
                                           Text="{Binding .,Converter={StaticResource TemplateConverter}}"
                                           FontAttributes="Bold" Margin="3" 
                                           VerticalOptions="Center" HorizontalOptions="Start"/>
                                    <Label Text="{Binding Key}" Grid.Column="1" Grid.Row="1"
                                           FontAttributes="Bold" Margin="3" 
                                           VerticalOptions="Center" HorizontalOptions="Start"/>                                                          
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </syncfusion:SfListView.GroupHeaderTemplate>
            </syncfusion:SfListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

 

C#

public class GroupHeaderConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
      if (value == null)
         return null;
 
      var items = (value as GroupResult).Items.ToList<Employee>().ToList();
      return items[0].GroupingData.Designation;
   }   
}

 

public class GroupHeaderImageConverter: IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
      if (value == null)
         return null;
 
      var items = (value as GroupResult).Items.ToList<Employee>().ToList();
      return items[0].GroupingData.GroupingImage;
   }   
}

 

Screenshot

 

Click here to download the sample.

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