Group Header Item Disappears when switching between different contents

[Joseph Cellucci]

I am using a ContentView to display two different contents and switching the Contents of ContentView using data trigger.

Group Header Item is displayed correctly on first time when the SfListView is in UI.

After Switching the contents and coming back to the same content again, then Group Header item disappears.

I am testing this issue in iPad simulators (iOS 14.4)

I have created a sample application the replicates the issue. The code is attached with this.

Reproduction Steps:

On App Launch it Displayes:

Numbers

1

2

3

4

Click on change items toolbar button then it displays:

Alphabets

A

B

C

D

click again on change items toolbar button then it displays:

1

2

3

4

Expected behavior was it would display:

Numbers

1

2

3

4

Please resolve this issue at the earliest as I am planning a customer release of my app soon.

Attachment: SfListViewBugSample_(2)_6851ec10.zip

[Lakshmi Natarajan]

Hi Joseph, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Group Header Item Disappears when switching between different contents” from our side. We would like to inform you that when changing the ContentView based on Triggers, the BindingContext changed to null. In this case, the ItemsSource will be cleared. Also, when ItemsSource is cleared, the DataSource.GroupDescriptor will be cleared. This is the expected behavior of the SfListView.  

 

We have mentioned the same behavior in our user guidance document. You can refer to our documentation from the following link, 

UG link: https://help.syncfusion.com/xamarin/listview/grouping 

 

So, we suggest you to set the GroupDescriptor when changing the views. Please refer to the following code snippets to achieve your requirement, 

 

Behavior: Update the GroupDescriptor, when ItemsSource is changed. 

public class SfListViewBehavior : Behavior<SfListView> 

{ 

    SfListView ListView; 

    protected override void OnAttachedTo(SfListView bindable) 

    { 

        ListView = bindable; 

        ListView.DataSource.GroupDescriptors.Add(new Syncfusion.DataSource.GroupDescriptor() 

        { 

            PropertyName = "GroupText" 

        }); 

        ListView.PropertyChanged += ListView_PropertyChanged; 

        base.OnAttachedTo(bindable); 

    } 

 

    private void ListView_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) 

    { 

        if (e.PropertyName == "ItemsSource") 

        { 

            ListView.DataSource.GroupDescriptors.Clear(); 

            ListView.DataSource.GroupDescriptors.Add(new Syncfusion.DataSource.GroupDescriptor() 

            { 

                PropertyName = "GroupText" 

            }); 

        } 

    } 

} 

 

XAML: Set behavior for SfListView. 

    <ScrollView Orientation="Vertical"> 

        <ContentView> 

            <ContentView.Triggers> 

                <DataTrigger TargetType="ContentView" Binding="{Binding IsAlphabets}" Value="True"> 

                    <Setter Property="Content"> 

                        <Setter.Value> 

                            <Grid> 

                                <Grid.RowDefinitions> 

                                    <RowDefinition Height="Auto"/> 

                                    <RowDefinition Height="1500"/> 

                                </Grid.RowDefinitions> 

                                <Grid.ColumnDefinitions> 

                                    <ColumnDefinition Width="*"/> 

                                </Grid.ColumnDefinitions> 

                                <syncfusion:SfListView x:Name="alphabetList" 

                   ItemsSource="{Binding Alphabets}" 

                   ItemSize="112" ItemSpacing="20" VerticalOptions="FillAndExpand"> 

                                    <syncfusion:SfListView.Behaviors> 

                                        <behavior:SfListViewBehavior/> 

                                    </syncfusion:SfListView.Behaviors> 

                                    <syncfusion:SfListView.GroupHeaderTemplate> 

                                        <DataTemplate> 

                                            <Label Text="{Binding Key}"/> 

                                        </DataTemplate> 

                                    </syncfusion:SfListView.GroupHeaderTemplate> 

                                    <syncfusion:SfListView.ItemTemplate> 

                                        <DataTemplate> 

                                            <Label Text="{Binding ItemText}"/> 

                                        </DataTemplate> 

                                    </syncfusion:SfListView.ItemTemplate> 

                                </syncfusion:SfListView> 

                                <Grid Grid.Row="1" BackgroundColor="Green"> 

 

                                </Grid> 

                            </Grid> 

                        </Setter.Value> 

                    </Setter> 

                </DataTrigger> 

                <DataTrigger TargetType="ContentView" Binding="{Binding IsAlphabets}" Value="False"> 

                    <Setter Property="Content"> 

                        <Setter.Value> 

                            <Grid> 

                                <Grid.RowDefinitions> 

                                    <RowDefinition Height="Auto"/> 

                                    <RowDefinition Height="1500"/> 

                                </Grid.RowDefinitions> 

                                <Grid.ColumnDefinitions> 

                                    <ColumnDefinition Width="*"/> 

                                </Grid.ColumnDefinitions> 

                                <syncfusion:SfListView x:Name="numbersList" 

                   ItemsSource="{Binding Numbers}" 

                   ItemSize="112" ItemSpacing="20" VerticalOptions="FillAndExpand"> 

                                    <syncfusion:SfListView.Behaviors> 

                                        <behavior:SfListViewBehavior/> 

                                    </syncfusion:SfListView.Behaviors> 

                                    <syncfusion:SfListView.GroupHeaderTemplate> 

                                        <DataTemplate> 

                                            <Label Text="{Binding Key}"/> 

                                        </DataTemplate> 

                                    </syncfusion:SfListView.GroupHeaderTemplate> 

                                    <syncfusion:SfListView.ItemTemplate> 

                                        <DataTemplate> 

                                            <Label Text="{Binding ItemText}"/> 

                                        </DataTemplate> 

                                    </syncfusion:SfListView.ItemTemplate> 

                                </syncfusion:SfListView> 

                                <Grid Grid.Row="1" BackgroundColor="Red"> 

 

                                </Grid> 

                            </Grid> 

                        </Setter.Value> 

                    </Setter> 

                </DataTrigger> 

            </ContentView.Triggers> 

            ... 

        </ContentView> 

    </ScrollView> 

 

We have attached the modified sample in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/325929/ze/SfListViewBugSample1604267069 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan