Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-10458

Android: TableSection - header views are not sorted correctly

    Details

    • Sprint:
      Release 3.0.0

      Description

      When creating table sections with header views and a label, the header views are not sorted in the correct order. When executing this code repeatedly, the order of the labels is likely to change. It seems like this bug only happens when one section has a large number of items (in this case, section D). This bug was tested on Android 4.04. On iOS 5.1, the order is correct.

      Steps to reproduce:
      1. Run the code below
      2. Scroll to the bottom
      3. Notice that the labels in the table section header views do not show up in the correct order / in the order they were added

      var SettingsRow = function(a){
        a = a || {};
        a.height = a.height || 44;
        a.backgroundColor = 'transparent';
        var label = Ti.UI.createLabel({text: a.title, color: 'white', left: 10, font: {fontSize: 18, fontWeight: 'normal'}});
        var row = Ti.UI.createTableViewRow(a);
        row.add(label);
        row.label = label;
        row.allowsSelection = false;
        return row;
      };
       
      var SettingsTableViewSection = function(title) {
        var headerView = Ti.UI.createView({height: 25, width:Ti.UI.FILL, backgroundColor:'#292b2c'});
        var headerLabel = Ti.UI.createLabel({top: 3, left: 3, text:title, color:'white', color: '#cccccc', font:{fontWeight:'bold', fontSize:14}});
        headerView.add(headerLabel);
        return Ti.UI.createTableViewSection({headerView:headerView});
      }
       
      var win = Ti.UI.createWindow({
          backgroundColor: 'white'
      });
       
      var rowA1 = SettingsRow({title: 'Row A1'});
      var rowA2 = SettingsRow({title: 'Row A2'});
      var rowB1 = SettingsRow({title: 'Row B1'});
      var rowB2 = SettingsRow({title: 'Row A2'});
      var rowC1 = SettingsRow({title: 'Row C1'});
      var rowC2 = SettingsRow({title: 'Row C2'});
      var rowD1 = SettingsRow({title: 'Row D1'});
      var rowD2 = SettingsRow({title: 'Row D2'});
      var rowD3 = SettingsRow({title: 'Row D3'});
      var rowD4 = SettingsRow({title: 'Row D4'});
      var rowD5 = SettingsRow({title: 'Row D5'});
      var rowD6 = SettingsRow({title: 'Row D6'});
      var rowD7 = SettingsRow({title: 'Row D7'});
      var rowD8 = SettingsRow({title: 'Row D8'});
      var rowE1 = SettingsRow({title: 'Row E1'});
      var rowE2 = SettingsRow({title: 'Row E2'});
       
      var tableSections = [
        SettingsTableViewSection('Section A'),
        SettingsTableViewSection('Section B'),
        SettingsTableViewSection('Section C'),
        SettingsTableViewSection('Section D'),
        SettingsTableViewSection('Section E'),
      ];
       
      tableSections[0].add(rowA1);
      tableSections[0].add(rowA2);
      tableSections[1].add(rowB1);
      tableSections[1].add(rowB2);
      tableSections[2].add(rowC1);
      tableSections[2].add(rowC2);
      tableSections[3].add(rowD1);
      tableSections[3].add(rowD2);
      tableSections[3].add(rowD3);
      tableSections[3].add(rowD4);
      tableSections[3].add(rowD5);
      tableSections[3].add(rowD6);
      tableSections[3].add(rowD7);
      tableSections[3].add(rowD8);
      tableSections[4].add(rowE1);
      tableSections[4].add(rowE2);
       
      var table = Ti.UI.createTableView({top: 0,backgroundColor:'#000'});
       
      table.setData(tableSections);
       
      win.add(table);
       
      win.open();
      

      The following example has less rows in section D, the order of the header views is correct:

      var SettingsRow = function(a){
        a = a || {};
        a.height = a.height || 44;
        a.backgroundColor = 'transparent';
        var label = Ti.UI.createLabel({text: a.title, color: 'white', left: 10, font: {fontSize: 18, fontWeight: 'normal'}});
        var row = Ti.UI.createTableViewRow(a);
        row.add(label);
        row.label = label;
        row.allowsSelection = false;
        return row;
      };
       
      var SettingsTableViewSection = function(title) {
        var headerView = Ti.UI.createView({height: 25, width:Ti.UI.FILL, backgroundColor:'#292b2c'});
        var headerLabel = Ti.UI.createLabel({top: 3, left: 3, text:title, color:'white', color: '#cccccc', font:{fontWeight:'bold', fontSize:14}});
        headerView.add(headerLabel);
        return Ti.UI.createTableViewSection({headerView:headerView});
      }
       
      var win = Ti.UI.createWindow({
          backgroundColor: 'white'
      });
       
      var rowA1 = SettingsRow({title: 'Row A1'});
      var rowA2 = SettingsRow({title: 'Row A2'});
      var rowB1 = SettingsRow({title: 'Row B1'});
      var rowB2 = SettingsRow({title: 'Row A2'});
      var rowC1 = SettingsRow({title: 'Row C1'});
      var rowC2 = SettingsRow({title: 'Row C2'});
      var rowD1 = SettingsRow({title: 'Row D1'});
      var rowD2 = SettingsRow({title: 'Row D2'});
      var rowE1 = SettingsRow({title: 'Row E1'});
      var rowE2 = SettingsRow({title: 'Row E2'});
       
      var tableSections = [
        SettingsTableViewSection('Section A'),
        SettingsTableViewSection('Section B'),
        SettingsTableViewSection('Section C'),
        SettingsTableViewSection('Section D'),
        SettingsTableViewSection('Section E'),
      ];
       
      tableSections[0].add(rowA1);
      tableSections[0].add(rowA2);
      tableSections[1].add(rowB1);
      tableSections[1].add(rowB2);
      tableSections[2].add(rowC1);
      tableSections[2].add(rowC2);
      tableSections[3].add(rowD1);
      tableSections[3].add(rowD2);
      tableSections[4].add(rowE1);
      tableSections[4].add(rowE2);
       
      var table = Ti.UI.createTableView({top: 0,backgroundColor:'#000'});
       
      table.setData(tableSections);
       
      win.add(table);
       
      win.open();
      

        Attachments

          Activity

            People

            • Assignee:
              krowley Karl Rowley
              Reporter:
              jalter Jon Alter
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-5739
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Integration