ListView always Empty

2 posts, 0 answers
  1. Alessio
    Alessio avatar
    14 posts
    Member since:
    May 2009

    Posted 22 Aug Link to this post

    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?

     

     

     

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 23 Aug Link to this post

    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
    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.
Back to Top