How to show RadListView on iOS

Question

I have the following code:

<GridLayout row="7" col="0" colSpan="3" rows="*" cols="*">
     <RadListView [items]="sourcesOptions" height="100%">
           <ng-template tkListItemTemplate let-item="item">
                 <StackLayout orientation="horizontal">
                       <Switch [checked]="true" class="switch"></Switch>
                       <Label [text]="item.label" textWrap="true" marginTop="15"></Label>
                 </StackLayout>
           </ng-template>
           <ListViewGridLayout tkListViewLayout itemHeight="200" scrollDirection="Vertical" spanCount="2"></ListViewGridLayout>
     </RadListView>
</GridLayout>

It is working on Android, but on iOS it isn't showing anything.

Note

I don't know if this can be related to the issue, but I get the items from a rest service.

Any help is appreciated!!

Answer 1

The problem was with the height when the items are async, in that case I needed to set the height manually to the parent layout of the RadListView component (The GridLayout in my case).

It didn't work if I set a height with percentage (100%), it had to be a fixed number, it was very inconvenient because the number of items are not always the same, so I created a function to set the height according with number of items received.

This is the code that fixed the issue:

<GridLayout row="7" col="0" colSpan="3" rows="*" cols="*" [height]="setHeight()">
     <RadListView [items]="sourcesOptions">
          <ng-template tkListItemTemplate let-item="item">
               <StackLayout orientation="horizontal">
                    <Switch [checked]="true" class="switch"></Switch>
                    <Label [text]="item.label" textWrap="true" marginTop="15"></Label>
               </StackLayout>
          </ng-template>
          <ListViewGridLayout tkListViewLayout itemHeight="70" scrollDirection="Vertical" spanCount="2"></ListViewGridLayout>
     </RadListView>
</GridLayout>