Group Header Template Binding to property of first item in group

[Alan]

Hi,

I have a grouped sflistview and I want to customise the group header template. Each item in the group has a property called "Complete". I would like to display a % complete of the group in the group header template. So I added a property called GroupPcntComplete to the item, which is updated in the view model for each item in the group. I want to show the GroupPcntComplete in a label aligned to the right hand side of the group header, in a smaller font than the main Group title.

I'm aware of the custom group descriptors as referenced here: https://help.syncfusion.com/xamarin/sflistview/grouping#custom-grouping

This would work if I could show the Group and GroupPcntComplete in different font sizes, but I don't think this is possible? 

I tried to bind the label to the the first item in the GroupResult by doing the following:

<syncfusion:SfListView.GroupHeaderTemplate>

    <DataTemplate>

        <ViewCell>

            <ViewCell.View>

                <StackLayout Orientation="Horizontal" Margin="0,0,0,0" HorizontalOptions="FillAndExpand">

                    <Label Text="{Binding Key}" TextColor="White" FontSize="18" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Start" />

                    <Label Text="{Binding Path=Items[0]. GroupPcntComplete}" FontSize="14" TextColor="White" HorizontalOptions="End" VerticalOptions="Center"/>

                </StackLayout>

            </ViewCell.View>

        </ViewCell>

    </DataTemplate>

</syncfusion:SfListView.GroupHeaderTemplate>

How can I bind to a property of the first item in the Items collection?

[Muthu Kumaran Gnanavinayagam]

Hi Alan, 

 

We have checked the reported query “Need to adjust the size of the first GroupHeader item” from our side. You can achieve your requirement by using IValueConverter for the Text through which you can modify the value of the FontSize by passing the Label element as the ConverterParameter. 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran. 

[Alan]

Hi, I'm not sure what you mean, can you provide an example please?

[Muthu Kumaran Gnanavinayagam]

Hi Alan, 

 

We have created a sample to achieve your requirement. In our sample, we have used a Converter class(GroupItemConverter) for Label’s BindingContext and passed the Label element instance in the GroupHeaderTemplate as ConverterParameter to alter its Text value as like below code example. 

 

Code Example[C#]: 

public class GroupItemConverter : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            var label = parameter as Label; 

            var items=(value as IEnumerable).ToList<Contacts>().ToList(); 

            label.Text = (items[0] as Contacts).Complete; 

            return label; 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            throw new NotImplementedException(); 

        } 

    } 

 

Code Example[XAML]: 

<listView:SfListView x:Name="listView" AutoFitMode="Height" GroupHeaderSize="60"  

                          ItemsSource="{Binding contactsinfo}" ItemSpacing="0,0,5,0"> 

 

   <listView:SfListView.GroupHeaderTemplate> 

     <DataTemplate> 

       <ViewCell> 

         <ViewCell.View> 

           <StackLayout BackgroundColor="#E4E4E4"> 

             <Label Text="{Binding Key}"  

                         FontSize="22"  

                         FontAttributes="Bold" 

                         VerticalOptions="Center"  

                         HorizontalOptions="Start"  

                         Margin="20,0,0,0" /> 

             <Label x:Name="GroupHeaderLabel" BindingContext="{Binding Items, Converter={StaticResource GroupItemConverter}, ConverterParameter={x:Reference GroupHeaderLabel}}"/> 

           </StackLayout> 

         </ViewCell.View> 

       </ViewCell> 

     </DataTemplate> 

   </listView:SfListView.GroupHeaderTemplate>
</listView:SfListView> 

 

For your reference, we have attached our sample and you can download it from the below link. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/136226/ze/SfListViewSample-641513172 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran.  

 

[Alan]

Hi Muthu, 

Thanks for the clarification, I get it now. One more question - how can I get the label to refresh if the data source is updated?

Thanks,

Alan

[Muthu Kumaran Gnanavinayagam]

Hi Alan, 

 

We would like to let you know that you can refresh the GroupHeader after modifying the bound data to an element in GroupHeaderTemplate by calling the Refresh method in DataSource like below code example. 

 

Code Example[C#]: 

private void Button_Clicked(object sender, EventArgs e) 

{ 

 (listView.DataSource.DisplayItems[1] as Contacts).Complete = "Incomplete"; 

  listView.DataSource.Refresh(); 

} 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran. 

[wynston champion]

Hello, 

Where would a viable location be for adding listView.DataSource.Refresh(); in the code examples above?

Thanks, 

Wynston

[Lakshmi Natarajan]

Hi Wynston,

You can use the DataSource.Refresh method in the method that you use to update the property mentioned in this update.

Additionally, whenever the underlying object data changes during runtime, the DataSource.SourcePropertyChanged event is triggered. In this event, you can invoke the Refresh method.

You can also refer to the following documentation to update the GroupHeader based on its items data at run time,

KB link: https://www.syncfusion.com/kb/12017/how-to-display-a-summary-in-the-group-header-of-xamarin-forms-listview-sflistview

Please let us know if you need further assistance.

                                             

Regards,

Lakshmi Natarajan

[wynston champion]

Hi Lakshmi,

Is there way to update the property on the label of the GroupHeaderTemplate without refreshing the list? For example, I am using the converter example provided above, but if I update the property inside the ViewModel, can that be reflected on the Label inside the GroupHeaderTemplate as well?

Thanks,

Wynston

[Lakshmi Natarajan]

Hi Wynston,

The converter will be triggered when the binding property is updated. We update the underlying object data, in this case, but the converter binding value is Items from the GroupResult rather than the underlying object. As a result, the converter is unaware of the data changes and must be forced to trigger by calling the refresh method. This is expected behaviour in Xamairn.Forms.

Note: The GroupResult is the BindingContext for the GroupHeaderTemplate.

You can also refer to our user guidance document regarding the group header customization in the following link,

UG link: https://help.syncfusion.com/xamarin/listview/grouping#group-header-customization

Please let us know if you need further assistance.

Regards,

Lakshmi Natarajan

[wynston champion]

Hi Lakshmi,

Thank you for that explanation. That clears things a bit. 

For the refreshing the list, where in the code solution (provided to the original creator of this post), whether that's in the page's code-behind or a converter, can I add a listView.DataSource.Refresh()?

Thanks, 

Wynston

[Lakshmi Natarajan]

Hi Wynston,

As we have mentioned in our previous updates, you can call the Refresh method in the code behind where you update the underlying object.

Please let us know if you need further assistance.

Regards,

Lakshmi Natarajan