Getting Nativescript Telerik UI RadListView to work in Angular

Question

TNS v2.5.0

I've imported LISTVIEW_DIRECTIVES into my app.module and my template looks like

<ActionBar title="Events"></ActionBar>
<StackLayout orientation="vertical">
    <RadListView [items]="events">
        <template tkListItemTemplate let-event="item">
            <StackLayout orientation="vertical">
            <Image [src]="'https:' + event.image" stretch="aspectFit"></Image>
            <Label [nsRouterLink]="['/event', event.id]" [text]="event.title"></Label>
            </StackLayout>
        </template>
    </RadListView>
</StackLayout>

but this displays nothing but changing to a regular ListView works fine.

Also If I try a GridLayout like

<ActionBar title="Events"></ActionBar>
<GridLayout>
    <RadListView [items]="events">
        <template tkListItemTemplate let-event="item">
            <StackLayout orientation="vertical">
            <Image [src]="'https:' + event.image" stretch="aspectFit"></Image>
            <Label [nsRouterLink]="['/event', event.id]" [text]="event.title"></Label>
            </StackLayout>
        </template>
    </RadListView>
</GridLayout>

the app crashes with an error of

file:///app/tns_modules/nativescript-telerik-ui/listview/listview.js:1034:104: JS ERROR TypeError: undefined is not an object (evaluating 'itemViewDimensions.measuredWidth') Feb 5 11:40:53 Marcuss-iMac com.apple.CoreSimulator.SimDevice.1A8C1E25-DAC0-4BA0-822E-5A6F731F1CD7.launchd_sim[31919] (UIKitApplication:org.nativescript.t4g[0x7b2a][36194]): Service exited due to Segmentation fault: 11

Not sure if I've missed importing something somewhere but the documentation it's pretty sketchy so hard to be sure and looking at the examples

Commercialize

try <GridLayout rows='*'> – Vinnievinnitsa

Didn't make any difference – Commercialize

Interesting this example (github.com/telerik/nativescript-ui-samples-angular/blob/release/…) from the official nativescript-ui repository is working fine and has the same UI structure. Can you try it out. – Navvy

Tried that and still gives me the error file:///app/tns_modules/nativescript-telerik-ui/listview/listview.js:1034:104: JS ERROR TypeError: undefined is not an object (evaluating 'itemViewDimensions.measuredWidth') – Commercialize

Tested this with the latest 2.5.0 version of NativeScript in the mentioned (github.com/telerik/nativescript-ui-samples-angular) repo and no error was thrown. – Navvy

Note that the RadListView cannot be placed in contains of the StackLayout type, since they are measured in a way that is not compatible with that control. – Navvy

This works <ActionBar title="Events"></ActionBar> <GridLayout> <ListView [items]="events | async"> <template let-item="item"> <StackLayout orientation="vertical"> <Image [src]="'https:' + item.image" height="200"></Image> <Label class="nameLabel" [text]="item.title"></Label> </StackLayout> </template> </ListView> </GridLayout> – Commercialize

This doesn't <ActionBar title="Events"></ActionBar> <GridLayout tkExampleTitle tkToggleNavButton> <RadListView [items]="events | async"> <template tkListItemTemplate let-item="item"> <StackLayout orientation="vertical"> <Image [src]="'https:' + item.image" height="200"></Image> <Label class="nameLabel" [text]="item.title"></Label> </StackLayout> </template> </RadListView> </GridLayout> – Commercialize

I get an error of file:///app/tns_modules/nativescript-telerik-ui/listview/listview.js:1034:104: JS ERROR TypeError: undefined is not an object (evaluating 'itemViewDimensions.measuredWidth') – Commercialize

Answer 1

LISTVIEW_DIRECTIVES is for Nativescript with Javascript.

For Angular2:

Install the plugin tns plugin add nativescript-telerik-ui after this rebuild with tns run android in order to get a new plugin working.

in the module.ts add:

import { NativeScriptUIListViewModule } from "nativescript-telerik-ui/listview/angular";

and in the same file:

in the @NgModule imports add: NativeScriptUIListViewModule,

and it will be ready.

Galinagalindo

Answer 2

Here's how I got it to work.

1. Create a shared directives module, and only define the RadListView directive there.

app/shared/shared-directives.module.ts

import {NgModule} from "@angular/core";   
import {LISTVIEW_DIRECTIVES} from "nativescript-telerik-ui/listview/angular";

@NgModule({
  declarations: [
    LISTVIEW_DIRECTIVES
],
exports: [
    LISTVIEW_DIRECTIVES
]
})
export class SharedDirectivesModule {}

2. Import this shared directive module in any feature/sub modules you have that use RadListView.

Here's an example.

app/events/events.module.ts

import {SharedDirectivesModule} from "../shared/shared-directives.module";
...

@NgModule({
imports: [
    ...
    SharedDirectivesModule,
    ...
],
...
})
export class EventsModule {}

app/events/events.component.html

<GridLayout>
  <RadListView [items]="events">
    <template tkListItemTemplate let-event="item">
        <StackLayout orientation="vertical">
        <Image [src]="'https:' + event.image" stretch="aspectFit"></Image>
        <Label [nsRouterLink]="['/event', event.id]" [text]="event.title"></Label>
        </StackLayout>
    </template>
  </RadListView>
</GridLayout>

Joaquin

Answer 3

you need to set the height of the list, by default the height will be 0px;

<RadListView [items]="dataItems" height="300">

Ticktacktoe

u saved my other half of the day :) – Cutlip

Answer 4

I'm not sure it's required, but I have the RadListView in a project and also have ListViewLinearLayout as one of its childs:

<RadListView [items]="listViewItems">
  <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical"></ListViewLinearLayout>
  <template tkListItemTemplate let-item="item">
    <YourStuff></YourStuff>
  </template>
</RadListView>

And did you also add LISTVIEW_DIRECTIVES to the list of declarations in your app module?

Unrivalled

Yes LISTVIEW_DIRECTIVES has been added. I'm wondering if it's some sort of issue with the latest version of nativescript as it's only just come out, and seems a bit wierd that it throws an error when inside a GridLayout. I've tried the sidedrawer and that works, unfortunately your suggestion didn't change anything. – Commercialize

Pity. I only tried with NativeScript 2.4, not with 2.5 so it's a possibility. – Unrivalled

Answer 5

I experienced the same problem. I had the LISTVIEW_DIRECTIVES imported and declared in the app module. The component containing the ListView was declared in a sub-module. When I moved the decalaration of the LISTVIEW_DIRECTIVES to the sub module, the error went away.

Xavier