0

I am trying to create a nested list view(parent horizontal scroll and children vertical scroll), which is working and looking perfect but as click on vertically present child item and navigates to new page and then comes back, the vertical scroll position is lost.

Here is my sample code:

<RadListView [items]="data" #parentRadlistview>
    <ListViewLinearLayout tkListViewLayout scrollDirection="Horizontal" itemInsertAnimation="Default" itemDeleteAnimation="Default"></ListViewLinearLayout>
    <ng-template tkListItemTemplate let-d="item" let-i="index">
        <StackLayout orientation="vertical">
            <RadListView [items]="d.list" class="radlistview-child" #childRadlistview>
                <ListViewLinearLayout tkListViewLayout  dynamicItemSize="false" scrollDirection="Vertical" itemInsertAnimation="Default" itemDeleteAnimation="Default"></ListViewLinearLayout>
                <ng-template tkListItemTemplate let-course="item">
                    <label [text]="course.name"></label>
                </ng-template>
            </RadListView>
        </StackLayout>
    </ng-template>

It would be really helpful if anyone can guide me how to fix this.

PS: I can't use Tabview since the width I need for parent RadListView is lesser than the whole screen. And I can't use scrollview for horizontal scroll since it need to work like Tabview which I got working using RadListView only.

Thanks!

Deepika
  • 460
  • 5
  • 20
  • 2
    i would avoid nesting radlistviews if you can, although i solved an issue of the scroll position not remaining by using the listview instead – mast3rd3mon Dec 04 '18 at 12:25
  • can you show the code. Thanks! – Deepika Dec 04 '18 at 12:27
  • theres no code to it, just use `ListView` instead of `RadListView` – mast3rd3mon Dec 04 '18 at 12:27
  • but then how to scroll it horizontally? Which Radlistview to replace parent or child? I have tried changing child but no success. – Deepika Dec 04 '18 at 12:28
  • You can't nest ListView / RadListView. I would suggest to think of a better design, may be expandable list if you want to show n number of items on each list item. And the ListView / RadListView would only loose the scroll position when it's reloaded, either you have changed / updated the data source Or called refresh method. Otherwise it would retain the scroll position. Do you have a Playground example where we can see the issue? – Manoj Dec 04 '18 at 12:47
  • Hey @Manoj I have created playground here: https://play.nativescript.org/?template=play-ng&id=UWrRN3&v=1. could you please check it and suggest solution. Thank you – Deepika Dec 07 '18 at 12:30
  • @Deepika For this particular use case I would suggest using RadListView inside [Pager](https://github.com/triniwiz/nativescript-pager). – Manoj Dec 08 '18 at 17:44

0 Answers0