CODEWITHSUNDEEP
listviewnativescriptangular2-nativescriptnativescript-telerik-ui
dottodot
dottodot

Reputation: 1629

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

Upvotes: 5

Views: 3947

Answers (5)

Mahdi
Mahdi

Reputation: 835

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

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

Upvotes: 1

Efrain Zaldumbide
Efrain Zaldumbide

Reputation: 61

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.

Upvotes: 5

Ivan Chang
Ivan Chang

Reputation: 11

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>

Upvotes: 1

Colin
Colin

Reputation: 1

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.

Upvotes: 0

Eddy Verbruggen
Eddy Verbruggen

Reputation: 3550

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?

Upvotes: 0

Related Questions