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.

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>

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>