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.