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
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.
Here's how I got it to work.
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 {}
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>
you need to set the height of the list, by default the height will be 0px;
<RadListView [items]="dataItems" height="300">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With