Nativescript RadListView not visible on iOS

Question

I have created an component with RadListView and placed on few pages in my application. The RadListView is inside an Panel, and the visibility of the RadListView is controlled using the Panel header. The functionality works appropriately on Android, however, on iOS(iPhone 5s iOS 11.1) the RadListView is not visible.

I have tried wrapping the RadListView with GridLayout, however, that doesn't work.

Version information: nativescript-ui-listview: ^3.5.1, tns-core-modules: ^3.4.1

Component code:

<StackLayout xmlns:lv="nativescript-ui-listview">
    <GridLayout rows="*" columns="auto, *, auto" verticalAlignment="top" onTap="EntityHeaderTap" class="entity-header">
        <Image row="0" col="0" width="23" src="res://detail_Employee" verticalAlignment="center"/>
        <StackLayout row="0" col="1" orientation="horizontal" verticalAlignment="center" marginLeft="10">
            <Label id="entityLabel" text="Employee" fontSize="15" verticalAlignment="center" color="#706e77"/>
        </StackLayout>
        <Image id="entityArrow" row="0" col="2" width="14" src="res://arrow_u" verticalAlignment="center" />
    </GridLayout>
    <StackLayout id="entityContent" visibility="collapse" class="entity-content">
        <lv:RadListView id="employeeListView"  items="{{ Employees }}" itemTap="EmployeeItemTap"  visibility="{{ Employees ? 'visible' : 'collapsed' }}" selectionBehavior="None" separatorColor="transparent" height="100%">
            <lv:RadListView.itemTemplate>
                <GridLayout columns="*, 17" rows="50" class="{{ IsLast ? 'entity-item-last' : 'entity-item' }}">
                    <StackLayout col="0" verticalAlignment="center" marginLeft="5">
                        <Label text="{{ FullName ? FullName : '' }}" textWrap="true" fontSize="14" color="#4B4F63"/>
                        <Label text="{{ OrganisationName ? OrganisationName : '' }}" visibility="{{ OrganisationName ? 'visible' : 'collapsed' }}" textWrap="true" fontSize="12" color="#706e77"/>
                    </StackLayout>
                    <Image col="1" src="res://arrow_r" width="6" verticalAlignment="center"></Image>
                </GridLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>
        <StackLayout visibility="{{ Employees ? 'collapsed' : 'visible' }}">
            <Label text="No record found" fontSize="14" padding="5" margin="0 5" color="#aeafb7" />
        </StackLayout>
    </StackLayout>
</StackLayout>

Implementation

<GridLayout rows="auto, auto, *, auto"> 
    <ScrollView row="3" visibility="{{ selectedTabIndex == 2 ? 'visible' : 'collapsed' }}">
        <GridLayout rows="auto, auto, auto, auto, auto, auto, *" columns="*, *" class="tab-container" paddingBottom="15">
            ....
            <SearchComponent:EmployeePanel row="3" colSpan="2" marginTop="15" />
        </GridLayout>
    </ScrollView>
</GridLayout>

Nick Iliev Nick Iliev · Accepted Answer · 2018-04-04T08:32:36

The thing is that StackLayout does not have predefined size and will take the space needed for its children component. In this case, the RadListView is also lacking a predefined size (height="100%" but the parent stack layout is measured with infinity).On iOS, the native control behind the list view needs a size to measure and occupy.

So as a possible solution try to either provide a size (for the container or directly to the RadListView) or use GridLayout with rows="*" to take all available space and then set row="0" to your RadListView

For example something like this:

<GridLayout rows="auto, 500" xmlns:lv="nativescript-ui-listview">
    <GridLayout row="0" rows="*" columns="auto, *, auto" verticalAlignment="top" onTap="EntityHeaderTap" class="entity-header">
        <Image row="0" col="0" width="23" src="res://detail_Employee" verticalAlignment="center"/>
        <StackLayout row="0" col="1" orientation="horizontal" verticalAlignment="center" marginLeft="10">
            <Label id="entityLabel" text="Employee" fontSize="15" verticalAlignment="center" color="#706e77"/>
        </StackLayout>
        <Image id="entityArrow" row="0" col="2" width="14" src="res://arrow_u" verticalAlignment="center" />
    </GridLayout>
    <lv:RadListView row="1"  id="employeeListView"  items="{{ Employees }}" itemTap="EmployeeItemTap"  visibility="{{ Employees ? 'visible' : 'collapsed' }}" selectionBehavior="None" separatorColor="transparent" height="100%">
            <lv:RadListView.itemTemplate>
                <GridLayout columns="*, 17" rows="50" class="{{ IsLast ? 'entity-item-last' : 'entity-item' }}">
                    <StackLayout col="0" verticalAlignment="center" marginLeft="5">
                        <Label text="{{ FullName ? FullName : '' }}" textWrap="true" fontSize="14" color="#4B4F63"/>
                        <Label text="{{ OrganisationName ? OrganisationName : '' }}" visibility="{{ OrganisationName ? 'visible' : 'collapsed' }}" textWrap="true" fontSize="12" color="#706e77"/>
                    </StackLayout>
                    <Image col="1" src="res://arrow_r" width="6" verticalAlignment="center"></Image>
                </GridLayout>
            </lv:RadListView.itemTemplate>
    </lv:RadListView>
</GridLayout >

Or instead of explicitly setting DP you can use the star symbol to take all space available

rows="auto, *"

Nativescript RadListView not visible on iOS

1 Answers