How-to nested two ListView?

[Comercializadora Paxia]

Hello,

Is it possible to nest two ListView each with a different DataSource?

 

Can you give an example, please?

[Maria]

Hello,

I have created a sample project with two ListView controls The second is added inside the first ListView ItemTemplate. In the project, there are two different DataSources and two collections. Download the provided example, use it as a base and extend it further per your exact scenario.

Regarding to the question for nesting ListViews - It Is possible to add ListView inside ListView, but it is not recommended and let me explain why: ListView control has an internal scrolling mechanism, and you should avoid nesting scrolling controls. There is a warning in the .NET Maui ScrollView documentation: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview?view=net-maui-7.0 

ScrollView objects should not be nested. In addition, ScrollView objects should not be nested with other controls that provide scrolling, such as CollectionView, ListView, and WebView. 

The same is valid for Telerik .NET MAUI controls that have internal scrolling, controls like: DataGrid, ListView, DataForm, ItemsControl.

Regards,
Maria
Progress Telerik

[Comercializadora Paxia]

Thanks for the help.
The problem that I am presenting is when I want to bind commands from the detail or nested list, it does not recognize them.

<telerik:RadListView x:Name="SampleList" ItemsSource="{Binding Coleccion}" SelectionMode="None">
            <telerik:RadListView.ItemTemplate>
                <DataTemplate>
                    <telerik:ListViewTemplateCell>
                        <telerik:ListViewTemplateCell.View>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Label Grid.Row="0" Text="{Binding NameStore}" />
                                <Label Grid.Row="1" Text="{Binding Description}" />
                                <telerik:RadListView x:Name="DetailSampleList" Grid.Row="2" ItemsSource="{Binding Details}" SelectionMode="None">
                                    <telerik:RadListView.ItemTemplate>
                                        <DataTemplate>
                                            <telerik:ListViewTemplateCell>
                                                <telerik:ListViewTemplateCell.View>
                                                    <Grid>
                                                        <Label Text="{Binding NameMark}" />
                                                    </Grid>
                                                </telerik:ListViewTemplateCell.View>
                                            </telerik:ListViewTemplateCell>
                                        </DataTemplate>
                                    </telerik:RadListView.ItemTemplate>
                                    <telerik:RadListView.Commands>
                                        <telerik:ListViewUserCommand Id="ItemTap" Command="{Binding DetailItemTapCommand}" />
                                    </telerik:RadListView.Commands>
                                </telerik:RadListView>
                            </Grid>
                        </telerik:ListViewTemplateCell.View>
                    </telerik:ListViewTemplateCell>
                </DataTemplate>
            </telerik:RadListView.ItemTemplate>
            <telerik:RadListView.Commands>
                <telerik:ListViewUserCommand Id="ItemTap" Command="{Binding ColeccionItemTapCommand}" />
            </telerik:RadListView.Commands>
        </telerik:RadListView>

This is the ViewModel

public partial class NestedListDemoViewModel : ObservableObject
    {
        public NestedListDemoViewModel()
        {
            ObservableCollection<DetailModel> list = new ObservableCollection<DetailModel>();
            list.Add(new DetailModel { DaysLeft = 10, NameMark = "MARK1", PerfectStore = 0, StatusMark = "PENDING" });
            list.Add(new DetailModel { DaysLeft = 5, NameMark = "MARK2", PerfectStore = 0, StatusMark = "PENDING" });
            list.Add(new DetailModel { DaysLeft = 3, NameMark = "MARK3", PerfectStore = 1, StatusMark = "PENDING" });
            list.Add(new DetailModel { DaysLeft = 2, NameMark = "MARK4", PerfectStore = 1, StatusMark = "PENDING" });
            ObservableCollection<DetailModel> list2 = new ObservableCollection<DetailModel>();
            list2.Add(new DetailModel { DaysLeft = 3, NameMark = "MARK1", PerfectStore = 0, StatusMark = "PENDING" });
            list2.Add(new DetailModel { DaysLeft = 6, NameMark = "MARK2", PerfectStore = 0, StatusMark = "PENDING" });
            list2.Add(new DetailModel { DaysLeft = 9, NameMark = "MARK5", PerfectStore = 0, StatusMark = "PENDING" });
            _Coleccion = new ObservableCollection<SampleModel> { 
                new SampleModel { Description = "Description of XXX", Details = list, HasChilds = true, NameStore = "XXX" }, 
                new SampleModel { Description = "Description of YYY", Details = list2, HasChilds = true, NameStore = "YYY"}
            };
        }

        [ObservableProperty]
        ObservableCollection<SampleModel> _Coleccion;

        [RelayCommand]
        void DetailItemTap(ItemTapCommandContext context)
        {
            var item = context.Item;
        }

        [RelayCommand]
        void ColeccionItemTap(ItemTapCommandContext context)
        {
            var item = context.Item;
        }
    }

 

DetailItemTap is not called on the viewModel, can you help me please.
Greetings!!

[Lance | Senior Manager Technical Support]

Hi Comercializadora Paxia, this is just one of the problems you're going to run into, which is why Maria warned you against it. You have competing commands, Tap for the top control and a Tap for the nested control.

Let's step back and think about this in terms of layers. If you have Tap gesture commands setup for both ListVews, how would the top ListView know that the user's gesture is for the inner ListView?

Here's a diagram to help explain the topic:

There is a solution to this known as chaining (scroll viewers use chaining for example), but this is not something available for tap gestures.

This is the same conceptual black hole anywhere on any platform, when using nested gesture recognition systems, only one of them is going to get the gesture.

Suggestions

If this is what you want to achieve, I recommend using different control for the inner list. A CollectionView with gestures disabled and only use events, or maybe RadItemsControl and use a Button inside the child's ItemTemplate

For example, you can do this with an EventToCommand behavior, and set the normal content to InputTransparent=True:

<DataTemplate>
    <Grid>
        <!-- This Button is invisible ot the user, it's only here to trigger the clicked event-->
        <Button BackgroundColor="Transparent">
            <Button.Behaviors>
                <behaviors:EventToCommandBehavior EventName="Clicked"
                                                  Command="{Binding SomeCommand}"
                                                  CommandParameter="{Binding}"/>
            </Button.Behaviors>
        </Button>

        <!-- The normal content has InputTransparent=True so the user's click/tap reaches the button -->
        <StackLayout InputTransparent="True">
            <Label Text="Your normal content, use InputTransparent to True to allow the Button click event"
                       InputTransparent="True"></Label>
        </StackLayout>
    </Grid>
</DataTemplate>

Ultimately, what you're trying to do currently is not a supported scenario. Toi achieves it, will take some experimentation with workarounds. If you want an official control with hierarchical this will need to be done with a control that supports it, like a TreeView (this isn't in MAUI yet, but we're working on it)