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 sign in to leave a comment
Access denied
Access denied