Titanium JIRA Archive
Appcelerator Community (AC)

[AC-2876] Switch in a TableViewRow - doesn't display its toggled status when window.layout='vertical'

GitHub Issuen/a
TypeBug
Priorityn/a
StatusClosed
ResolutionFixed
Resolution Date2013-03-18T18:47:59.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsStudio, Titanium SDK & CLI
Labelsn/a
ReporterShawn Lipscomb
AssigneeDaniel Sefton
Created2011-08-01T13:37:18.000+0000
Updated2016-03-08T07:47:50.000+0000

Description

Problem

I have a TableView with rows that have labels and switches on them. When the switch's "value" is toggled via click on the corresponding label, the switch on the screen doesn't display the correct status. If the click occurs on the Switch itself, it visually toggles just fine. Same behavior in the emulator and on the actual device.

Testcase

Ti.UI.createWindow({url:'Win1.js',
                    layout:'vertical',
                    exitOnClose:true,navBarHidden:false}).open();

var TheWindow=Ti.UI.currentWindow;
 
var TheListBox=Ti.UI.createTableView();
 
// first row in the table
var TVRow1=Ti.UI.createTableViewRow();
 
TVRow1.add(Ti.UI.createLabel({text:'A row with a switch'}));
 
var Switch1=Ti.UI.createSwitch({
               style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
               value:true,
               Name:'Switch1',
               right:0
             });
TVRow1.add(Switch1);
TVRow1.Switch=Switch1;
TheListBox.appendRow(TVRow1);
 
 
// second row in the table
var TVRow2=Ti.UI.createTableViewRow();
 
TVRow2.add(Ti.UI.createLabel({text:'Another row, with a switch'}));
 
var Switch2=Ti.UI.createSwitch({
               style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
               value:false,
               Name:'Switch2',
               right:0
             });
TVRow2.add(Switch2);
TVRow2.Switch=Switch2;
TheListBox.appendRow(TVRow2);
 
 
// third row in the table...just a normal row with "child" indicator
TheListBox.appendRow({title:'Third row, with child',
                      hasChild:true});
 
 
TheWindow.add(TheListBox);
 
TheListBox.addEventListener('click',function(evt)
  {
    if (Object.prototype.toString.call(evt.source) != '[object Ti.UI.Switch]')
    { // they clicked on the label, so toggle the associated switch
      Ti.API.info('*--> '+'Toggling '+evt.row.Switch.Name+' to '+
                  (! evt.rowData.Switch.value));
      evt.row.Switch.value=(! evt.rowData.Switch.value);
      Ti.API.info('*--> '+'Toggled '+evt.row.Switch.Name+' to '+
                  evt.rowData.Switch.value);
    }
    else
      Ti.API.info('*--> '+'Switch Toggled '+evt.row.Switch.Name+' to '+
                  evt.rowData.Switch.value);
  });

Important Detail

If I take out the layout:'vertical' in the createWindow call in app.js, it displays the toggled status just fine! Link to Q&A report: http://developer.appcelerator.com/question/123259/switch-in-a-tableviewrow---doesnt-display-its-toggled-status-when-windowlayoutvertical BTW, I think there are bigger issues with putting other controls in TableViewRows. I've seen cases where the events/messages seem to get confused when several TextFields are in a TableView. There are also several related issues in Q&A.

Comments

  1. Shawn Lipscomb 2011-08-01

    TIMOB-4620 may be related to this
  2. Shawn Lipscomb 2011-08-01

    This should be a TIMOB bug, not TC bug. Please move it. Thanks.
  3. Shawn Lipscomb 2011-08-29

    Still have this issue.
  4. Paul Dowsett 2011-08-29

    Simon, it's not related to TIMOB-4620, because yours is an Android issue whereas that relates to iOS. I will look at this ticket in more detail today.
  5. Paul Dowsett 2011-08-29

    See my answer to [your question](http://developer.appcelerator.com/question/123259/switch-in-a-tableviewrow---doesnt-display-its-toggled-status-when-windowlayoutvertical#answer-217683)
  6. Shawn Lipscomb 2011-08-30

    Paul, please see my [comment to your answer.](http://developer.appcelerator.com/question/123259/switch-in-a-tableviewrow---doesnt-display-its-toggled-status-when-windowlayoutvertical#answer-217683). The code you supplied exhibits the exact same symptom of this bug.
  7. Paul Dowsett 2011-10-07

    Closing due to inactivity.
  8. Shawn Lipscomb 2012-01-20

    Paul, I revisited this issue and still have the same problem using Ti Studio 1.0.7.201112281340, Android V8 runtime, mobile SDK 1.8.0.1, the Andriod 2.2 API on the emulator with HVGA screen (AVD ID 7), running on Windows XP. I even replaced the win1.js code with your code from the Q&A: 
       var win=Ti.UI.currentWindow;
    
   var tableview=Ti.UI.createTableView();
    
   // first row in the table
   var row1=Ti.UI.createTableViewRow({
     objType:'row',
     objName:'row2'
   });
    
   var label1 = Ti.UI.createLabel({
     text:'A row with a switch',
     objType:'label',
     objName:'label1'
   });
    
   var switch1=Ti.UI.createSwitch({
     style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
     value:true,
     objType:'switch',
     objName:'switch1',
     right:0
   });
    
   row1.add(switch1);
   row1.add(label1);
   row1.assocSwitch=switch1;
   label1.assocSwitch=row1.assocSwitch;
    
    
   tableview.appendRow(row1);
    
   var row2=Ti.UI.createTableViewRow({
     objType:'row',
     objName:'row2'
   });
    
   var label2 = Ti.UI.createLabel({
     text:'Another row, with a switch',
     objType:'label',
     objName:'label2'
   });
    
   var switch2=Ti.UI.createSwitch({
     style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
     value:false,
     objType:'switch',
     objName:'switch2',
     right:0
   });
    
   row2.add(label2);
   row2.add(switch2);
   row2.assocSwitch=switch2;
   label2.assocSwitch=row2.assocSwitch;
    
   tableview.appendRow(row2);
    
   var row3 = Ti.UI.createTableViewRow({
     title:'Third row, with child',
     hasChild:true,
     objType:'row',
     objName:'row2'
   });
    
   tableview.appendRow(row3);
    
   win.add(tableview);
    
   tableview.addEventListener('click',function(e){
     Ti.API.info('e.source: ' + e.source);
     if(e.source.objType === 'label'){
       // they clicked on the label, so toggle the associated switch and report its value
       e.source.assocSwitch.value = !e.source.assocSwitch.value;
       Ti.API.info('The label named ' + e.source.objName + ' has been clicked and the value of switch ' + e.source.assocSwitch.objName + ' has been changed to ' + e.source.assocSwitch.value);
     }
     if(e.source.objType === 'switch'){
       // they clicked on the switch, so report its value
       Ti.API.info('The switch named ' + e.source.objName + ' has been clicked and its value changed to ' + e.source.value);
     }
   });
    The switches don't show their correct logical status when the click occurs on the label. Please reopen this ticket. Thanks.
  9. Paul Dowsett 2012-02-17

    Sorry for the long delay, Shawn. As custom properties may not be added to Ti objects, this test case is probably invalid. I will reopen this ticket, as assign it to the new project lead. Thanks for your input.
  10. Shawn Lipscomb 2012-02-17

    Paul, thanks for reopening. We can't (or shouldn't) add custom properties to Ti objects that we create??? I (and many others, from code I've seen in the Q&As) do this all the time. In fact, there are several examples of this in the Kitchen Sink (table_view_layout_2.js, table_view_custom_rowdata.js, and of course, *custom_properties.js*). Anyway, all of the custom properties in the second code example in this ticket are only there to support the debug messages (Ti.API.info), except for assocSwitch and objType. This was your code from the Q&A. My original code (while I admit it had some efficiency issues) just had the one custom property, "Switch". If this ticket is considered invalid because of that, I can submit another example using a parallel array, which will still exhibit the same symptom.
  11. Shawn Lipscomb 2012-03-19

    Verified that this is fixed in SDK 2.0.0.v20120319003254. Some other issue must have fixed this as a side effect.

JSON Source