Search code examples
drop-down-menutitaniumtitanium-mobile

creating dropdown using table view in titanium


i am creating a form containing a dropdown with default value and options to choose. and form should have reset button to clear choosen option from dropdownor tableview.when i click on dropdown it should expand containing options to select and when user selects option it is collapsed.and if reset button is pressed dropdown value is reset to default value.

i searched in google and i got some code below in this code when i executed i am just getting a table view with expanded ,when i select a row it still remains expanded.

 var win = Ti.UI.createWindow({
title: 'Title goes here',
backgroundColor: '#123456'
});
var checkFlag = true;
var picker = Ti.UI.createPicker({ width:110,left:190,top:150}); 
var data = []; 

data.push(Titanium.UI.createPickerRow({title:'Karnataka'})); 
data.push(Titanium.UI.createPickerRow({title:'tamilnadu'})); 
data.push(Titanium.UI.createPickerRow({title:'kerala'})); 
data.push(Titanium.UI.createPickerRow({title:'goa'})); 
picker.add(data); 
win.add(picker);

var resetbtn = Ti.UI.createButton({
top : '100',
width : '50',
height : '35',
title  : 'Reset'
});
win.add(resetbtn);
resetbtn.addEventListener('click', function(){
Ti.API.info('checkFlag = ' + checkFlag);
if(checkFlag) {
   picker.hide();

    checkFlag = false;
} else {

   picker.show();
checkFlag = true;
}
});
win.open();    

and is it good to create dropdown using table view or picker and how to set to default value on pressing reset button.please help me i am new to titanium.


Solution

  • It seems like you are getting confused in TableView and dropdown. These two are different elements and have different usage.

    I will suggest to use Titanium.UI.Picker to create dropdown list. Also to make some value of the picker to be selected programmatically you can use setSelectedRow() method of picker.

    Following code will help to start things :

    Ti.UI.backgroundColor = 'white';
    var win = Ti.UI.createWindow({
      exitOnClose: true,
      layout: 'vertical'
    });
    
    var picker = Ti.UI.createPicker({
      top:50
    });
    
    var data = [];
    data[0]=Ti.UI.createPickerRow({title:'Bananas'});
    data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
    data[2]=Ti.UI.createPickerRow({title:'Mangos'});
    data[3]=Ti.UI.createPickerRow({title:'Grapes'});
    
    picker.add(data);
    picker.selectionIndicator = true;
    
    win.add(picker);
    win.open();
    
    var resetbtn = Ti.UI.createButton({
        bottom: '10',
        width : '50',
        height : '35',
        title  : 'Reset'
    });
    win.add(resetbtn);
    resetbtn.addEventListener('click', resetToDefault);
    
    function resetToDefault() {
        picker.setSelectedRow(0, 0, false); // select Bananas, i.e index 0
    }