I have a Grouped List in C# MAUI MVVC, destination is Andoid

public class GroupData : ObservableCollection<DetailData>
{
    public string Name { get; private set; }
    public GroupData(string name, ObservableCollection<DetailData> d) : base(d) { Name = name; }
}

public class DetailData
{
    public int Nr { get; set; }
    public string Detail { get; set; }
}

Data are added like this

    public ObservableCollection<GroupData> GetData()
    {
        ObservableCollection<GroupData> data = new ObservableCollection<GroupData>();

        data.Add(new GroupData("Group1", new ObservableCollection<DetailData>
        {
            new DetailData { Nr = 1, Detail = "Test 1" },
            new DetailData { Nr = 3, Detail = "Test 2" }
        }));

        data.Add(new GroupData("Group2", new ObservableCollection<DetailData>
        {
            new DetailData { Nr = 3, Detail = "Test 3" },
            new DetailData { Nr = 4, Detail = "Test 4" }
        }));

        return data;
    }

My Main Page View Model has the bindable collection

   public ObservableCollection<GroupData> GroupData { get; } = new ObservableCollection<GroupData>();

and an event on a button when showing the list. Clicking on it should remove the selected item

    [RelayCommand]
    private async Task ButtonOk(DetailData data)
    {
        foreach (var item in GroupData)
        {
            foreach (var child in item)
            {
                if (child.Nr == data.Nr)
                {
                    item.Remove(child);
                    break;
                }
            }
        }
    }

Data are shown with this

<RefreshView Command="{Binding RefreshCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
    <ScrollView>
        <Grid>
            <ListView ItemsSource="{Binding GroupData}" 
                      IsGroupingEnabled="True"
                      HasUnevenRows="True">
                <ListView.GroupHeaderTemplate>
                    <DataTemplate x:DataType="daten:GroupData">
                        <ViewCell>
                            <Label Text="{Binding Name}"/>
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="daten:DetailData">
                        <ViewCell>
                            <Grid >
                                <Label Text="{Binding Detail}"/>
                                <ImageButton Source="ok.jfif"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, 
                                    Path=ButtonOkCommand}" 
                                    CommandParameter="{Binding .}"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </ScrollView>
</RefreshView>

Now, when adding ONLY ONE grouped item to the observable collection "Group 1" with the two childs the removing works perfect.

But when adding a SECOND "Group 2" it unfortunately fails with error

**Java.Lang.IllegalStateException: 'The specified child already has a parent. You must call removeView() on the child's parent first.' **

What am I doing wrong? Thank you!!!

I have a Grouped List in C# MAUI MVVC, destination is Andoid

public class GroupData : ObservableCollection<DetailData>
{
    public string Name { get; private set; }
    public GroupData(string name, ObservableCollection<DetailData> d) : base(d) { Name = name; }
}

public class DetailData
{
    public int Nr { get; set; }
    public string Detail { get; set; }
}

Data are added like this

    public ObservableCollection<GroupData> GetData()
    {
        ObservableCollection<GroupData> data = new ObservableCollection<GroupData>();

        data.Add(new GroupData("Group1", new ObservableCollection<DetailData>
        {
            new DetailData { Nr = 1, Detail = "Test 1" },
            new DetailData { Nr = 3, Detail = "Test 2" }
        }));

        data.Add(new GroupData("Group2", new ObservableCollection<DetailData>
        {
            new DetailData { Nr = 3, Detail = "Test 3" },
            new DetailData { Nr = 4, Detail = "Test 4" }
        }));

        return data;
    }

My Main Page View Model has the bindable collection

   public ObservableCollection<GroupData> GroupData { get; } = new ObservableCollection<GroupData>();

and an event on a button when showing the list. Clicking on it should remove the selected item

    [RelayCommand]
    private async Task ButtonOk(DetailData data)
    {
        foreach (var item in GroupData)
        {
            foreach (var child in item)
            {
                if (child.Nr == data.Nr)
                {
                    item.Remove(child);
                    break;
                }
            }
        }
    }

Data are shown with this

<RefreshView Command="{Binding RefreshCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
    <ScrollView>
        <Grid>
            <ListView ItemsSource="{Binding GroupData}" 
                      IsGroupingEnabled="True"
                      HasUnevenRows="True">
                <ListView.GroupHeaderTemplate>
                    <DataTemplate x:DataType="daten:GroupData">
                        <ViewCell>
                            <Label Text="{Binding Name}"/>
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="daten:DetailData">
                        <ViewCell>
                            <Grid >
                                <Label Text="{Binding Detail}"/>
                                <ImageButton Source="ok.jfif"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, 
                                    Path=ButtonOkCommand}" 
                                    CommandParameter="{Binding .}"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </ScrollView>
</RefreshView>

Now, when adding ONLY ONE grouped item to the observable collection "Group 1" with the two childs the removing works perfect.

But when adding a SECOND "Group 2" it unfortunately fails with error

**Java.Lang.IllegalStateException: 'The specified child already has a parent. You must call removeView() on the child's parent first.' **

What am I doing wrong? Thank you!!!

• c#
• maui
• observablecollection

1 Answer 1

Yes, it is just the case as you said.

And if we removed the outer views(e.g.RefreshView and ScrollView) of ListView, we could remove the item properly.

You can refer to the following code on my side:

<!--<RefreshView Command="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"  x:Name="mRefreshView">
    <ScrollView>-->
        <Grid>
            <ListView ItemsSource="{Binding GroupData}"
                  IsGroupingEnabled="True"
                  x:Name="mListView"
                  HasUnevenRows="True">
                <ListView.GroupHeaderTemplate>
                    <DataTemplate x:DataType="local:GroupData">
                        <ViewCell>
                            <Label Text="{Binding Name}"/>
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:DetailData">
                        <ViewCell>
                            <Grid >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="60" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding Detail}"/>
                                <Button  Text="test"  Grid.Column="1"
                                Command="{Binding BindingContext.ButtonOkCommand, Source={x:Reference mListView}}"
                                CommandParameter="{Binding .}"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    <!--</ScrollView>
</RefreshView>-->

Note:

For this problem that you mentioned in this case, you can create a new issue here. Thanks for your support and feedback for Maui.