Radlistview not working (crashes)


#1

am trying to use telerik ui radlistview but when i put the template the app crashes and it does not show what went wrong need help on this


#2

Hey @olau, it would help if you showed what you have done in code, with any other information you consider relevant to your case.


#3
import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataItem } from "../dataItem";
import * as Application from "application";
import * as Timer  from "timer";
import { DataItemService } from "../dataItem.service";

@Component({
  selector: "main",  
  providers: [DataItemService, ],
  moduleId: module.id,
  templateUrl: "./main.html",
  styleUrls: ["./main-common.css"],

})
export class MainComponent implements OnInit  {
private _dataItems: ObservableArray<DataItem>;

    constructor(private _changeDetectionRef: ChangeDetectorRef, private _dataItemService: DataItemService) {
    }

    ngOnInit() {
        this._dataItems = new ObservableArray<DataItem>(this._dataItemService.getListItemsFromJson());
        this._changeDetectionRef.detectChanges();
    }

    public get dataItems(): ObservableArray<DataItem> {
        return this._dataItems;
    }
}

#4

Here is my XML

<GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="dataItems">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical" class="item-template-style">
                 <Image [src]="item.image" stretch="aspectFill"></Image>
                <FrescoDrawee *tkIfAndroid height="250" [imageUri]="item.image"></FrescoDrawee>
                <Label [text]="item.name"></Label>
                <Label [text]="item.description" textWrap="true"></Label>
            </StackLayout>
        </ng-template>
        <!-- >> angular-listview-item-layouts-staggered -->
        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="3"></ListViewStaggeredLayout>
        <!-- << angular-listview-item-layouts-staggered -->
    </RadListView>
</GridLayout>

#5

i tried to fix so now it stops crashing but it does not show the template


#6

hi Peter am still stuck did not get the help yet


#7

Hi olau and Pete.K I have the same problem, the list is just displaying as a regular list and not a grid? Have you found what was wrong?


#8

Found the problem… Needed to import LISTVIEW_DIRECTIVES


#9

I have not looked into the issue, and will probably not have the time to do it for a while. I am merely trying to get you to share more information so other users could help if they wanted to.


#10

Ok… I found the problem (posted a link to a tutorial by polyglotdeveloper about sidedrawer wich contained the answer… got catched by akismet here for evaluation… maybe turns up soon).

Anyhow the short answer:

In app.module.ts:

import { LISTVIEW_DIRECTIVES } from “nativescript-telerik-ui/listview/angular”;

and add LISTVIEW_DIRECTIVES to declarations

Thanks anyway!