listview doesn't work

[Scleo]

Hello, I'm newer for nativescript and i 'm integrated listview with angular do a sample ,but it's doesn't work ,can help me check this issue? following the error 

com.tns.NativeScriptException:
Calling js method onCreateViewHolder failed

Error: Expecting a valid View instance.
File: "/data/data/com.guanplus.app/files/app/tns_modules/ui/core/view-common.js, line: 943, column: 12

StackTrace:
    Frame: function:'View._addView', file:'/data/data/com.guanplus.app/files/app/tns_modules/ui/core/view-common.js', line: 943, column: 19
    Frame: function:'LayoutBase.addChild', file:'/data/data/com.guanplus.app/files/app/tns_modules/ui/layouts/layout-base-common.js', line: 50, column: 14
    Frame: function:'ListViewAdapter.onCreateViewHolder', file:'/data/data/com.guanplus.app/files/app/tns_modules/nativescript-telerik-ui/listview/listview.js', line: 70, column: 20


    at com.tns.Runtime.callJSMethodNative(Native Method)
    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:892)
    at com.tns.Runtime.callJSMethodImpl(Runtime.java:757)
    at com.tns.Runtime.callJSMethod(Runtime.java:743)
    at com.tns.Runtime.callJSMethod(Runtime.java:724)
    at com.tns.Runtime.callJSMethod(Runtime.java:714)
    at com.tns.gen.com.telerik.widget.list.ListViewAdapter_frnal_ts_helpers_l55_c38__ListViewAdapter.onCreateViewHolder(com.telerik.widget.list.ListViewAdapter.java)
    at com.telerik.widget.list.ListViewWrapperAdapter.onCreateViewHolder(ListViewWrapperAdapter.java:411)
    at com.telerik.widget.list.ListViewWrapperAdapter.onCreateViewHolder(ListViewWrapperAdapter.java:20)
    at android.support.v7.widget.RecyclerView$Adapter.createViewHolder(RecyclerView.java:5833)
    at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5057)
    at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:4967)
    at android.support.v7.widget.LinearLayoutManager$LayoutState.next(LinearLayoutManager.java:2029)
    at android.support.v7.widget.LinearLayoutManager.layoutChunk(LinearLayoutManager.java:1414)
    at android.support.v7.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1377)
    at android.support.v7.widget.LinearLayoutManager.onLayoutChildren(LinearLayoutManager.java:578)
    at android.support.v7.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3315)
    at android.support.v7.widget.RecyclerView.dispatchLayout(RecyclerView.java:3124)
    at android.support.v7.widget.RecyclerView.onLayout(RecyclerView.java:3568)
    at com.telerik.widget.list.RadListView.onLayout(RadListView.java:544)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at android.widget.FrameLayout.layoutChildren(FrameLayout.java:344)
    at android.widget.FrameLayout.onLayout(FrameLayout.java:281)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at org.nativescript.widgets.CommonLayoutParams.layoutChild(CommonLayoutParams.java:189)
    at org.nativescript.widgets.GridLayout.onLayout(GridLayout.java:353)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at org.nativescript.widgets.CommonLayoutParams.layoutChild(CommonLayoutParams.java:189)
    at org.nativescript.widgets.StackLayout.layoutVertical(StackLayout.java:169)
    at org.nativescript.widgets.StackLayout.onLayout(StackLayout.java:123)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at android.widget.FrameLayout.layoutChildren(FrameLayout.java:344)
    at android.widget.FrameLayout.onLayout(FrameLayout.java:281)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at android.widget.FrameLayout.layoutChildren(FrameLayout.java:344)
    at android.widget.FrameLayout.onLayout(FrameLayout.java:281)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at org.nativescript.widgets.CommonLayoutParams.layoutChild(CommonLayoutParams.java:189)
    at org.nativescript.widgets.GridLayout.onLayout(GridLayout.java:353)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at org.nativescript.widgets.CommonLayoutParams.layoutChild(CommonLayoutParams.java:189)
    at org.nativescript.widgets.ContentLayout.onLayout(ContentLayout.java:73)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at android.widget.FrameLayout.layoutChildren(FrameLayout.java:344)
    at android.widget.FrameLayout.onLayout(FrameLayout.java:281)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1742)
    at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1585)
    at android.widget.LinearLayout.onLayout(LinearLayout.java:1494)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at android.widget.FrameLayout.layoutChildren(FrameLayout.java:344)
    at android.widget.FrameLayout.onLayout(FrameLayout.java:281)
    at com.android.internal.policy.PhoneWindow$DecorView.onLayout(PhoneWindow.java:3193)
    at android.view.View.layout(View.java:17938)
    at android.view.ViewGroup.layout(ViewGroup.java:5812)
    at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2666)
    at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2367)
    at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1437)
    at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7397)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:920)
    at android.view.Choreographer.doCallbacks(Choreographer.java:695)
    at android.view.Choreographer.doFrame(Choreographer.java:631)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:906)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:158)
    at android.app.ActivityThread.main(ActivityThread.java:7237)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
    at com.android.internal.os.ZygoteInit.m

 

my main.ts  import the plugin

import {SIDEDRAWER_PROVIDERS} from 'nativescript-telerik-ui/sidedrawer/angular';
import { LISTVIEW_PROVIDERS } from 'nativescript-telerik-ui/listview/angular';

 

my dashboard.html use 

<GridLayout class="entry" >
     <RadListView [items]="dataItems">
         <template tkListItemTemplate let-item="item">
             <StackLayout orientation="vertical">
                 <Label class="nameLabel" [text]="item.name"></Label>
                 <Label class="nameLabel" [text]="item.name"></Label>
             </StackLayout>
         </template>
         <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" itemHeight="100" spanCount="3">            </ListViewGridLayout>
     </RadListView>
 </GridLayout>

 

my dashboard.ts 

import { Component, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

import {NS_ROUTER_DIRECTIVES_EXT} from '../../service/router/ns-router-ext';
import {BaseDrawerPageComponent} from '../base-drawer-page';
import {DrawerComponent} from '../drawer/drawer';
import {TNSFontIconPipe} from 'nativescript-ng2-fonticon';

@Component({
    selector: 'dashboard',
    templateUrl: 'component/dashboard/dashboard.html',
    styleUrls: ['component/dashboard/dashboard.scss', 'fonts/ionicon.scss'],
    directives: [NS_ROUTER_DIRECTIVES_EXT, DrawerComponent],
    pipes: [TNSFontIconPipe]
})
export class DashBoardPage extends BaseDrawerPageComponent {

    public dataItems: Array<Object>;
    graphUp: string;
    graphDown: string;

    constructor(protected changeDetectionRef: ChangeDetectorRef, protected router: Router, protected location: Location) {
        super(changeDetectionRef, router, location);
        console.log('DashBoardPage Constructor');
        this.graphDown = String.fromCharCode(0xf260);
        this.graphUp = String.fromCharCode(0xf262);
    }

    ngOnInit() {
        this.dataItems = [];
        for (let i = 0; i < 8; i++) {
            this.dataItems.push({name: 'Test RadListView' + i});
        }
        console.log('DashBoardPage ngOnInit' + JSON.stringify(this.dataItems));
    }

    public onItemTap(args) {
        console.log('--------- ItemIndex' + args.index);
    }
}

 

somebody can help me  check it ? 

Thank you so much~

[Nikolay Tsonev]

Hi,


Thank you for your interest in NativeScript.



I reviewed your problem, I was unable to reproduce such an while using `nativescript--`. For your I am attaching sample code, where has been used RadListView. In that you could verify, whether you have add `LISTVIEW_DIRECTIVES` in `declarations` in your main.ts file.
Other important steps are to delete node_modules folder from your project and to remove and to add the platform using following commands:  platform remove <platform_name> platform add <platform_name>. then try to build your project again with  run <platform_name>.
It would help if you could give us more info  about the problem and about NativeScript version, you are using. For further you could also review this sample app.


Example:


main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { LISTVIEW_DIRECTIVES } from 'nativescript-telerik-ui/listview/angular';

@NgModule({
    declarations: [AppComponent, LISTVIEW_DIRECTIVES],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
})
class AppComponentModule {}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

app.component.html

<GridLayout>
    <RadListView [items]="myItems">
        <template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">
            <StackLayout [class.odd]="odd" [class.even]="even" orientation="vertical">
                <Label [text]='"index: " + i'></Label>
                <Label [text]='"[" + item.id +"] " + item.name'></Label>
            </StackLayout>
        </template>
        <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" itemHeight="100" spanCount="3">            </ListViewGridLayout>
    </RadListView>
</GridLayout>

app.component.ts

import {Component, Input, ChangeDetectionStrategy} from "@angular/core";

class DataItem {
    constructor(public id: number, public name: string) { }
}


@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
    public myItems: Array<DataItem>;
    private counter: number;

    constructor() {
        this.myItems = [];
        this.counter = 0;
        for (var i = 0; i < 50; i++) {
            this.myItems.push(new DataItem(i, "data item " + i));
            this.counter = i;
        }
    }

}

app.css

.odd {
    background-color: red;
}

.even {
    background-color: blue;
}

I hope the given information helps.


Regards,
nikolay.tsonev
Telerik by Progress

[Scleo]

thank you for replay~ i change my main.ts code as 

@NgModule({
    declarations: [AppComponent, LISTVIEW_DIRECTIVES],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
})

i made it ~

radlistview it works~ thank you ~

[Pedro]

Check this https://antonioleiva.com/recyclerview/ i think will help

[Pedro]

Sorry, here is the link https://antonioleiva.com/recyclerview/

[Nikolay Tsonev]

Hi Pedro,

Thank you for attaching this link and indeed it would help for those, which would like to create a ListView while using a native code.

However, in cases when you are using NativeScirpt with UI for NativeScirpt plugin I could suggest using the guidelines and examples from the plugin's documentation. 
Regards,
nikolay.tsonev
Progress Telerik