listview doesn't work

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

    Posted 26 Sep 2016 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
    237 posts

    Posted 26 Sep 2016 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 2016 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 ~

  4. Pedro
    Pedro avatar
    2 posts
    Member since:
    Jul 2017

    Posted 21 Jul in reply to Scleo Link to this post

    Check this https://antonioleiva.com/recyclerview/ i think will help
  5. Pedro
    Pedro avatar
    2 posts
    Member since:
    Jul 2017

    Posted 21 Jul Link to this post

  6. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    237 posts

    Posted 24 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top