nativescriptnativescript-angularnativescript-telerik-ui

Nativescript RadListView Header Disappearing (Android)


I am using RadListView trying to use the header feature. If I try to use a StackLayout inside the header it disappears after the content is loaded. But if the header is one element (such as a Label) it works fine. The issue only appears on Android.

<GridLayout>
        <RadListView [items]="products">
                <ng-template tkListItemTemplate let-item="item">
                        <StackLayout orientation="vertical">
                                <Label class="nameLabel" text="test title"></Label>
                                <Label class="descriptionLabel" text="test description"></Label>
                        </StackLayout>
                </ng-template>
                <ng-template tkListViewHeader>
                        <StackLayout orientation="vertical">
                                <Label text="This is header row 1"></Label>
                                <Label text="This is header row 2"></Label>
                        </StackLayout>
                </ng-template>
        </RadListView>
</GridLayout>

Before Load:

After load:


Solution

  • I found the issue. My data source for the list was not an Observable. So I guess it can't work with dynamic content being loaded directly into a normal array after it has been initialized.