listview doesn't work

3 posts, 0 answers
  1. Scleo
    Scleo avatar
    5 posts
    Member since:
    Sep 2016

    Posted 26 Sep Link to this post

    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~

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    67 posts

    Posted 26 Sep Link to this post

    Hi,


    Thank you for your interest in NativeScript.



    I reviewed your problem, however I was unable to reproduce such an issue, while using `nativescript-telerik-ui`. For your convenience I am attaching sample code, where has been used RadListView. In regarding to 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: tns platform remove <platform_name> tns platform add <platform_name>. then try to build your project again with tns 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 help 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Scleo
    Scleo avatar
    5 posts
    Member since:
    Sep 2016

    Posted 28 Sep in reply to nikolay.tsonev Link to this post

    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 ~

Back to Top