Nested ListView is not working in xamarin forms

Question

Nested list view is not working, I have a list which contains another list in it. To show it in View I am using Nested listview; But the code is not working,and i am not able to identify on where it went wrong... Below is my code

Main Page

<ContentPage.Content>
    <StackLayout>
        <ListView  x:Name="outerListview"   ItemsSource="{Binding lst}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell x:Name="outerListviewCell">
                        <ViewCell.View>
                            <ContentView>
                                <Label Text="{Binding ItemName}"/>
                                <StackLayout>
                                    <ListView ItemsSource="{Binding ItemList}">
                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <ViewCell x:Name="InnerListviewCell">
                                                    <Grid>
                                                        <Label Text="{Binding stockQty}"/>
                                                    </Grid>
                                                </ViewCell>
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                    </ListView>
                                </StackLayout>
                            </ContentView>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

ViewModel

public MainPageViewModel()
{
    lst = new ObservableCollection<A>()
    {
        new A()
        {
            ItemName="Item1", ItemList=new ObservableCollection<ItemDetails>()
                {
                    new ItemDetails() { stockQty="2"},
                    new ItemDetails(){ stockQty="3"}
                }
        },
        new A()
        {
            ItemName="Item2", ItemList=new ObservableCollection<ItemDetails>()
                {
                    new ItemDetails() { stockQty="3"},
                    new ItemDetails(){ stockQty="4"}
                }
         }
     };
}

Model ( Class A and Class Itemdetails)

class A:INotifyPropertyChanged
{
    public A()
    {
        ItemName = string.Empty;
        ItemList = new ObservableCollection<ItemDetails>();
    }
    private string _ItemName;
    public string ItemName
    {
        get { return _ItemName; }
        set { _ItemName = value; OnPropertyChanged(); }
    }
    private ObservableCollection<ItemDetails> _itemlist;
    public ObservableCollection<ItemDetails> ItemList
    {
        get { return _itemlist; }
        set { _itemlist = value; OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged(this,
                new PropertyChangedEventArgs(propertyName));
    }
}
class ItemDetails:INotifyPropertyChanged
{
    private string _stockQty;
    public string stockQty
    {
        get { return _stockQty; }
        set { _stockQty = value; OnPropertyChanged(); }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged(this,
                new PropertyChangedEventArgs(propertyName));
    }
}

When I Run the above code I am getting below output in screen

2
3

What is expected actually is

Item1
2
3
Item2
3
4

What is wrong in above code? could anyone can help me?

Almir Vuk · Accepted Answer · 2017-11-25 08:36:49Z

2

Nesting Listview inside another Listview is not a good idea and it is not a supported on Xamarin.Forms.

ListView is very "sensitive" and it can easialy cause problems with scrolling and of course there are problems with poor performance of your app.

So I strongly recommend you to rethink about your layout and take a look at Grouping with ListView more about it here, maybe you can achieve what you want with Grouping.

answered Nov 25, 2017 at 8:36

Almir Vuk

3,1831 gold badge22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thavudu Over a year ago

Almir, Thanks for your reply. Actually I cannot change the layout and have to use Nested ListView. I will be receiving list of object and each object contains list of items; I need to display all and I cannot Group it.

Diego Rafael Souza Over a year ago

To use a grouping don't implies to change layout. You can have the same layout with the correct approach, that is grouped listview as @AlmirVuk suggested

ColeX · Accepted Answer · 2017-11-27 06:54:38Z

After checking your code , I found something need to modify in your code.

In order to show the ItemName , you should wrap Label inside StackLayout .
In order to get Uneven Row, you should set listview.HasUnevenRows = true.

Modify your code as below:

<ContentPage.Content>
    <ListView  x:Name="outerListview" HasUnevenRows="True" ItemsSource="{Binding lst}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell x:Name="outerListviewCell">
                    <ViewCell.View>
                        <ContentView>
                            <StackLayout>
                                <Label Text="{Binding ItemName}"/>
                                <ListView ItemsSource="{Binding ItemList}" RowHeight="20">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell x:Name="InnerListviewCell">
                                                <Grid>
                                                    <Label Text="{Binding stockQty}"/>
                                                </Grid>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </StackLayout>
                        </ContentView>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage.Content>

mister_giga · Accepted Answer · 2017-11-27 09:04:14Z

0

That is absolutely wrong. You must use one ListView with IsGroupingEnabled set to True. Follow instuctions here to make it work correct: https://xamarinhelp.com/xamarin-forms-listview-grouping/

answered Nov 27, 2017 at 9:04

mister_giga

6321 gold badge17 silver badges37 bronze badges

Collectives™ on Stack Overflow

Nested ListView is not working in xamarin forms

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related