[TIMOB-11762] Android: can't update image inside a TableViewRow

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2013-01-28T10:30:24.000+0000
Affected Version/s	n/a
Fix Version/s	Release 3.0.2, Release 3.1.0, 2013 Sprint 01 API, 2013 Sprint 01
Components	Android
Labels	SupportTeam, module_tableviewrow, qe-testadded, triage
Reporter	Davide Cassenti
Assignee	Hieu Pham
Created	2012-11-14T11:16:12.000+0000
Updated	2015-06-12T16:42:36.000+0000

Description

Problem description

Trying to update an image inside a TableViewRow works only a couple of time; after that, the image properties can be changed (e.g. right), but not the image itself.

Steps to reproduce

Use the following code:

Ti.UI.backgroundColor = '#e3e8ee';

var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView();
var rows = [];

for (var i = 1; i <= 50; i++) {
	var row = Ti.UI.createTableViewRow({
		height	: '40dp'
	});

	var label = Ti.UI.createLabel({
		height	: Ti.UI.SIZE,
		left	: '5dp',
		text	: 'Row ' + i,
		top		: '5dp',
		width	: Ti.UI.SIZE
	});
	row.text = label;
	row.add(row.text);

	var image = Ti.UI.createImageView({
		height	: '28dp',
		image	: '/images/radiobutton_off.png',
		right	: '0dp',
		top		: '5dp',
		width	: '34dp'
	});
	row.image = image;
	row.add(row.image);
	
	rows.push(row);
}

table.setData(rows);

win.add(table);
win.open();

setActive(0);


function setActive (_index) {
	for (var i = 0; i < table.data[0].rows.length; i++) {
		if (i === _index) {
		    table.data[0].rows[i].text.text = "Row " + i + " ON";
			table.data[0].rows[i].image.image = '/images/radiobutton_on.png';
			table.data[0].rows[i].image.right = '50dp';
		}
		else {
		    table.data[0].rows[i].text.text = "Row " + i;
			table.data[0].rows[i].image.image = '/images/radiobutton_off.png';
			table.data[0].rows[i].image.right = '0dp';
		}
	}
}

table.addEventListener('click', function (e) {
	setActive(e.index);
});

Running the code on Android, you can notice how automatically the first row changes: the label text shows "ON", the image is moved 30dp from the right and the image itself changes to the active button. Clicking a row, the process works again on that row. Click the second time and everything changes, but the image.

Note

I tried SDK from 2.1.3 to 3.0.0, same behavior. I also tried adding a className to the rows (both same class for all the rows, or a different one per row), nothing changes.

Comments

Davide Cassenti 2012-12-03

The workaround involves using 2 images instead of one, and showing/hiding them.

   Ti.UI.backgroundColor = '#e3e8ee';
    
   var win = Ti.UI.createWindow();
   var table = Ti.UI.createTableView();
   var rows = [];
    
   for (var i = 1; i <= 50; i++) {
       var row = Ti.UI.createTableViewRow({
           height  : '40dp'
       });
    
       var label = Ti.UI.createLabel({
           height  : Ti.UI.SIZE,
           left    : '5dp',
           text    : 'Row ' + i,
           top     : '5dp',
           width   : Ti.UI.SIZE
       });
       row.text = label;
       row.add(row.text);
    
       var imageOn = Ti.UI.createImageView({
           height  : '28dp',
           image   : '/images/radiobutton_on.png',
           right   : '0dp',
           top : '5dp',
           width   : '34dp',
           visibile: false
       });
       row.imageOn = imageOn;
       row.add(row.imageOn);
   
       var imageOff = Ti.UI.createImageView({
           height  : '28dp',
           image   : '/images/radiobutton_off.png',
           right   : '0dp',
           top     : '5dp',
           width   : '34dp'
       });
       row.imageOff = imageOff;
       row.add(row.imageOff);
        
       rows.push(row);
   }
    
   table.setData(rows);
    
   win.add(table);
   win.open();
    
   setActive(0);
    
    
   function setActive (_index) {
       for (var i = 0; i < table.data[0].rows.length; i++) {
           if (i === _index) {
               table.data[0].rows[i].text.text = "Row " + i + " ON";
               table.data[0].rows[i].imageOff.visible = false;
               table.data[0].rows[i].imageOn.visible = true;
           }
           else {
               table.data[0].rows[i].text.text = "Row " + i;
               table.data[0].rows[i].imageOn.visible = false;
               table.data[0].rows[i].imageOff.visible = true;
           }
       }
   }
    
   table.addEventListener('click', function (e) {
       setActive(e.index);
   });

Ping Wang 2013-01-11

PR https://github.com/appcelerator/titanium_mobile/pull/3689
Shyam Bhadauria 2013-01-20

Image is getting updated for every click. Environment used for verification - Titanium SDK: 3.1.0.v20130114171802 Titanium Studio:3.0.1.201212181159 Device: Samsung GALAXY Note (2.3.6)
Vishal Duggal 2013-01-21

Reopening to edit fixVersion
Anshu Mittal 2013-01-28

Reopening to update labels
Geervani 2015-04-28

the issue still exists in 3.5.0
Brad Ball 2015-06-12

I'm still having this issue in 4.0.0.GA

JSON Source