CODEWITHSUNDEEP
nativescript
RCS
RCS

Reputation: 63

Nativescript Listpicker Index change does not work

I've created a ListPicker in Nativescript which I am populating through an obs array from my ts file.

Lickpicker displaying the obs array

I am setting the selectedIndex and that is getting picked up fine.. however, when I try to change the selection say from One to Two, its not picking up the change. Its not even invoking the property change event. My XML below.

<StackLayout row="0">
    <StackLayout orientation="horizontal" style="vertical-align: center; margin: 5" row="0" cssClass="filterrow">
        <Button text="{{ $actAs + ' &#xf078;'}}" cssClass="filterbtn" tap="toggleActAsFilter"/>
    </StackLayout>

    <StackLayout cssClass="_card" style="vertical-align: center;" verticalAlignment="top" visibility="{{ showActAsFilter ? 'visible' : 'collapsed' }}">
        <ListPicker id="_listPicker" cssClass="filterlist" style="vertical-align: center;" items="{{ _actAsFilter }}" selectedIndex="selectedIndex" propertyChangeEvent="listIndexChanged"/>
    </StackLayout>

    <Label text="Selected Index:" row="1" col="0" fontSize="18" verticalAlignment="bottom"/>
    <TextField text="{{ selectedIndex }}" row="1" col="1" />
</StackLayout>

My propertyChangeEvent 

public listIndexChanged = (args:EventData) => {
    let page = <View>args.object;
    console.log("list Index changed");
    let listP = page.getViewById("_listPicker");
}

Is this the way to capture changes in ListPicker?

Upvotes: 1

Views: 1371

Answers (1)

Nikolay Tsonev
Nikolay Tsonev

Reputation: 1919

In your case you could use Observable propertyChange event to handle the index of selected item. You could review below attached sample code.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout>
    <ListPicker items="{{ items }}" selectedIndex="{{lpSelectedIndex}}"></ListPicker>
  </StackLayout>
</Page>

main-page.ts

import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { Observable, PropertyChangeData} from "tns-core-modules/data/observable";

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    // Get the event sender
    var page = <Page>args.object;
    var observable:Observable= new Observable();
    var obsarray = new ObservableArray();
    obsarray.push("Item1");
    obsarray.push("Item2");
    obsarray.push("Item3");
    observable.set("lpSelectedIndex", 0);
    observable.set("items", obsarray);

    observable.addEventListener(Observable.propertyChangeEvent, function (pcd: PropertyChangeData) {
        console.log(pcd.eventName.toString() + " " + pcd.propertyName.toString() + " " + pcd.value.toString());
    });

    page.bindingContext = observable;
}

Upvotes: 1

Related Questions