# Titanium.UI.PickerRow

A picker row, representing a selectable item in a Titanium.UI.Picker.

Availability

0.9

9.2.0

Extends

Titanium.UI.View

# Overview

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

Views added to picker rows is only supported on iOS.

# Examples

# Custom View for Row (iOS only)

Create a two-column picker, with the first column containing a child view, and automatically select a row in each column.

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});

var fruit = [ 'Bananas', 'Strawberries', 'Mangos', 'Grapes' ];
var color = [ 'red', 'green', 'blue', 'orange' ];

var column1 = Ti.UI.createPickerColumn();

for(var i=0, ilen=fruit.length; i<ilen; i++){
  var row = Ti.UI.createPickerRow();

  var label = Ti.UI.createLabel({
    color:'red',
    font:{fontSize:20,fontWeight:'bold'},
    text: fruit[i],
    textAlign:'left',
    width:'126'
  });

  row.add(label);
  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],
    font: {fontSize:30}
  });
  column2.addRow(row);
}

var picker = Ti.UI.createPicker({
  top:50,
  columns: [column1, column2],
  selectionIndicator: true
});

win.add(picker);

win.open();

// must be after picker has been displayed
picker.setSelectedRow(0, 2, false); // select Mangos
picker.setSelectedRow(1, 3, false); // select Orange

# Alloy XML Markup

Previous example as an Alloy view.

pickerrowexample.xml

<Alloy>
    <Window id="win" backgroundColor="white" layout="vertical" exitOnClose="true">
        <Picker id="picker" top="50" selectionIndicator="true">
            <PickerColumn id="column1">

                <!-- On iOS, views can be added to picker rows -->
                <PickerRow>
                    <Label color="red" textAlign="left" width="126">Bananas</Label>
                </PickerRow>
                <PickerRow>
                    <Label color="red" textAlign="left" width="126">Strawberries</Label>
                </PickerRow>
                <PickerRow>
                    <Label color="red" textAlign="left" width="126">Mangos</Label>
                </PickerRow>
                <PickerRow>
                    <Label color="red" textAlign="left" width="126">Grapes</Label>
                </PickerRow>
            </PickerColumn>

            <!-- Picker shorthand notation -->
            <Column id="column2">
                <Row title="red"/>
                <Row title="green"/>
                <Row title="blue"/>
                <Row title="orange"/>
            </Column>
        </Picker>
    </Window>
</Alloy>

pickerrowexample.js:

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

# Properties

# color

Availability

5.4.0

9.2.0

color :String | Titanium.UI.Color

Color of the item text, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.

# font

Availability

0.9

9.2.0

font :Font

Font to use for the item text.

# title

Availability

0.9

9.2.0

title :String

Item text.

# Methods

# add

Availability

0.9

9.2.0

add(view) → void

Adds a child view to this picker row, to provide a custom row.

The child view is added as the last child in this view's hierarchy.

Although all views inherit from Titanium.UI.View, not all views are capable of containing other views. In particular:

Some views are not designed to be containers at all.
Some views are special-purpose containers that can only contain certain other views.
Some views are top-level containers that cannot (or should not) be added to other views.

# Non-Container Views

The following views are not intended to act as containers that can hold other views:

Adding children to the these views may be supported on some platforms, but is not guaranteed to work across platforms. Where it is supported, it may not work as expected.

For maximum portability, these views should be treated as if they do not support children. Instead of adding children to these views, applications can positon other views as siblings. For example, instead of adding a button as a child of a WebView, you can add the button to the web view's parent such that it appears on top of the web view.

# Special-Purpose Containers

A few view objects act as special-purpose containers--that is, they only manage certain types of children, and many of them support a special means of adding these children, instead of the general add method. These containers include:

Titanium.UI.ButtonBar and Titanium.UI.iOS.TabbedBar are designed to hold their own internally-created buttons, assigned by adding strings to the "labels" array. Views added using the add method are displayed on top of these buttons.
Titanium.UI.Picker. Can only hold PickerRows and PickerColumns, which are added using the add method. Adding other types of views to a Picker is not supported.
Titanium.UI.TableView is a specialized container for TableViewSection and TableViewRow objects. These objects must be added using the properties and methods that TableView provides for adding and removing sectons and rows.

On some platforms, it is possible to add arbitrary child views to a table view using the add method. However, this is not guaranteed to work on all platforms, and in general, should be avoided.
Titanium.UI.TableViewSection is a specialized container for TableViewRow objects, which are added using the add method. The add method on TableViewSection can only be used to add TableViewRow objects.
Titanium.UI.iOS.Toolbar is designed to hold buttons and certain other controls, added to its items array. Views added using the add method are displayed on top of the controls in the items array.
The Tab, TabGroup, NavigationWindow and SplitWindow objects are special containers that manage windows. These are discussed in the "Top-Level Containers" section.

# Top-Level Containers

There are certain top-level containers that are not intended to be added as the children of other views. These top-level containers include Titanium.UI.Window, Titanium.UI.iOS.SplitWindow, Titanium.UI.NavigationWindow, and Titanium.UI.TabGroup. Other types of views must be added to a top-level container in order to be displayed on screen.

The special containers Titanium.UI.NavigationWindow, Titanium.UI.iOS.SplitWindow, Titanium.UI.Tab, and Titanium.UI.TabGroup manage windows. These managed windows may be referred to as children of the container, but they are not added using the add method.

Tab is another kind of special container: it is not itself a top-level container, but can only be used within a TabGroup. You cannot add a Tab to an arbitrary container.

Parameters

Name	Type	Description
`view`	Titanium.UI.View	A view object.

Returns

Type: void