[TIMOB-11352] Android: TableViewSection header title does not change if sections have many rows

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-12-12T23:12:54.000+0000
Affected Version/s	n/a
Fix Version/s	Release 3.0.0, Release 3.1.0, 2012 Sprint 21 API, 2012 Sprint 21, 2012 Sprint 25 API
Components	Android
Labels	SupportTeam, api, module_tableview, qe-testadded, triage
Reporter	Davide Cassenti
Assignee	Karl Rowley
Created	2012-10-10T10:54:44.000+0000
Updated	2013-09-26T07:35:46.000+0000

Description

Problem description

When a TableViewSection has many rows (~30 or more), the title of the first section is repeated for the other ones. When the rows are few, this doesn't happen.

Steps to reproduce

- Use the following sample to reproduce the issue:

var win1 = Titanium.UI.createWindow({
    title : 'Window',
    left : 0,
    top : 0,
    backgroundColor : '#FFF'
});

win1.open();


// section 1
var headerView1 = Ti.UI.createView({
    height:35,
    backgroundColor:'#64A5DB',
    opacity:0.8
});
headerView1.add(Ti.UI.createLabel({
    left:10,
    height:35,
    width:Ti.UI.SIZE,
    text: "Classes",
    ellipsize:true,
    color:'white',
    font:{
        fontSize:15,
        fontWeight:'bold'
    }
}));

var section1 = Ti.UI.createTableViewSection({
    headerView: headerView1 
});

for(var i=0; i<30; i++) {
    section1.add(Ti.UI.createTableViewRow({title: "Section 1 - Row " + (i+1)}));
}

// 2nd section
var headerView2 = Ti.UI.createView({
    height:35,
    backgroundColor:'#64A5DB',
    opacity:0.8
});
headerView2.add(Ti.UI.createLabel({
    left:10,
    height:35,
    width:Ti.UI.SIZE,
    text: "Topics",
    ellipsize:true,
    color:'white',
    font:{
        fontSize:15,
        fontWeight:'bold'
    }
}));

var section2 = Ti.UI.createTableViewSection({
    headerView: headerView2 
});

for(var i=0; i<30; i++) {
    section2.add(Ti.UI.createTableViewRow({title: "Section 2 - Row " + (i+1)}));
}

var tableview = Ti.UI.createTableView({
    data: [section1, section2]
});

win1.add(tableview);

- Run the app: note how the section 2 header says 'Classes' and not 'Topics'. - Change the number of rows from 30 to 3 and repeat: now everything is fine.

Note

Works fine on iOS

Comments

Karl Rowley 2012-10-10

I've tried to reproduce this and haven't been able to. Are you sure that you are using a recent 3.0.X SDK? You need to make sure that the SDK you are using includes the change for TIMOB-10458.
Ping Wang 2012-10-10

Maybe related to TIMOB-10712. Cannot reproduce this issue with latest 3_0_X and master.
Mitchell Amihod 2012-10-22

i see this in 2.1.3 as well
Pedro Enrique 2012-12-07

This has been tested in 3.1 and seems to be fixed, but when rotated into landscape, it appears again. Will provide more information shortly.

Chris Colborne 2012-12-10

Not sure if I should add this here, or create a new issue? Anyway, here it is. There seems to be a related bug where the headerView element gets shuffled when scrolling. Try the example code below. It should have headers Red, Green, Purple, Purple. In 2.1.4, the titles get skewed (eg Red, Green, Purple, Red) with the same background colours. In 3.0.0.v20121207120202, the titles are correct, however the background colours still skew. So text Red, Green, Purple, Purple, but colours red, green, purple, red.

   var RED = 'Red',
       GREEN = 'Green',
       PURPLE = 'Purple';
   
   var win1 = Titanium.UI.createWindow({  
       backgroundColor:'#fff',
       layout: 'vertical'
   });
   
   var table = Ti.UI.createTableView({
       
   });
   
   var tableSection1 = createSectionForGroup(RED);
   var tableSection2 = createSectionForGroup(GREEN);
   var tableSection3 = createSectionForGroup(PURPLE);
   var tableSection4 = createSectionForGroup(PURPLE);
   
   var tableRow = Ti.UI.createTableViewRow({
       title:'Row'
   });
   
   var rows = 7;
   
   for(i=0; i<=rows; i++) {
       tableSection1.add(tableRow);
   }
   
   for(i=0; i<=rows; i++) {
       tableSection2.add(tableRow);
   }
   
   for(i=0; i<=rows; i++) {
       tableSection3.add(tableRow);
   }
   
   for(i=0; i<=rows; i++) {
       tableSection4.add(tableRow);
   }
   
   table.setData([tableSection1, tableSection2, tableSection3, tableSection4]);
   win1.add(table);
   
   // open tab group
   win1.open();
   
   
   function createSectionForGroup(group) {
       var headerContainerOpts, headerBottomBorderOpts, headerViewOpts;
   
       headerViewOpts = {
           color: 'white',
           height: Ti.UI.SIZE,
           font: { fontSize: '17sp', fontWeight: 'bold' },
           left: 11,
           text: group
       };
      
       if (group === RED) {
           headerContainerOpts = {
               backgroundGradient: {
                   endPoint: { x: 0, y: '100%' },
                   startPoint: { x: 0, y: 0 },
                   type: 'linear',
                   colors: ['#C53019', '#B32D14']
               },
               height: 32
           };
       }
       if (group === GREEN) {
           headerContainerOpts = {
               backgroundGradient: {
                   endPoint: { x: 0, y: '100%' },
                   startPoint: { x: 0, y: 0 },
                   type: 'linear',
                   colors: ['#2B781E', '#195010']
               },
               height: 32
           };
       }
       if (group === PURPLE) {
           headerContainerOpts = {
               backgroundGradient: {
                   endPoint: { x: 0, y: '100%' },
                   startPoint: { x: 0, y: 0 },
                   type: 'linear',
                   colors: ['#873DA6', '#612A7D']
               },
               height: 32
           };
       }
   
       var container = Ti.UI.createView(headerContainerOpts);
       container.add(Ti.UI.createLabel(headerViewOpts));
       return Ti.UI.createTableViewSection({
           headerView: container,
           title: group
       });
   }

Karl Rowley 2012-12-10

OK, TableView drives the view to proxy association through getView(), which turns the associations into a rats nest. I'll be submitting a PR shortly.
Karl Rowley 2012-12-10

Pull request https://github.com/appcelerator/titanium_mobile/pull/3561

Karl Rowley 2012-12-10

Here's an expansion of the test case shown above with more sections for testing:

   
   var RED = 'Red',
       GREEN = 'Green',
       PURPLE = 'Purple';
    
   var win1 = Titanium.UI.createWindow({  
       backgroundColor:'#fff',
       layout: 'vertical'
   });
    
   var table = Ti.UI.createTableView({
        
   });
    
   var tableSection1 = createSectionForGroup(RED);
   var tableSection2 = createSectionForGroup(GREEN);
   var tableSection3 = createSectionForGroup(PURPLE);
   var tableSection4 = createSectionForGroup(PURPLE);
   var tableSection5 = createSectionForGroup(RED);
   var tableSection6 = createSectionForGroup(GREEN);
   var tableSection7 = createSectionForGroup(PURPLE);
   var tableSection8 = createSectionForGroup(PURPLE);
   var tableSection9 = createSectionForGroup(RED);
   var tableSection10 = createSectionForGroup(GREEN);
   var tableSection11 = createSectionForGroup(PURPLE);
   var tableSection12 = createSectionForGroup(PURPLE);
    
   var tableRow = Ti.UI.createTableViewRow({
       title:'Row'
   });
    
   var rows = 7;
    
   for(i=0; i<=rows; i++) {
       tableSection1.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection2.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection3.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection4.add(tableRow);
   }
   
   for(i=0; i<=rows; i++) {
       tableSection5.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection6.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection7.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection8.add(tableRow);
   }
   
   for(i=0; i<=rows; i++) {
       tableSection9.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection10.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection11.add(tableRow);
   }
    
   for(i=0; i<=rows; i++) {
       tableSection12.add(tableRow);
   }
    
   table.setData([tableSection1, tableSection2, tableSection3, tableSection4,  tableSection5, tableSection6, tableSection7, tableSection8,
   	tableSection9, tableSection10, tableSection11, tableSection12]);
   win1.add(table);
    
   // open tab group
   win1.open();
    
    
   function createSectionForGroup(group) {
       var headerContainerOpts, headerBottomBorderOpts, headerViewOpts;
    
       headerViewOpts = {
           color: 'white',
           height: Ti.UI.SIZE,
           font: { fontSize: '17sp', fontWeight: 'bold' },
           left: 11,
           text: group
       };
       
       if (group === RED) {
           headerContainerOpts = {
               backgroundGradient: {
                   endPoint: { x: 0, y: '100%' },
                   startPoint: { x: 0, y: 0 },
                   type: 'linear',
                   colors: ['#C53019', '#B32D14']
               },
               height: 32
           };
       }
       if (group === GREEN) {
           headerContainerOpts = {
               backgroundGradient: {
                   endPoint: { x: 0, y: '100%' },
                   startPoint: { x: 0, y: 0 },
                   type: 'linear',
                   colors: ['#2B781E', '#195010']
               },
               height: 32
           };
       }
       if (group === PURPLE) {
           headerContainerOpts = {
               backgroundGradient: {
                   endPoint: { x: 0, y: '100%' },
                   startPoint: { x: 0, y: 0 },
                   type: 'linear',
                   colors: ['#873DA6', '#612A7D']
               },
               height: 32
           };
       }
    
       var container = Ti.UI.createView(headerContainerOpts);
       container.add(Ti.UI.createLabel(headerViewOpts));
       return Ti.UI.createTableViewSection({
           headerView: container,
           title: group
       });
   }

Karl Rowley 2012-12-11

Pull request https://github.com/appcelerator/titanium_mobile/pull/3566 for backport to 3_0_X
Shyam Bhadauria 2012-12-11

Verified with Android 2.3.6 and Android 4.1. Titanium SDK:3.0.0.v20121210171701 Titanium Studio:3.0.0.201212071410
Vishal Duggal 2012-12-12

Reopening to add fixVersion

JSON Source