androidangularlayoutnativescriptradlistview

Changing orientation to 'horizontal' is not changing the scroll direction of RadListView?


I've taken the car detail example for angular NativeScript, and I'm trying to make the car list scroll horizontally instead of vertically. I've removed most of the given html and am just aiming to make a horizontal scroll list with the remaining html.

I think the issue might be the RadListView, but I'm not sure how to deal with it. So far I've tried orientation="horizontal" everywhere and also changing some of the Layout types. I've also tried orientation="vertical" on the RadListView since a NativeScipt source said that would work... I'm very new to Nativescript, so I'm hoping that this is an easy fix since I haven't found anything that would help.

Here's the html part of my project. The whole thing is encapsulated in a StackLayout with horizontal orientation. let me know if you would like to see something else:

<RadListView orientation="horizontal" [items]="cars" (itemTap)="onCarItemTap($event)" >

    <ng-template tkListItemTemplate let-car="item" >

            <StackLayout orientation="horizontal">

                    <GridLayout rows="*, *, *" columns="*, *"  backgroundColor="purple">
                        <Label [text]="car.name" class="text-primary font-weight-bold"></Label>

                        <Image row="2" [src]="car.imageUrl" stretch="aspectFill" height="120" class="m-r-20"></Image>
                    </GridLayout>

            </StackLayout>

    </ng-template>

</RadListView>

<ActivityIndicator [busy]="Loading"></ActivityIndicator>

Currently, even with all the horizontals everywhere, I get a vertical list where each item is a car name and a car picture. But I want each next item to populate towards the right instead of below.


Solution

  • You should use ListViewLinearLayout and set it's scrollDirection to Horizontal.

    <RadListView orientation="horizontal" [items]="cars" (itemTap)="onCarItemTap($event)" >
    
        <ListViewLinearLayout tkListViewLayout scrollDirection="Horizontal"></ListViewLinearLayout>
    
        <ng-template tkListItemTemplate let-car="item" >
    
                <StackLayout orientation="horizontal">
    
                        <GridLayout rows="*, *, *" columns="*, *"  backgroundColor="purple">
                            <Label [text]="car.name" class="text-primary font-weight-bold"></Label>
    
                            <Image row="2" [src]="car.imageUrl" stretch="aspectFill" height="120" class="m-r-20"></Image>
                        </GridLayout>
    
                </StackLayout>
    
        </ng-template>
    
    </RadListView>
    
    <ActivityIndicator [busy]="Loading"></ActivityIndicator>