Nativescript ListView showing only one item

Question

I ma following a course on pluralsight and I have encountered an odd problem. My list view is only showing the first element and nothing else. This is odd and i've used list views without problem before so I'm not sure where the error is coming from.

Layout:

    <Page xmlns="http://schemas.nativescript.org/tns.xsd"
 loaded="pageLoaded">
  <GridLayout rows="auto, *">
    <!-- Header -->
    <StackLayout cssClass="page-header">
      <Label text="Header" cssClass="page-title bold" horizontalAlignment="center" margin="15"/>
    </StackLayout>

    <!-- Sessions Views -->
    <GridLayout rows="auto, *" row="1"> 

      <ListView items="{{ sessions }}">
        <ListView.itemTemplate>
          <Label text="{{ title }}"/>
        </ListView.itemTemplate>
      </ListView>

    </GridLayout>
  </GridLayout>
</Page>

Typescript:

import { EventData, Observable } from "data/observable";
import { Page } from "ui/page";

var page: Page;
var tempSessions = [
    {
        id: '0',
        title: "Stuff"
    },
    {
        id: '1',
        title: "Stuffly"
    },
    {
        id: '2',
        title: "Stufferrs"
    },
    {
        id: '3',
        title: "Event 4"
    }
];
export function pageLoaded(args: EventData){
    console.log(JSON.stringify(tempSessions));
    page = <Page>args.object;
    page.bindingContext = new Observable({
        sessions: tempSessions
    });
}

I suspected that the first list item was completely filling the gridLayout however placing a border around it reveals that it is not.

Votive

Perhaps the problem has been caused due the fact that for the second GridLayout the first argument for its rows property is auto and will not display the ListView correctly. You should change it to *, for example <GridLayout rows="*, auto" row="1"> or to specify the ListView height. You should also specify the row for the ListView. – Fallal

Answer 1

What is really happening in your code is that you are creating a grid with two rows and then your list-view by default is put in the first row with setting "auto". This setting will give you space only as big as ONE item template space - in fact, all of your items are loaded and can be scrolled but there is a place to visualize only one of them.

Either change the auto to * or remove the nested grid-layout. Just to make sure that you are in control of which element is shown at the exact place I would recommend also to always declare your positions within the grid with row=" col=" even when there is a pretty simple architecture.

Example:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <GridLayout rows="auto, *">
    <!-- Header -->
    <StackLayout row="0" cssClass="page-header">
      <Label text="Header" cssClass="page-title bold" horizontalAlignment="center" margin="15"/>
    </StackLayout>

    <!-- Sessions Views -->
    <ListView row="1" items="{{ sessions }}">
      <ListView.itemTemplate>
        <Label text="{{ title }}"/>
      </ListView.itemTemplate>
    </ListView>

  </GridLayout>
</Page>

Abe

Thanks. Some time after submitting this questions I realized that they were all loading but I still couldn't figure out how to place them correctly. I think I understand now. – Votive

For anyone else seeing just one item despite proper layout, don't trust the documentation at docs.nativescript.org/angular/ui/ng-ui-widgets/… You still have to use <template> to loop through items – Ossicle

Answer 2

I had the same problem. I also noticed that the one line on Android in the ListView did scroll. I added height to the ListView and everything worked fine.

<GridLayout rows="*" class="SSGridLayout"> 
    <ListView items="{{ calcItems }}" itemTap="onItemTap" height="280"> 
        <ListView.itemTemplate>
            <GridLayout columns="auto, auto, auto, auto, auto, auto" rows="*" class="SSGridLayout"> 
                <Label text="{{ year }}" class="ScrollDataField" width="{{ widthB }}" col="1" textWrap="false" />
            </GridLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>

Secretory

Answer 3

Adding to Nick Iliev's answer about list height, I was able to make the height of the list dynamically scale to the size of its elements by multiplying the height of one element by the list's length, like so.

<ScrollView height="{{ notes, notes.length*90 }}">
  <ListView class="list-group" items="{{ notes }}" height="100%">
    <ListView.itemTemplate>
      <StackLayout class="m-b-2 m-x-2">
            <Label class="h3 far p-l-15 text-gray m-b-1" text="{{user.username}}" />
           <TextField class="h3 input-border-rounded input-border-disabled p-y-5" 
                      text="{{ note }}" editable="false" />
      </StackLayout>
    </ListView.itemTemplate>
  </ListView>
</ScrollView>

Imperforate