5

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

9
  • try <GridLayout rows='*'>
    – Habeeb
    Commented Feb 5, 2017 at 14:04
  • Didn't make any difference
    – dottodot
    Commented Feb 5, 2017 at 14:06
  • 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. Commented Feb 6, 2017 at 18:16
  • 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')
    – dottodot
    Commented Feb 7, 2017 at 14:35
  • 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. Commented Feb 8, 2017 at 11:37

5 Answers 5

5

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.

1

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 {}
  1. 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>
1

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

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

1
  • u saved my other half of the day :)
    – Yaro
    Commented Oct 5, 2019 at 16:08
0

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?

2
  • 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.
    – dottodot
    Commented Feb 6, 2017 at 9:39
  • Pity. I only tried with NativeScript 2.4, not with 2.5 so it's a possibility. Commented Feb 6, 2017 at 18:11
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.