RadListView inside another RadListView on iOS

[tigrenok00]

Hi I'm having trouble displaying a RadListView within another RadListView item template on iOS. The same html code works fine on Android. I know that in iOS the listview should be wrapped in a GridLayout to have the height calculated properly. I do manage to display them in various layouts, but not inside another listview. Here is the code of the outer listview template:

<ng-template tkTemplateKey="free_text" let-item="item">
        <StackLayout>
            <StackLayout class="list-item" backgroundColor="white">
                <GridLayout rows="*">
                    <line-events row="0" [events]="item.events" (listTapped)="selectItem(item)"></line-events>
                </GridLayout>
            </StackLayout>
            <StackLayout class="hr-light"></StackLayout>
        </StackLayout>
    </ng-template>

And here is the code of line-events component, which holds the inner listview and is not displayed:

<GridLayout rows="*">
        <RadListView row="0"  height="100%"  visibility="{{events.length > 0 ? 'visible' : 'collapsed'}}" #listView [items]="events" [itemTemplateSelector]="selectItemTemplateChat"
            selectionBehavior="None" multipleSelection="false" class="chat-list">

            <ng-template tkTemplateKey="xxx" let-item="item">
                <StackLayout (tap)="tapList()">
                   <!-- stuff here -->
                </StackLayout>
            </ng-template>

        </RadListView>
   </GridLayout>

When I display the line-events component outside a listview on a different page, it works just fine.

Appreciate your advice.

======================== These are the versions I'm using: Angular iOS 10.3 Progress NativeScript UI version: "3.1.0-2017-7-31-6", CLI: 3.1.1 Cross-platform modules: 3.1.0 Runtime(s): 3.1.1

[ginev]

@tigrenok00, putting a List inside a List is not a good practice. What kind of scenario are you aiming to implement? As far as having the internal List displayed, you will have to specify height to the GridLayout hodling it. When creating the visual items, the List measures each container by letting it determine its own size. Since the internal List on iOS does not have a desired size, you end up with a List item with height 0.

[tigrenok00]

Hi, As for the scenario, imagine a list of items with a list of comments inside each item. The comments list (the inner list) needs to have a height adjusted automatically to display the variable number of comments. Should I be calculating the height inside the inner list based of number of items, would that be a solution? By the way, it does work perfrectly on android as is. Thanks!

[tigrenok00]

When I think about it, calculating the height is not trivial, because each comment inside could have its own height (based on template's type, text length etc)

[ginev]

@tigrenok00 - how many comments on average are you expecting here? I'd suggest using the lightweight Repeater component when populating the comments. On iOS the List doesn't size itself based on its items - that is why it does not work as you expect it. You can alternatively explicitly set the height of the list on iOS to see the items.

[tigrenok00]

In the "comments" list could be about 5 items in average. The thing is that they have different templates - it could be a comment, or another event. I did a search and I'm a bit confused whether in Angular 2 the Repeater component available (with templates), or is there only *ngFor directive? (no templates in such case)

[tsonevn]

Hi @tigrenok00, Excuse us for the delay in reply. The Repeater component is available only for non-Angular projects, if you needed the same functionality, which is provided by this component, you could use ngFor directive inside an NS Angular project.