nativescript data has to be displayed grid view with 4*4

Question

For displaying the grid view (4*4) in nativescript with Angular, I have integrated the npm "nativescript-grid-view" as per the example in npm site. But, It fails for me. I got the error whenever I enter that page in the application.

Error :

System.err: Error: Expecting a valid View instance.

System.err: File: "file:///data/data/com.domain.project/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js, line: 337, column: 12

Code .ts file

<GridLayout class="page">
            <GridView [items]="order" colWidth="30%" rowHeight="100">
              <ng-template let-item="item" let-odd="odd">
                <StackLayout margin="10" [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
                  <Label verticalAlignment="center" [text]="item.productName" class="list-group-item-text" textWrap="true"></Label>
                </StackLayout>
              </ng-template>
            </GridView>
          </GridLayout>

module.ts

    import { GridViewModule } from 'nativescript-grid-view/angular';
imports: [
        NativeScriptModule,
        NativeScriptHttpModule,
        NativeScriptUIDataFormModule,
        NativeScriptUIListViewModule,
        GridViewModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [Http]
            }
        }),
        ...SHARED_MODULES
    ],....

Package.json

 "tns-android": {
      "version": "3.0.1"
    },
    "tns-ios": {
      "version": "3.4.1"
    }
.....
 "typescript": "~2.2.0",....

Somebody has asked the question is below forum, but no one has replied.

https://discourse.nativescript.org/t/dynamic-gridlayout-from-array-angular/1675

youre using a grid view but arent using the one in nativescript? why? — mast3rd3mon
I want to dispaly the gridview N * N basis. I have found this npm to display. — Muthukumar Marichamy
but the gridview is a built in part of nativescript, it does not require any plugins — mast3rd3mon

Nick Iliev Nick Iliev · Accepted Answer · 2018-04-17T05:59:29

Or you could use nativescript-ui-listview and its ListViewGridLayout with spanCount property. The official documentation for this functionality is here. Basically, you could do the following:

<RadListView [items]="dataItems">
    <ng-template tkListItemTemplate let-item="item">
        <!-- item template here -->
    </ng-template>

    <ListViewGridLayout tkListViewLayout spanCount="4" scrollDirection="Vertical" ios:itemHeight="200" ></ListViewGridLayout>
</RadListView>

nativescript data has to be displayed grid view with 4*4

3 Answers