ListView/RadListView with label above and below


#1

Is it possible to have items on a view above and below a radlistview? (and not just tklistviewheaders)

This is the area where I have found xml to be the most different than html, and I have not found any examples that address this item. I am building with Angular.

For example, is it possible to have a page that displays the following:

THIS IS A HEADER
Here is a label that you can read
And here are your list items:
listitem 1
listitem 2
listitem 3
listitem 4

And this is a label at the bottom of the page

With the listitems here being a radlistiview. This would not be an abnormal structure for a page in an app, but I gather it is a little complex, per discussion like this: https://github.com/NativeScript/NativeScript/issues/3925 .

Whenever I try putting labels or buttons above and below my listview, they generally do not show up.

How can it be done?

Thanks.


#2

I have a working solution. It probably could be better, but this code is working for me:

ts:
public testArray = [ 'listitem 1', 'listitem2', 'listitem3', 'listitem4']

html:

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="This is a header"></Label>
</ActionBar>

<StackLayout>
    <StackLayout horizontalAlignment="center">
        <Label text="Here is a label that you can read"></Label>
    </StackLayout>
    <GridLayout>
        <RadListView [items]="testArray">
            <ng-template tkListItemTemplate let-listItem="item">
                <StackLayout>
                    <Label [text]="listItem"></Label>
                </StackLayout>
            </ng-template>
            <ng-template tkListViewHeader class="yourClass">
                <GridLayout backgroundColor="#ff5050">
                    <Label text="And here are your list items:"></Label>
                </GridLayout>
            </ng-template>
            <ng-template tkListViewFooter class="yourClass">
                <GridLayout backgroundColor="#ffff66">
                    <Label text="And here is a label at the bottom of the page--well, at least the list"></Label>
                </GridLayout>
            </ng-template>
        </RadListView>
    </GridLayout>
</StackLayout>

Result:

           This is a header
     Here is a label that you can read
And here are your list items:
listitem 1
listitem 2
listitem 3
listitem 4

And this is a label at the bottom of the page--well, at least the list

The list should be scrollable as well.

I added a few options like a style and background color for example purposes.

I would appreciate if others have suggestions for better ways to do this. For example, I could put something at the bottom of the list using the tkListViewFooter, but I was not able to successfully put a label below the list on the page. If I did so–for example, by adding a label, wrapped in a stacklayout at the bottom of the RadListView–the label text would show up, but it would be in a fixed position and the list would not scroll.

But the above code does work for the basic requirements of having something show up before a RadListView, and then having at least a footer at the bottom.


#3

Update: I now have a better understanding of Nativescript UI, and thought I would share.

The key item I did not utilize before was setting the rows that I want to use. Nativescript allows you to state the number of rows you will be using and their size, and then all you have to do is put your UI items in those rows (could probably do the same for columns too).

So, here is what I was trying to accomplish earlier, this time setting the rows:

ts:
public testArray = [ 'listitem 1', 'listitem2', 'listitem3', 'listitem4']

html:

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="This is a header"></Label>
</ActionBar>

<GridLayout rows="30, *, 80"> <!--row = "30" refers to the first row (row "0") and its height. row = "*" refers to the scond row, and the "*" means to take up the space not used by the other rows. row="80" refers to the third row, at the bottom, and its height -->
    <StackLayout row="0" horizontalAlignment="center"><!--this is the row at the top-->
        <Label text="Here is a label that you can read"></Label>
    </StackLayout>
    <GridLayout row="1"><!--middle row (the "*" row)-->
        <RadListView [items]="testArray">
            <ng-template tkListItemTemplate let-listItem="item">
                <StackLayout>
                    <Label [text]="listItem"></Label>
                </StackLayout>
            </ng-template>
            <ng-template tkListViewHeader class="yourClass">
                <GridLayout backgroundColor="#ff5050">
                    <Label text="And here are your list items:"></Label>
                </GridLayout>
            </ng-template>
        </RadListView>
    </GridLayout>
     <StackLayout row="2" orientation="vertical" horizontalAlignment="center" >
        <Label  textWrap="true"  text="And here is a label at the bottom of the page--in the footer"></Label>
    </StackLayout>
</GridLayout>

Result:

            This is a header

     Here is a label that you can read
And here are your list items:
listitem 1
listitem 2
listitem 3
listitem 4

And this is a label at the bottom of the page--in the footer

Performance: Nativescript Angular v Nativescript Vanilla
Where do I start from? I'm new to NativeScript