Titanium Mobile

# Titanium.UI.PickerColumn

A picker column, representing a selectable group of items in a Titanium.UI.Picker.

Availability
0.9
0.9
9.2.0
Extends
Titanium.UI.View

# Overview

Use the Titanium.UI.createPickerColumn method to create a picker column control. In an Alloy application, you can use a <PickerColumn> element inside a <Picker> element. You can also use <Column> as a shorthand for <PickerColumn> (see Examples).

On Android, the useSpinner property must be enabled to support multiple columns.

See Titanium.UI.Picker for further examples of usage.

# Examples

# Multi-Column Picker

Create a two-column, platform-specific style, picker and automatically select a row in each column.

var win = Ti.UI.createWindow({
  backgroundColor: 'white',
  exitOnClose: true,
  fullscreen: false,
  title: 'Use picker to make selection'
});

var fruit = [ 'Bananas', 'Grapes', 'Blueberries', 'Strawberries' ];
var color = [ 'blue', 'red', 'yellow', 'white' ];

var column1 = Ti.UI.createPickerColumn();

for(var i=0, ilen=fruit.length; i<ilen; i++){
  var row = Ti.UI.createPickerRow({
    title: fruit[i]
  });
  column1.addRow(row);
}

var column2 = Ti.UI.createPickerColumn();

for(var i=0, ilen=color.length; i<ilen; i++){
  var row = Ti.UI.createPickerRow({
    title: color[i]
  });
  column2.addRow(row);
}

var picker = Ti.UI.createPicker({
  columns: [column1, column2],
  selectionIndicator: true,
  useSpinner: true, // required in order to use multi-column pickers with Android
  top:50
});

function pickerDefaults(obj){
  // on iOS, must be after picker has been rendered
  picker.setSelectedRow(0, 2, false);
  picker.setSelectedRow(1, 3, false);
}

win.add(picker);

var isAndroid = Ti.Platform.osname === 'android';

if(isAndroid){
  pickerDefaults(picker);
}

win.open();

if(!isAndroid){
  setTimeout(function(){
    pickerDefaults(picker);
  }, 1500);
}

# Alloy XML Markup

Previous example as an Alloy view.

multicolumnpicker.xml

<Alloy>
    <Window id="win" backgroundColor="white" exitOnClose="true" fullscreen="false"
        title="Use picker to make selection">

        <Picker id="picker" top="50" selectionIndicator="true" useSpinner="true">
            <PickerColumn id="column1">
                <PickerRow title="Bananas"/>
                <PickerRow title="Grapes"/>
                <PickerRow title="Blueberries"/>
                <PickerRow title="Strawberries"/>
            </PickerColumn>
            <!-- Picker shorthand notation -->
            <Column id="column2">
                <Row title="blue"/>
                <Row title="red"/>
                <Row title="yellow"/>
                <Row title="white"/>
            </Column>
        </Picker>
    </Window>
</Alloy>

multicolumnpicker.js:

$.picker.setSelectedRow(0, 2, false);
$.picker.setSelectedRow(1, 3, false);

# Properties

# font

Availability
0.9
font :Font

Font to use for text.

# rowCount READONLY

Availability
0.9
0.9
9.2.0
rowCount :Number

Number of rows in this column.

# rows READONLY

Availability
0.9
0.9
9.2.0
rows :Array<Titanium.UI.PickerRow>

Rows of this column.

While this property is currently writable on Android, changing its value is strongly discouraged.

# Methods

# addRow

Availability
0.9
0.9
9.2.0
addRow(row) → void

Adds a row to this column.

In an Alloy application you can use one or more <PickerRow> (or <Row>) elements inside a <PickerColumn> (or <Column>) element.

<Alloy>
    <PickerColumn id="hour">
        <PickerRow title="10"/>
        <PickerRow title="11"/>
        <PickerRow title="12"/>
    </PickerColumn>
    <!-- Picker shorthand notation -->
    <Column id="minutes">
        <Row title="15"/>
        <Row title="30"/>
        <Row title="45"/>
        <Row title="00"/>
    </Column>
</Alloy>

Parameters

Name Type Description
row Titanium.UI.PickerRow

A row to add.

Returns

Type
void

# removeRow

Availability
0.9
0.9
9.2.0
removeRow(row) → void

Removes a row from this column.

Parameters

Name Type Description
row Titanium.UI.PickerRow

A row to remove.

Returns

Type
void

Contents