How to add a fixed content before the Listview in Nativescript

2 posts, 1 answers
  1. Austin
    Austin avatar
    17 posts
    Member since:
    Oct 2008

    Posted 29 Aug Link to this post

    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!

  2. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    70 posts

    Posted 30 Aug Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top