maui CollectionView with grouping enabled doesn't reflect the change on UI when a child record is added/removed

Description

CollectionView with grouping enabled doesn't reflect the change on UI when a child record is removed

Steps to Reproduce

Run the code from repo link provided below which will preload parent and child records on the collectionview.
Tap on a child item to remove it from collection. The item is programmatically removed but not reflected on the UI.
Click on "+" against any parent item to add a new child record which is pragmatically added but not reflecting on the UI

Link to public reproduction project repository

https://github.com/boopathyraj25/MAUI.CollectionViewBugs

Version with bug

8.0.14 SR3.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 27 and up

Did you find any workaround?

No

Relevant log output

No response

May 01 '24 23:05 boopathyraj25

/similarissues

May 02 '24 22:05 PureWeen

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

CollectionView with grouping enabled behaves abnormally after adding a new child record (#22156), similarity score: 0.86
App crashes when you clear a group's record in CollectionView (#20819), similarity score: 0.75
Moving items in grouped CollectionView is moving the wrong items (#21698), similarity score: 0.74
CollectionView ItemsUpdatingScrollMode="KeepLastItemInView" not working when IsGrouped="True" (#12036), similarity score: 0.73
CollectionView does not adjust the size of a group when items in the group change size in ios and android (#21913), similarity score: 0.73

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

May 02 '24 22:05 github-actions[bot]

Can repro this issue at Android platform on the latest 17.10 Preview 6(8.0.21).

May 06 '24 03:05 RoiChen001

First of all, I'd recommend checking the documentation for properly structuring the data into groups before binding it to the CollectionView. When I encountered a similar issue before, the key solution for me was to use ObservableCollection instead of List for the elements.

ObservableCollection provides notifications when items are added, removed, or changed, ensuring that the UI stays in sync with the underlying data.

Define a model class for the service category group:

public class ServiceCatGroup : ObservableCollection<ServiceUIModel>
{
    public string CategoryName { get; private set; }

    public ServiceCatGroup(string categoryName, ObservableCollection<ServiceUIModel> services) : base(services)
    {
        CategoryName = categoryName;
    }
}

May 16 '24 11:05 gework7

First of all, I'd recommend checking the documentation for properly structuring the data into groups before binding it to the CollectionView. When I encountered a similar issue before, the key solution for me was to use ObservableCollection instead of List for the elements.

ObservableCollection provides notifications when items are added, removed, or changed, ensuring that the UI stays in sync with the underlying data.

Define a model class for the service category group:
public class ServiceCatGroup : ObservableCollection<ServiceUIModel>
{
    public string CategoryName { get; private set; }

    public ServiceCatGroup(string categoryName, ObservableCollection<ServiceUIModel> services) : base(services)
    {
        CategoryName = categoryName;
    }
}

@gework7 , I will definitely try this. Thank you. BTW I don't see Observable collection mentioned in the documentation instead List is used.

May 16 '24 11:05 boopathyraj25

@boopathyraj25 did it work?

May 31 '24 22:05 gework7

@boopathyraj25 did it work?

@gework7 It works but it's not a solution for my use case because my requirement is to have the CategoryName as well an Observable property. In order to achieve that I had to annotate the class with [ObservableObject] which doesn't allow inheriting ObservableCollection<ServiceUIModel> but it works with List<ServiceUIModel>.

May 31 '24 22:05 boopathyraj25

@boopathyraj25 did it work?

@gework7 It works but it's not a solution for my use case because my requirement is to have the CategoryName as well an Observable property. In order to achieve that I had to annotate the class with [ObservableObject] which doesn't allow inheriting ObservableCollection but it works with List.

The observable collection already implements the necessary INotifyPropertyChanged interfaces. Just make a private field categoryName and public property CategoryName, then in the setter call On property changed(new(name of(CategoryName));

private string categoryName;

public string CategoryName
{
    get => categoryName;
    set {
        categoryName = value; 
        OnPropertyChanged(new(nameof(CategoryName));
    }
}

Jun 10 '24 07:06 jari-schuurman

@jari-schuurman , It worked. Thank you very much for the solution.

Jun 11 '24 17:06 boopathyraj25

@boopathyraj25 just be aware of a memory leak, more details can be found here: https://github.com/dotnet/maui/issues/22954

Jun 11 '24 20:06 jari-schuurman

Ok. Thank you.

On Tue, Jun 11, 2024, 15:16 jari-schuurman @.***> wrote:

@boopathyraj25 https://github.com/boopathyraj25 just be aware of a memory leak, more details can be found here: #22954 https://github.com/dotnet/maui/issues/22954

— Reply to this email directly, view it on GitHub https://github.com/dotnet/maui/issues/22158#issuecomment-2161537867, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQFMMGHIMFIBULZIQJ2ZYPLZG5LLXAVCNFSM6AAAAABHCXKLLCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRRGUZTOOBWG4 . You are receiving this because you were mentioned.Message ID: @.***>

Jun 11 '24 20:06 boopathyraj25