[AC-2111] iOS: Touch events not working in custom table view rows

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Cannot Reproduce
Resolution Date	2013-12-06T18:52:49.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	TouchEvents, iOS, iOS5, tableview
Reporter	Ankit Thakur
Assignee	Shak Hossain
Created	2012-10-18T04:26:28.000+0000
Updated	2016-03-08T07:41:05.000+0000

Description

Hi all, When we are creating custom rows, and setting either of the following values in table view options, then touch event is not working for iOS mobile app. 1. backgroundColor 2. scrollable 3. borderColor 4. borderRadius 5. borderWidth 6. headerView

/**

 for iOS, if we are having any custom row, then touch events are not being called,
 if any of the following properties are available in table view options.
 */
var backgroundColor = options['backgroundColor'];
var scrollable = options['scrollable'];
var borderColor = options['borderColor'];
var borderRadius = options['borderRadius'];
var borderWidth = options['borderWidth'];
var headerView = options['headerView'];
delete options['backgroundColor'];
delete options['scrollable'];
delete options['borderColor'];
delete options['borderRadius'];
delete options['borderWidth'];
delete options['headerView'];

/**

 now create table without these options, then add listener,
 then add table to window, and in last re-set these properties in table view
 **/

var tableView = UI.Common.CommonViews.table.getTableView(options);

var tStart;

tableView.addEventListener('touchstart', function(e) {
	Ti.API.info('touch start');
	tStart = new Date();
});

tableView.addEventListener('touchend', function(e) {
	var tEnd = new Date();

	if (tEnd.getTime() - tStart.getTime() > Common.ConfigurationConstants.LONG_PRESS_TIME_GAP_CONSTANT) {
		Ti.API.info('tableViewLongPressEvent');
		window.fireEvent('tableViewLongPressEvent', e);
	} else {
		Ti.API.info('tableViewClickEvent');
		window.fireEvent('tableViewClickEvent', e);
	}

});

window.add(tableView);

/**

 set earlier removed properties in table view
 **/
tableView.backgroundColor = backgroundColor;
tableView.scrollable = scrollable;
tableView.borderColor = borderColor;
tableView.borderRadius = borderRadius;
tableView.borderWidth = borderWidth;
tableView.headerView = headerView;

return tableView;

Comments

Daniel Sefton 2012-11-29

Hi Ankit, Please could you change the test case to something we can run? Thanks!
Ankit Thakur 2012-12-05

As per the code shared, the touch event listeners on table rows are directly proportional to properties of tableview. Properties: 1. backgroundColor 2. scrollable 3. borderColor 4. borderRadius 5. borderWidth 6. headerView If we are setting the above mentioned properties, before adding touch event listeners, then those are not working.
Daniel Sefton 2013-04-05

Please change it to a runnable test case. Thanks.

Mostafizur Rahman 2013-12-06

Hello, We tested this issue the test code below. We can’t reproduce this issue. In our sample code, we have used all properties that you mentioned. Please let us know if you notice anything different. We will mark this "resolved" but wait for your feedback before closing this. Please keep us posted. Regards,

Testing Environment:

OS: MAC OS X 10.8.5 Ti SDK: 3.1.3 GA Ti CLI: 3.3.0 IOS simulator 7.0

Test Code

    
   
   Ti.UI.setBackgroundColor('#000');
   var win = Ti.UI.createWindow({
     backgroundColor: 'black',
     exitOnClose: true,
     fullscreen: false,
     title: 'TableView Demo'
   });
   
   // generate random number, used to make each row appear distinct for this example
   function randomInt(max){
     return Math.floor(Math.random() * max) + 1;
   }
   
   var IMG_BASE = 'https://github.com/appcelerator/titanium_mobile/raw/master/demos/KitchenSink/Resources/images/';
   var defaultFontSize = Ti.Platform.name === 'android' ? 16 : 14;
   
   var tableData = [];
   
   for (var i=1; i<=20; i++){
     var row = Ti.UI.createTableViewRow({
       className:'forumEvent', // used to improve table performance
       selectedBackgroundColor:'white',
       rowIndex:i, // custom property, useful for determining the row during events
       height:110
     });
     
     var imageAvatar = Ti.UI.createImageView({
       image: IMG_BASE + 'custom_tableview/user.png',
       left:10, top:5,
       width:50, height:50
     });
     row.add(imageAvatar);
     
     var labelUserName = Ti.UI.createLabel({
       color:'#576996',
       font:{fontFamily:'Arial', fontSize:defaultFontSize+6, fontWeight:'bold'},
       text:'Fred Smith ' + i,
       left:70, top: 6,
       width:200, height: 30
     });
     row.add(labelUserName);
     
     var labelDetails = Ti.UI.createLabel({
       color:'#222',
       font:{fontFamily:'Arial', fontSize:defaultFontSize+2, fontWeight:'normal'},
       text:'Replied to post with id ' + randomInt(1000) + '.',
       left:70, top:44,
       width:360
     });
     row.add(labelDetails);
       Ti.API.info('forumEvent'+ i);
     var imageCalendar = Ti.UI.createImageView({
       image:IMG_BASE + 'custom_tableview/eventsButton.png',
       left:70, bottom: 2,
       width:32, height: 32
     });
     row.add(imageCalendar);
     
     var labelDate = Ti.UI.createLabel({
       color:'#999',
       font:{fontFamily:'Arial', fontSize:defaultFontSize, fontWeight:'normal'},
       text:'on ' + randomInt(30) + ' Nov 2012',
       left:105, bottom:10,
       width:200, height:20
     });
     row.add(labelDate);
     
     tableData.push(row);
   }
   
   var view = Titanium.UI.createView({
      borderRadius:10,
      backgroundColor:'red',
      width:50,
      height:50
   });
   
   
   var tableView = Ti.UI.createTableView({
     backgroundColor: '#fff',
    	scrollable: true,
    	borderColor: '#111',
    	borderRadius: 5,
    	borderWidth: 1,
     	headerView: view,
     data:tableData
   });
   
   win.add(tableView);
   
   
   tableView.addEventListener('touchstart', function(e) {
       Ti.API.info('touch start');
       tStart = new Date();
   });
    
   tableView.addEventListener('touchend', function(e) {
       var tEnd = new Date(); 
           Ti.API.info('tableViewClickEvent');
   });
   
   win.open();

Step to reproduces

1. Create a new project 2. Paste test code in app.js 3. Now run on iOS simulator 4. Click on TableView row 5. And check studio console 6. Console will update in event Thanks

Nuno Costa 2013-12-06

JSON Source