[Solved] How to add a fixed content before the Listview in Nativescript

[Austin]

Hello there, I am showing a Listview in a page in Nativescript, but I would like to show a fixed (non-scrollable) area just before the Listview, so while scrolling that area could be always visible. I have tried using this code but its not working:

<StackLayout>
    <Label text="Listview Header!!!" />
</StackLayout>
<lv:RadListView items="{{ dataItems }}" row="1" selectionBehavior="Press" itemSelected="onItemSelected">
    <lv:RadListView.listViewLayout>
        <lv:ListViewLinearLayout scrollDirection="Vertical"/>
    </lv:RadListView.listViewLayout>
    <lv:RadListView.itemTemplate>
        <StackLayout orientation="vertical">
            <Label fontSize="20" text="{{ itemName }}"/>
            <Label fontSize="14" text="{{ itemDescription }}"/>
        </StackLayout>
    </lv:RadListView.itemTemplate>
</lv:RadListView>

Any idea please?

Thanks!

[Nikolay Tsonev]

Hi,

Thank you for contacting us.

There are two appropriate ways to add fixed view above the RadListView. The first one is to use RadListView headerItemTemplate , which provides this functionalty. You could find further description for this component and example in the documentation.
Another way to  add such a view is to use GridLayout and to set the StackLayout to be on the first row and the ListView to be on the second one.


Example for the second suggestion:


main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui-pro/listview" xmlns="http://www.nativescript.org/tns.xsd">
 <GridLayout rows="150 *" columns="*">
    <StackLayout row="0" col="0">
        <Label text="First View" textWrap="true" />
    </StackLayout>
     <lv:RadListView items="{{ dataItems }}" row="1" col="0">

        <lv:RadListView.listViewLayout>
            <lv:ListViewLinearLayout scrollDirection="Vertical"/>
        </lv:RadListView.listViewLayout>
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="vertical">
                <Label fontSize="20" text="{{ itemName }}"/>

                <Label fontSize="14" text="{{ itemDescription }}"/>

            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
 </GridLayout>
</Page>

main-page.ts

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { HelloWorldModel } from "./main-view-model";
import {ObservableArray} from "data/observable-array"

// Event handler for Page "navigatingTo" event attached in main-page.xml

var array:ObservableArray<any>;
export function onPageLoaded(args: EventData) {
    // Get the event sender
    var page = <Page>args.object;

    array = new ObservableArray<any>();
    for(var i=0;i<10; i++)
    {
        array.push({itemName:"Name "+i, itemDescription:"Des "+i});
    }

    page.bindingContext = {dataItems:array};
}

I hope this helps

Regards,
nikolay.tsonev
Telerik by Progress