Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting Nativescript Telerik UI RadListView to work in Angular

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

like image 369
dottodot Avatar asked Feb 05 '17 12:02

dottodot


3 Answers

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.

like image 112
Efrain Zaldumbide Avatar answered Nov 11 '22 11:11

Efrain Zaldumbide


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>
like image 1
Ivan Chang Avatar answered Nov 11 '22 10:11

Ivan Chang


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

<RadListView [items]="dataItems" height="300">
like image 1
Mahdi Avatar answered Nov 11 '22 12:11

Mahdi