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.