Autopopulating picker columns

Question

Autopopulating picker columns

You must Login before you can answer or comment on any questions.

Mobile device: iPhone

Titanium SDK: 1.6.1

Has anyone got a solution on how to dynamicly add rows to a 2nd picker column by change event on the 1st column?

Something like what I'm trying to do here:

var picker = Titanium.UI.createPicker({
    top:20
});
picker.selectionIndicator=true;
 
var picker_column = Ti.UI.createPickerColumn({opacity:0});
var picker_column2 = Ti.UI.createPickerColumn({opacity:0});
 
picker_column.addRow(Ti.UI.createPickerRow({title:'Bananas',selected:true}));
 
picker.add([picker_column, picker_column2]);
 
picker.addEventListener('change', function(){
 
   Ti.API.log('change');
 
   picker_column2.addRow(Ti.UI.createPickerRow({title:'Apples'}));
 
});

I get no errors in the console. Just no data in picker_column2.

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

hi there,

You were almost there. :)

You just need to add the following line after adding the row to the 2nd column the picker event listener

picker.addEventListener('change', function(){
    Ti.API.log('change');
    picker_column2.addRow(Ti.UI.createPickerRow({title:'Apples'}));
    picker.reloadColumn(picker_column2);
});

I'll give you another example:

var win = Titanium.UI.createWindow({
    backgroundColor: '#336699'
});
 
//-- Pre-populate the 1st column with some data
var rows1 = [
 Titanium.UI.createPickerRow({title: 'Fruit',selected:false}),
 Titanium.UI.createPickerRow({title: 'Cars',selected:false})
];
 
//-- Create the 1st column and set the data
var column1 = Titanium.UI.createPickerColumn({
    rows: rows1
});
 
//-- Create the 2nd column with nothing
var column2 = Titanium.UI.createPickerColumn();
 
//-- Create the picker
var picker = Titanium.UI.createPicker({
    top:20,
    selectionIndicator: true,
    columns: [column1, column2]
});
 
picker.addEventListener('change', function(e){
   Ti.API.log("Inside the picker"); 
 
    //-- Detect which column has fired the event
    if(e.columnIndex === 0)
    {
        /* Why ? Because the event is fired on change for the 
         * Picker, so if you change the 2nd column, the 
         * Ti.API will execute but we dont want to go inside 
         * the next if, so we exclude the 2nd column
         ***/       
 
        //-- if row is 'Fruit'
        if(e.rowIndex === 0 )
        {
            //-- Dynamically set new data
            var rows2 = [
            Titanium.UI.createPickerRow({title: 'Bananas',selected:true}),
            Titanium.UI.createPickerRow({title: 'Apple',selected:false})];
 
            //-- Set the rows to the new data
            column2.rows = rows2;
 
            //-- reload the 2nd picker
            picker.reloadColumn(column2);
        }
        //-- if row is 'Cars'
        else 
        {
            //-- Same as above...
            var rows2 = [
            Titanium.UI.createPickerRow({title: 'Toyota',selected:false}),
            Titanium.UI.createPickerRow({title: 'Sukuzi',selected:true})];
 
            column2.rows = rows2;
            picker.reloadColumn(column2);           
        }
    }
});
 
win.add(picker);    
win.open();

Hope it helps you :)

Answer 2

Just to add platform specific information: With SDK 2.1.3, if you are on Android platfrom (2.3 or more) , the reloadColumn is not a function of the picker. However, you don't require to call it, since column updates itself. So from the above example column2.rows = rows2; is sufficient