List Picker
The ListPicker
is a spinner type component for
listing options.
Usage
The example demonstrates how to set a ListPicker
in
XML page, how to bind its selectedIndex
property
and to handle its change.
<ListPicker items="{{ years }}" selectedIndex="0" loaded="onListPickerLoaded" />
const fromObject = require("tns-core-modules/data/observable").fromObject;
const years = [1980, 1990, 2000, 2010, 2020];
function onNavigatingTo(args) {
const page = args.object;
const vm = fromObject({
years: years
});
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
function onListPickerLoaded(fargs) {
const listPickerComponent = fargs.object;
listPickerComponent.on("selectedIndexChange", (args) => {
const picker = args.object;
console.log(`index: ${picker.selectedIndex}; item" ${years[picker.selectedIndex]}`);
});
}
exports.onListPickerLoaded = onListPickerLoaded;
import { EventData, fromObject } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { ListPicker } from "tns-core-modules/ui/list-picker/list-picker";
const years = [1980, 1990, 2000, 2010, 2020];
export function onNavigatingTo(args: EventData) {
const page = <Page>args.object;
const vm = fromObject({
years: years
});
page.bindingContext = vm;
}
export function onListPickerLoaded(fargs) {
const listPickerComponent = fargs.object;
listPickerComponent.on("selectedIndexChange", (args: EventData) => {
const picker = <ListPicker>args.object;
console.log(`index: ${picker.selectedIndex}; item" ${years[picker.selectedIndex]}`);
});
}
Styling
<ListPicker items="{{ items }}" class="picker"/>
const fromObject = require("tns-core-modules/data/observable").fromObject;
function onNavigatingTo(args) {
const items = ["Batman", "Joker", "Bane"];
const page = args.object;
const vm = fromObject({
items: items
});
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
import { EventData, fromObject } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
export function onNavigatingTo(args: EventData) {
const items = ["Batman", "Joker", "Bane"];
const page = <Page>args.object;
const vm = fromObject({
items: items
});
page.bindingContext = vm;
}
.picker {
background-color: blanchedalmond;
color: red;
border-color: brown;
border-radius: 20;
border-width: 2;
width: 200;
height: 100;
vertical-align: middle;
}
Tips And Tricks
Using key-value pairs
This functionality provides a simple way to specify the text
field, which will be displayed in the ListPicker and the value
field which will be returned as a result. In this scenario, when
we are setting JSON object to the ListPicker's source, we should
set up the textField
and
valueField
properties, which will specify the
displayed and result values. In the example below we are setting
textField
to name
and
valueField
to role
. This means that
all properties marked as name
will be displayed in
the component and as a result, we will receive their
corresponding role
. We are receiving the selected
value via selectedValue
property, which can also be
accessed via code-behind.
<ListPicker
loaded="onListPickerLoaded"
items="{{ items }}"
textField="name"
valueField="role"
selectedIndex="{{ index }}"
selectedValue="{{ selectedItem }}">
</ListPicker>
function onNavigatingTo(args) {
const page = args.object;
const vm = fromObject({
items: [
{ id: 1, name: "Ter Stegen", role: "Goalkeeper" },
{ id: 3, name: "Piqué", role: "Defender" },
{ id: 4, name: "I. Rakitic", role: "Midfielder" }
],
index: 2,
selectedItem: ""
});
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
function onListPickerLoaded(args) {
const listPicker = args.object;
listPicker.on("selectedIndexChange", (lpargs) => {
const picker = lpargs.object;
console.log(`ListPicker selected value: ${picker.selectedValue} ListPicker selected index: ${picker.selectedIndex}`);
});
}
exports.onListPickerLoaded = onListPickerLoaded;
import { EventData, fromObject } from "tns-core-modules/data/observable";
import { ListPicker } from "tns-core-modules/ui/list-picker";
import { Page } from "tns-core-modules/ui/page";
export function onNavigatingTo(args: EventData) {
const page = <Page>args.object;
const vm = fromObject({
items: [
{ id: 1, name: "Ter Stegen", role: "Goalkeeper" },
{ id: 3, name: "Piqué", role: "Defender" },
{ id: 4, name: "I. Rakitic", role: "Midfielder" }
],
index: 2,
selectedItem: ""
});
page.bindingContext = vm;
}
export function onListPickerLoaded(args: EventData) {
const listPicker = <ListPicker>args.object;
listPicker.on("selectedIndexChange", (lpargs) => {
const picker = <ListPicker>lpargs.object;
console.log(`ListPicker selected value: ${(<any>picker).selectedValue}`);
console.log(`ListPicker selected index: ${picker.selectedIndex}`);
});
}
Creating ListPicker via Code-Behind
Creating a ListPicker
programmatically while
setting items source and default selected index.
const ListPicker = require("tns-core-modules/ui/list-picker").ListPicker;
function onNavigatingTo(args) {
const page = args.object;
const container = page.getViewById("container");
const listPicker = new ListPicker();
listPicker.items = [
"NativeScript Core - JavaScript",
"NativeScript Core - TypeScript",
"NativeScript Angular",
"NativeScript Vue",
"NativeScript Code Sharing",
"NativeScript Sidekick"
];
listPicker.selectedIndex = 0;
container.addChild(listPicker);
}
exports.onNavigatingTo = onNavigatingTo;
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
import { ListPicker } from "tns-core-modules/ui/list-picker";
export function onNavigatingTo(args: EventData) {
const page = <Page>args.object;
const container = <StackLayout>page.getViewById("container");
const listPicker = new ListPicker();
listPicker.items = [
"NativeScript Core - JavaScript",
"NativeScript Core - TypeScript",
"NativeScript Angular",
"NativeScript Vue",
"NativeScript Code Sharing",
"NativeScript Sidekick"
];
listPicker.selectedIndex = 1;
container.addChild(listPicker);
}
Properties
Name | Type | Description |
---|---|---|
items |
Array<any> |
Gets or set the items collection of the ListPicker. The items property can be set to an array or an object defining length and getItem(index) method. |
selectedIndex |
number |
Gets or set the items collection of the ListPicker. The items property can be set to an array or an object defining length and getItem(index) method. |
Events
Name | Description |
---|---|
selectedIndexChange |
Emitted when the selectedIndex is changed.
|
API References
Name | Type |
---|---|
tns-core-modules/ui/list-picker | Module |
ListPicker | Class |
Native Component
Android | iOS |
---|---|
android.widget.NumberPicker | UIPickerView |