Articles in this section
Category / Section

How to bind multiple field in the group header?

1 min read

ListView allows you to bind multiple fields in the group header template using IValueConverter with the help of GroupResult to get various information (Levels, Items, SubGroups, etc.) and pass the values in ConverterParameter for converter.  

XAML

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
 
  <ContentPage.Resources>
        <ResourceDictionary>
            <local:GroupHeaderConverter x:Key="TemplateConverter"/>
            <local:BoolToImageConverter x:Key="BoolToImageConverter"/>
        </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.ColumnDefinitions>
                                        <ColumnDefinition Width="50"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="30"/>
                                    </Grid.ColumnDefinitions>
 
                                    <Image x:Name="groupimage" Grid.Column="0"                
                                           Source="{Binding .,Converter={StaticResource TemplateConverter}, ConverterParameter={x:Reference Name=groupimage}}"/>
                                    <Grid Grid.Column="1">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="20"/>
                                        </Grid.RowDefinitions>
                                        <Label x:Name="grouplabel" Grid.Row="0" 
                                              Text="{Binding .,Converter={StaticResource TemplateConverter}, ConverterParameter={x:Reference Name=grouplabel}}"/>
                                        <ProgressBar Grid.Row="1" Progress=".2" />
                                    </Grid>
                                    <Image x:Name="NormalImage" Grid.Column="2"                                                               
                                           Source="{Binding IsExpand, Converter={StaticResource BoolToImageConverter}}"/>
                                </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 groupdataitems = (value as GroupResult).Items.ToList<Employee>().ToList();
 var data = groupdataitems[0];
       if (parameter is Label)
    return data.GroupingData.Designation;
       else
    return data.GroupingData.EmployeeImage;
   }
}

 

You can access multiple fields by adding conditions to check whether the necessary parameter is label or image in converter. 

Screenshot

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