ListView always Empty

[Alessio]

Hi,

I am evaluating UI for NativeScript and just to start I am trying to use controls inside an existing example.

I am able to run without problems angular example at https://github.com/telerik/nativescript-ui-samples-angular but when I try to replacing existing ListView with RadListView in other examples (i.e. https://github.com/NativeScript/sample-Groceries/) I get alway an empty result.

Here the steps i had followed:

1. Run in console tns plugin add nativescript-telerik-ui-pro
2. Added in app.module.ts import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui-pro/sidedrawer/angular";
   import { NativeScriptUIListViewModule } from "nativescript-telerik-ui-pro/listview/angular";
   import { NativeScriptUICalendarModule } from "nativescript-telerik-ui-pro/calendar/angular";
   import { NativeScriptUIChartModule } from "nativescript-telerik-ui-pro/chart/angular";
   import { NativeScriptUIDataFormModule } from "nativescript-telerik-ui-pro/dataform/angular";
   import { NativeScriptUIAutoCompleteTextViewModule } from "nativescript-telerik-ui-pro/autocomplete/angular";
   import { NativeScriptUIGaugesModule } from "nativescript-telerik-ui-pro/gauges/angular";  
3. In app.module.ts added definitions to NgModule @NgModule({
   providers: [
   BackendService,
   LoginService,
   authProviders
   ],
   imports: [
   NativeScriptModule,
   NativeScriptHttpModule,
   NativeScriptUIListViewModule,
   NativeScriptUISideDrawerModule,
   NativeScriptUICalendarModule,
   NativeScriptUIChartModule,
   NativeScriptUIDataFormModule,
   NativeScriptUIAutoCompleteTextViewModule,
   NativeScriptUIGaugesModule,
   NativeScriptRouterModule,
   NativeScriptRouterModule.forRoot(appRoutes),
4. Replace in html <ListView [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>
   </ListView> with <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>

At this point when I use ListView I can see the control in the page filled with values. When I use RadListView I can't see anything and there is no errors in logs.

 

I missing something?

 

 

 

[Nikolay Tsonev]

Hello Alessio,

Thank you for your interest in NativeScript.
The problem, in this case, is related to the async pipe, which is used while loading the data for the items.

The RadlistView do not support async pipe, which is used in grocery-list.component.html file ->

<RadListView
  [row]="row"
  [class.visible]="listLoaded"
  [items]="store.items | async | itemStatus:showDeleted"
  (itemLoading)="makeBackgroundTransparent($event)" (loaded)="load()">
  <ng-template let-item="item">

To Resolve this case I could suggest removing this pipe and using ObservableArray instead of the normal Array. An example could be found in the nativescript-ui-samples-angular application.
In this case, you could push every new data inside the subscribe callback of the service, which will trigger the update of the RadListView.

Hope this information helps.
Regards,
nikolay.tsonev
Progress Telerik