# Titanium.UI.PickerColumn

> A picker column, representing a selectable group of items in a [Titanium.UI.Picker](https://titaniumsdk.com/docs/sdk/Titanium.UI.Picker.md).

- Source: https://titaniumsdk.com/docs/sdk/12.6.4/Titanium.UI.PickerColumn
- Titanium SDK version: 12.6.4
- Kind: view
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK 0.9
- Extends: Titanium.UI.View
- Inheritance: Titanium.UI.View > Titanium.Proxy

Use the [Titanium.UI.createPickerColumn](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#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](https://titaniumsdk.com/docs/sdk/Titanium.UI.Picker.md) for further examples of usage.

## Example: Multi-Column Picker

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

``` js
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);
}
```

## Example: Alloy XML Markup

Previous example as an Alloy view.

multicolumnpicker.xml
``` 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:
``` js
$.picker.setSelectedRow(0, 2, false);
$.picker.setSelectedRow(1, 3, false);
```

## Properties

### font

- Type: Font
- Platforms: Android

Font to use for text.

### rowCount

- Type: Number
- Platforms: Android, iPhone, iPad, macOS
- Permission: read-only

Number of rows in this column.

### rows

- Type: Array<Titanium.UI.PickerRow>
- Platforms: Android, iPhone, iPad, macOS
- Permission: read-only

Rows of this column.

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

## Methods

### addRow

- Platforms: Android, iPhone, iPad, macOS

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.

``` xml
<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:

- `row` (Titanium.UI.PickerRow): A row to add.

### removeRow

- Platforms: Android, iPhone, iPad, macOS

Removes a row from this column.

Parameters:

- `row` (Titanium.UI.PickerRow): A row to remove.

## Inherited members

15 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/12.6.4/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener`
- [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/12.6.4/Titanium.UI.View.md): `accessibilityDisableLongPress`, `filterTouchesWhenObscured`, `focus`, `id`, `longclick`, `postlayout`, `stopAnimation`, `tooltip`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.