CODEWITHSUNDEEP
androidtypescriptnativescript
xerotolerant
xerotolerant

Reputation: 2079

Nativescript ListView showing only one item

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.

Upvotes: 8

Views: 2502

Answers (3)

Amjad Abujamous
Amjad Abujamous

Reputation: 920

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>

Upvotes: 0

Hunter Kingsley
Hunter Kingsley

Reputation: 61

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>

Upvotes: 3

Nick Iliev
Nick Iliev

Reputation: 9670

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>

Upvotes: 13

Related Questions