CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
FourtyTwo
FourtyTwo

Reputation: 754

Usage of ListViewGridLayout example that works

I have looked all over the internet but I cannot find a Nativescript ListViewGridLayout example that works. All seem to be outdated and they use RadListView instead of ListView.

I tried telerik/nativescript-ui-samples-angular, A Deep Dive into NativeScript UI's ListView and even saw Is there a way to display an image grid with tick able Images in Nativescript Angular? but all don't work.

Here is one of the examples: TS code:

filesToUpload = ["/storage/emulated/0/DCIM/Camera/NSIMG_20190424_13156.jpg",
      "/storage/emulated/0/DCIM/Camera/NSIMG_20190424_131538.jpg",
      "/storage/emulated/0/DCIM/Camera/NSIMG_20190423_225735.jpg",
      "/storage/emulated/0/DCIM/Camera/NSIMG_20190423_22571.jpg"];

HTML:

    <GridLayout tkExampleTitle tkToggleNavButton columns="*">
        <RadListView [items]="filesToUpload">
            <ng-template tkListItemTemplate let-item="item">
                <StackLayout class="garmentGrid" class="m-x-4">
                    <Image [src]="item" height="200"></Image>
                    <Progress [value]="imageUploadProgressValue[filesToUpload]" (valueChanged)="onValueChanged($event)" maxValue="100" class="">
                    </Progress>
                </StackLayout>
            </ng-template>
            <ListViewGridLayout tkListViewLayout ios:itemHeight="200" spanCount="3"></ListViewGridLayout>
        </RadListView>
    </GridLayout>

Upvotes: 0

Views: 998

Answers (1)

FemiHiro
FemiHiro

Reputation: 76

I used it like that and it works.

<RadListView [items]="otherDeals">
      <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" itemHeight="10 0" itemWidth="100"  spanCount="3">
        </ListViewGridLayout>
      <ng-template tkListItemTemplate let-item="item" let-index="index">

        <StackLayout rows="auto" height="100%" width="100%">

          <StackLayout width="100" height="auto" (tap)="openDetails(item)">
            <StackLayout class="card-other m-5">
              some image goes here
              </StackLayout>
            <Label [text]="item.title" class="text-center h4"></Label>
            </StackLayout>

          </StackLayout>

        </ng-template>
</RadListView>

Upvotes: 2

Related Questions