ListView not showing on iOS nativescript angular app

Thread is closed for posting
3 posts, 1 answers
  1. Nicola
    Nicola avatar
    13 posts
    Member since:
    Mar 2017

    Posted 05 May 2017 Link to this post

    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?

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 May 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Nicola
    Nicola avatar
    13 posts
    Member since:
    Mar 2017

    Posted 08 May 2017 in reply to Nikolay Iliev Link to this post

    Thank you that solved my problem!
Back to Top