ListPicker not loading


#1

Here is my xml

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded">
	<ActionBar title="Settings" class="action-bar"></ActionBar>
	<ScrollView>
		<StackLayout class="home-panel" verticalAlignment="top">
			<GridLayout columns="*, 60" rows="80, 40,40,100,40,80" width="100%" borderWidth="0px">
				<Label text="Show future games only" row="0" col="0" colSpan="1" />
				<Switch checked="true" row="0" col="3" />
				<Label text="Choose your Division" row="1" col="0" colSpan="1" />
				<ListPicker id="divPicker" items="{{ divList }}" borderWidth="0px" row="2" col="0" colSpan="2" />
				<Label text="Choose your Team" row="3" col="0" colSpan="1" />
				<ListPicker id="teamPicker" items="{{ teamList }}" width="80%" row="4" col="0" colSpan="2" />
				<Button text="Continue" tap="{{ onButtonTap }}" row="5" col="0" colSpan="2" width="80%" borderWidth="1px" marginTop="100px" /> 
			</GridLayout>

		</StackLayout>
	</ScrollView>
</Page>

And here is my JS

var frameModule = require("ui/frame");
var dialogsModule = require("ui/dialogs");
var observableModule = require("data/observable")

var pageData = new observableModule.Observable({
  divList: ["Monday Div 1", "Monday Div 2", "Wednesday Div 1", "Wednesday Div 2"]
});
function loaded(args) {
  page = args.object;
  page.bindingContext = pageData;
  var divPicker = page.getViewById("divPicker");
  divPicker.addEventListener(observableModule.Observable.propertyChangeEvent, function (e) {
    var div;
    switch (e.value) {
      case 0:
        div = "mon_1";
        break;
      case 1:
        div = "mon_2";
        break;
      case 2:
        div = "wed_1";
        break;
      case 3:
        div = "wed_2";
        break;
    }
    alert("My Div is " + div);
  });
}
exports.loaded = loaded;

I cannot get divList to bind to the ListPicker, tried various options.

Thanks in advance.


#2

fromObject is the valid syntax for initiating an Observable from object source.


#3

Sorry could you expand on this, very new to NativeScript. Could I in fact simplify what I need rather than use Observable.


#4

Did you go through the link?

If you want to understand how Observable helps, checkout the data binding documentation - https://docs.nativescript.org/core-concepts/data-binding


#5

OK fixed the issue this way:-

const fromObject = require("data/observable").fromObject;

function onNavigatingTo(args) {
  const divList = ["[Select]","Monday Div 1", "Monday Div 2", "Wednesday Div 1", "Wednesday Div 2"];
  const source = fromObject({
    items: divList
  });
  source.set("divList", divList);
  const page = args.object;
  page.bindingContext = source;
}

However, I only see one option at a time whereas on iOS and Android your normally see a faded list of options to scroll to. Also there is no Done option that a picker has on either iOS or Android. Am I using the wrong control.


#6

You might need dropdown plugin

Still how it looks or operates depends on platform, Android by default has a Dropdown widget but iOS has nothing equivalent so we end up using a Picker, show when required.


#7

Thank you, ideal. I have an issue with multiple drop-downs on the same page but will open a new question.