TableView click event not working

You must Login before you can answer or comment on any questions.

I am creating a TableView using a custom TableViewRows. In TableViewRows I have one image, Label and Button. I am handling the click event of the button and it is working fine. Now I want to handle the click event of the TableView I am using below code for add click event in the TableView

This is the code for create a TableView

var tableView = Ti.UI.createTableView({
        data : [], //I am adding data dynamic after window get focus.
        width : '100%',
        height : '90%',
        backgroundColor : '#fff',
        touchEnabled : false
});
 
tableView.addEventListener('click', function(e) {
    Ti.API.info('table row is clicked');
});
Here is a function which is creating customRows
function createCustomTableRow(product) {
    Ti.API.info('createCustomTableRow called with product ' + product.name);
    var tableRow = Ti.UI.createTableViewRow({
        hasDetail : true,
        rowData : product
    });
 
    var imgProduct = Ti.UI.createImageView({
        width : '50dp',
        height : '50dp',
        image : '/images/laptop.jpg',
        left : '10dp',
        top : '10dp'
    });
 
    tableRow.add(imgProduct);
 
    var lblProductName = Ti.UI.createLabel({
        width : 'auto',
        height : 'auto',
        textAlign : 'left',
        color : '#000',
        left : '70dp',
        text : product.name,
        backgroundColor : '#f00'
    });
 
    var btnEditProduct = Ti.UI.createButton({
        width : '20%',
        height : 'auto',
        right : 10,
        title : 'Edit',
        image : '/images/edit.png'
    });
 
    btnEditProduct.addEventListener('click', function() {
        Ti.UI.createNotification({
            message : product.name,
            duration : Ti.UI.NOTIFICATION_DURATION_SHORT
        }).show();
 
        var addProduct = require('/tweetanium/ui/AddProduct');
        var addProdWin = new addProduct({
            mode : 'edit',
            prod_id : product.id
        });
        addProdWin.open({
            animated : true
        });
 
    });
 
    tableRow.add(lblProductName);
    tableRow.add(btnEditProduct);
 
    return tableRow;
}
Here is a code through which I am creating new rows and adding in the array and after then seeting in the TableView
productListWindow.addEventListener('focus', function() {
        Ti.API.info('Window is focus');
        var database = require('/tweetanium/database/Database');
        var data = database.getProducts();
        var rows1 = [];
 
        for (var i = 0, j = data.length; i < j; i++) {
            rows1.push(createCustomTableRow(data[i]));
        }
        tableView.setData(rows1);
    });
When I click on the object of the TableViewRow then the click of the TableView is calling but if I click outside of the object(means tableViewRow) the TableView's click is not calling.

Here is the image of custom TableViewRow

1 Answer

Accepted Answer

This is a known issue that is supposedly resolved in Ti SDK 3. See the JIRA tickets:

http://jira.appcelerator.org/browse/TIMOB-9867 http://jira.appcelerator.org/browse/TIMOB-10751

The workaround is to create a view that fills the row, then add the button to the view rather than directly to the row.

Your Answer

Think you can help? Login to answer this question!