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

dottodot
  • 1,479
  • 1
  • 16
  • 24
  • Didn't make any difference – dottodot Feb 05 '17 at 14:06
  • Interesting this example (https://github.com/telerik/nativescript-ui-samples-angular/blob/release/sdkAngular/app/listview/getting-started/listview-getting-started.component.html) from the official nativescript-ui repository is working fine and has the same UI structure. Can you try it out. – Vladimir Amiorkov Feb 06 '17 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 Feb 07 '17 at 14:35
  • Tested this with the latest 2.5.0 version of NativeScript in the mentioned (https://github.com/telerik/nativescript-ui-samples-angular) repo and no error was thrown. – Vladimir Amiorkov Feb 08 '17 at 11:37
  • 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. – Vladimir Amiorkov Feb 08 '17 at 11:49
  • This works ` ` – dottodot Feb 09 '17 at 18:36
  • This doesn't ` ` – dottodot Feb 09 '17 at 18:37
  • 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')` – dottodot Feb 09 '17 at 18:37

5 Answers5

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>
Ivan Chang
  • 11
  • 2
1

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

<RadListView [items]="dataItems" height="300">
Mahdi
  • 835
  • 8
  • 6
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?

Eddy Verbruggen
  • 3,550
  • 1
  • 15
  • 27
  • 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 Feb 06 '17 at 09:39
  • Pity. I only tried with NativeScript 2.4, not with 2.5 so it's a possibility. – Eddy Verbruggen Feb 06 '17 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.

Colin
  • 1
  • 3