ListView not showing on iOS nativescript angular app

[Nicola]

I've loaded the telerik ui pro controls in my project and they work fine on android.

When I try to use the RadListView though it doesn't render anything out on iOS:

Below is the code I use to render it:

<RadListView [items]="dataItems">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical">
<Label class="nameLabel" [text]="item.name"></Label>
<Label class="descriptionLabel" [text]="item.description"></Label>
</StackLayout>
</ng-template>
</RadListView>

Aside from importing the directives is anything else I need to do for it to load properly?

[Nick Iliev]

Hello Nicola Onassis,

Assuming that you have registered your RadListViewComponent in your Angular modules file like show here there is also one other possible reason for your RadListView to work on Android but not to show anything on iOS. 

In iOS, the implementation for RadListView uses native techniques and what is specific in iOS is that your list control should have a predefined size of some kind. By default, the RadListView does not have any height and width so what is happening is that your list view is loaded but does not take any space. The same will happen if your RadListView is nested in StackLayout with no predefined height (as the StackLayout is a layout which will take space enough to contain its children and if the children does not have height it won't render any content visually)
The solution for this is to either provide some sizes for your RadListView (using DP so it would take equal proportioned space on different device screens) or to nest it in a parent layout with height.

e.g.

<GridLayout rows="*">
    <RadListView row="0" [items]="dataItems">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.description"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

In the example above, our RadListView is nested in the first row of a GridLayout. The GridLayout has set the dimensions of the first row using * which means let the row takes all the space available for height. Of course, you can also use DP and set value like rows="500, 100" (create two rows - the first has height 500 and the second 100) but keep in mind that settings like rows="auto"  will not show your RadListView as it is the same as using StackLayout (size depends on the size of the children).

Another solution is to assign height directly on your RadListView.
e.g.

<RadListView height="400" [items]="dataItems">

Regards,
Nikolay Iliev
Telerik by Progress

[Nicola]

Thank you that solved my problem!