Search code examples
.netmauiobservablecollection

Grouped Observable CollectionView lazy loading does not trigger for iOS


I have a CollectionView containing Task items group by Type in my .NET MAUI app, with load on demand triggering when ItemThreshold is met. This behavior works fine on Android, but does not seem to trigger on iOS. Below is my code:

.xaml Collection View:

<CollectionView  Margin="5,0,5,0" 
                             SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                             SelectionChangedCommand="{Binding ItemSelectCommand}"    
                             SelectionMode="Single"
                             ItemsSource="{Binding TaskList}"
                             ItemTemplate="{StaticResource TaskSelector}"
                             EmptyView="No Tasks to display"
                             IsGrouped="True"
                             RemainingItemsThreshold="{Binding ItemThreshold}"
                             RemainingItemsThresholdReachedCommand="{Binding LoadMoreDataCommand}">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Vertical"
                                       ItemSpacing="2" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.GroupHeaderTemplate>
                        <DataTemplate>
                            <Label Text="{Binding Type}" FontSize="18" FontAttributes="Bold" />
                        </DataTemplate>
                    </CollectionView.GroupHeaderTemplate>
                    <CollectionView.Footer>
                        <StackLayout>
                            <ActivityIndicator IsRunning="True" IsVisible="{Binding IsLoading}" HeightRequest="40" WidthRequest="40" HorizontalOptions="Center" />
                        </StackLayout>
                    </CollectionView.Footer>
                </CollectionView>

As you can see above, the LoadMoreData command should be triggered on scrolling to the last few items in the existing list when ItemThreshold is reached. The associated ViewModel is below:

.cs

        [RelayCommand]
        private async Task Refresh()
        {
            try
            {
                page = 1;

                (List<TaskListModel> taskList, _) = await restAPIService.GetTaskList(page);

                TaskList.Clear();
                AppendToCollection(taskList);

            }
            catch (Exception ex)
            {
                // catch case
            }
            finally
            {
                ItemThreshold = 0;
            }
        }

        [RelayCommand]
        private async Task LoadMoreData()
        {
            try
            {
                page++;

                (List<TaskListModel> taskList, _) = await restAPIService.GetTaskList(page);

                if (taskList.Count > 0)
                    AppendToCollection(taskList);
                else
                    ItemThreshold = -1;
            }
            catch (Exception ex)
            {
                // catch case
            }
        }

The above code works fine on Android, with the LoadMoreData method being called correctly at the end of the list. However, for iOS, this method is never called, hence our lazy loading does not work.

Appreciate any help :)!

We are aware that this potentially could be an existing bug of MAUI's grouped CollectionView for the iOS platform:

Grouped CollectionView lazy loading does not trigger [RemainingItemsThresholdReached] on iOS and Windows · Issue #10078 · dotnet/maui · GitHub

https://github.com/dotnet/maui/issues/10078

We are actively trying to find a workaround to this issue


Solution

  • Closing as we are proceeding to use the repo presented to us by @Peter as a workaround for now.