Inserting multiple RadListViews does not show on iOS

Question

I need Multiple RadListViews on the same page, I'm using NativeScript Angular

I don't know the number of items in each list, and the items might be of very different size depending on the amount of text the item contains.

So to speak, I need three RadLists on top of each other - the first might have 3 items, the next 72 and the last 9 items. I want each list to take op the height its contents demands, so I can show them on top of each other, no matter how long they are.

On Android it works like a charm - each radlistview takes up in exactly the height needed to show its items and produces the next radlistview right after

On iOS, on the other hand, it's very different - if I do not set the height of the RadListView itself it simply does not show.

I have the two RadListViews living inside a GridLayout, and giving the rows an absolute value like row="150, 150" or even rows="*,*" will show as much of the list as the provided values permits - but I need it to be rows="auto, auto" as I have no idea how high each list is gonna be, and I want to show all the items.

Setting the height directly on the RadListView will also work, but again - I don't know the height.

Setting height="100%" directly on the RadListView does not solve my problem as I cannot have an absolute parent height.

So is this possible at all, or do I have to calculate a number for the height property (which I really really don't want to do)

Again... the problem only exists on iOS devices.

I have tried feeding the dataItem both as ObservableArray and as a plain array of objects type: name[], because I thought that the asynchronicity of the ObservableArray might have a role to play, but it does not matter - I can even fill the text property with a constant like instead of . Still, if no height is set on either the row or the RadListView itself - nothing will show up.

Regards Per

<GridLayout rows="auto, auto'>
    <RadListView [items]=" dataItems">
      <ng-template tkListItemTemplate let-item="item">
        <StackLayout orientation="vertical">
            <Label [text]="item.firstname"></Label>
            <Label [text]="item.lastname"></Label>
        </StackLayout>
      </ng-template>
    </RadListView>
    <RadListView [items]="dataItems">
      <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label [text]="item.firstname"></Label>
                <Label [text]="item.lastname"></Label>
            </StackLayout>
      </ng-template>
    </RadListView>
</GridLayout>

Narendra Narendra · Accepted Answer · 2019-04-08T22:42:53

I have created a playground for you here. When you are using a GridLayout, you need to assign row to RadListView.

<GridLayout rows="auto, auto'>
    <RadListView row="0" [items]=" dataItems">
      <ng-template tkListItemTemplate let-item="item">
        <StackLayout orientation="vertical">
            <Label [text]="item.firstname"></Label>
            <Label [text]="item.lastname"></Label>
        </StackLayout>
      </ng-template>
    </RadListView>
    <RadListView row="1" [items]="dataItems">
      <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label [text]="item.firstname"></Label>
                <Label [text]="item.lastname"></Label>
            </StackLayout>
      </ng-template>
    </RadListView>
</GridLayout>

Inserting multiple RadListViews does not show on iOS

1 Answers