How-to nested two ListView?

1 Answer 984 Views
ListView
Comercializadora Paxia
Top achievements
Rank 1
Iron
Comercializadora Paxia asked on 09 Feb 2023, 01:29 AM

Hello,

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

 

Can you give an example, please?

1 Answer, 1 is accepted

Sort by
0
Maria
Telerik team
answered on 10 Feb 2023, 11:05 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Comercializadora Paxia
Top achievements
Rank 1
Iron
commented on 17 Feb 2023, 07:20 PM

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 | Manager Technical Support
Telerik team
commented on 17 Feb 2023, 07:55 PM

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)

Tags
ListView
Asked by
Comercializadora Paxia
Top achievements
Rank 1
Iron
Answers by
Maria
Telerik team
Share this question
or