Titanium Android - Tableview scrolling messes up contents

Question

What I am trying to accomplish is to implement a 2-state (dynamic) tableview, ie a tableview which will have a "normal" and an "editing" mode. By pressing the edit button rows will change into another view that will help me do some edits on them. By pressing again the button it will return back to its "normal" state.

The logic of my implementation is that I attach 2 different views on top of each and every tableview row and I show/hide them respectively altogether.

The problem is that when I scroll up/down the tableview row contents are messed up, others showing the normal mode, others the edit mode. Especially, when I first open the window and before any scrolling I press the edit button and then scroll down both "normal" and "edit" views are shown in one single row. In any case the scrolling seems not to let the update of the tableview happen correctly.

I am pretty sure that this is a common problem but I have not found a solution so far. I attach a sample of code which is fully working depicting the problem.

NAVBAR_HEIGHT = 44;
TABBAR_HEIGHT = 52;
TABLEVIEW_ROW_WIDTH = 248;
TABLEVIEW_ROW_HEIGHT = 57;

FONT_NAVBAR = {fontSize:'17dp', fontWeight:'bold'};
FONT_ROW_NAME = FONT_TEXT_BOLD = {fontSize:'14dp', fontWeight:'bold'};
FONT_ROW_NUM = FONT_TEXT_NORMAL = {fontSize:'14dp', fontWeight:'normal'};
FONT_TEXT_BOLD_LARGE = {fontSize:'17dp', fontWeight:'bold'};
FONT_TEXT_NORMAL_LARGE = {fontSize:'17dp', fontWeight:'normal'};
FONT_TEXT_NORMAL_EXTRA_LARGE = {fontSize:'28dp', fontWeight:'normal'};

var tabledata = [];

var self = Ti.UI.createWindow({
    navBarHidden:true
});

var navbar = Ti.UI.createView({
    width:Ti.UI.FILL, height:NAVBAR_HEIGHT,
    top:0,
    backgroundColor:'blue'
});
var title = Ti.UI.createLabel({
    width:Ti.UI.SIZE, height:Ti.UI.SIZE,
    text:title,
    font: FONT_NAVBAR,
    color:'white'
});
var btn_edit = Ti.UI.createButton({
    width:Ti.UI.SIZE, height:Ti.UI.SIZE,
    right:10,
    title:'Edit'
});
var btn_edit_done = Ti.UI.createButton({
    width:Ti.UI.SIZE, height:Ti.UI.SIZE,
    right:10,
    title:'Edit done',
    visible: false
});

var tableview = Ti.UI.createTableView({
    width:TABLEVIEW_ROW_WIDTH,
    top:isWidescreen() ? (NAVBAR_HEIGHT+40) : (NAVBAR_HEIGHT+50), 
    bottom:isWidescreen() ? 40+TABBAR_HEIGHT : 50+TABBAR_HEIGHT,
    backgroundColor:'transparent'
});

var footer = Ti.UI.createView({
    width:Ti.UI.FILL, height:TABBAR_HEIGHT,
    bottom:0,
    backgroundColor:'blue'
});

self.addEventListener('open', function(){
    navbar.add(title);
    navbar.add(btn_edit); navbar.add(btn_edit_done);
    self.add(navbar);
    self.add(tableview);
    self.add(footer);

    populateTable();
});

btn_edit.addEventListener('click', function(){
    btn_edit.hide();
    btn_edit_done.show();
    tableview.editing = (btn_edit.type=='delete_move') ? true : false;
    tableview.moving = true;

    if (tableview.data.length != 0)
        switch_tableview_content('edit');
});

btn_edit_done.addEventListener('click', function(){
    btn_edit_done.hide();
    btn_edit.show();
    tableview.editing = false;
    tableview.moving = false;

    if (tableview.data.length != 0)
        switch_tableview_content('edit_done');
});

function switch_tableview_content(type)
{
    var rows = tableview.data[0].rows;
    //alert('elements are ' + rows.length);
    //for (var i=0; i<rows.length; i++) alert(rows[i].type+":"+rows[i].place);

    switch (type)
    {
        case 'edit':
            Ti.App.edit_mode = true;
            for (var i=0; i<rows.length; i++)
            {
                //alert('hiding: ' + rows[i].type+":"+rows[i].place);
                rows[i].content_view.hide();
                rows[i].content_view_on_edit.show();
            }
            break;
        case 'edit_done':
            Ti.App.edit_mode = false;
            for (var i=0; i<rows.length; i++)
            {
                rows[i].content_view_on_edit.hide();
                rows[i].content_view.show();
            }
            break;
        default: //do nothing
    }
}

var zonesTable = [
        {type:"Zone 1", place:"ΜΕ ΚΑΘΥΣΤΕΡΗΣΗ"},
        {type:"Zone 2", place:"ΑΜΕΣΗ"},
        {type:"Zone 3", place:"ΑΜΕΣΗ"},
        {type:"Zone 4", place:"ΑΜΕΣΗ"},
        {type:"Zone 5", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
        {type:"Zone 6", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
        {type:"Zone 7", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
        {type:"Zone 8", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
        {type:"Zone 17", place:"Ραντάρ"},
        {type:"Zone 18", place:"Ραντάρ"},
        {type:"Zone 19", place:"Ραντάρ"},
        {type:"Zone 20", place:"Ραντάρ"},
        {type:"Zone 21", place:"Ραντάρ"},
        {type:"Zone 22", place:"Ραντάρ"},
        {type:"Zone 23", place:"Ραντάρ"},
        {type:"Zone 24", place:"Ραντάρ"}
];

function populateTable()
{
    tabledata = [];

    for (var i=0; i<zonesTable.length; i++)
    {
        var cur_type = zonesTable[i].type;
        var cur_place = zonesTable[i].place;

        var row = Ti.UI.createTableViewRow({
            width:TABLEVIEW_ROW_WIDTH, height:TABLEVIEW_ROW_HEIGHT,
            backgroundColor:'white',
            place:cur_place,
            type:cur_type
        });

        var content_view = Ti.UI.createView({
            width:Ti.UI.FILL, height:Ti.UI.SIZE,
            left:15, right:15
        });
        var state_icon = Ti.UI.createView({
            width:8, height:27,
            left:0,
            backgroundColor:'red'
        });
        var lbls_view = Ti.UI.createView({
            width:105, height:Ti.UI.SIZE,
            left:23,
            layout:'vertical'
        });
        var type_lbl = Ti.UI.createLabel({
            width:Ti.UI.SIZE, height:Ti.UI.SIZE,
            left:0,
            text:cur_type,
            font:FONT_TEXT_BOLD,
            color:'#414142'
        });
        var place_lbl = Ti.UI.createLabel({
            width:Ti.UI.SIZE, height:Ti.UI.SIZE,
            left:0,
            text:cur_place,
            font:FONT_TEXT_NORMAL,
            color:'#414142'
        });
        var btn_switch = Ti.UI.createButton({
            width:91, height:35,
            right:0,
            backgroundColor:'green'
        });

        lbls_view.add(type_lbl);
        lbls_view.add(place_lbl);
        content_view.add(state_icon);
        content_view.add(lbls_view);
        content_view.add(btn_switch);

        //add an invisible layer that will be shown only on editing mode
        var content_view_on_edit_outer = Ti.UI.createView({
            width:Ti.UI.FILL, height:Ti.UI.SIZE,
            touchEnabled:false,
            visible:false
        });
        var content_view_on_edit = Ti.UI.createView({
            width:Ti.UI.FILL, height:Ti.UI.SIZE,
            left:12, right:12,
            layout:'vertical'
        });

        var lbl_type_on_edit = Ti.UI.createLabel({
            width:180, height:25,
            left:5,
            text:cur_type,
            font:FONT_ROW_NAME,
            color:'#414142'
        });
        var lbl_place_on_edit = Ti.UI.createLabel({
            width:Ti.UI.SIZE, height:Ti.UI.SIZE,
            left:5,
            text:cur_place,
            font:FONT_TEXT_NORMAL,
            color:'#414142'
        });

        var btns_move = Ti.UI.createView({
            width:70, height:35,
            right:0
        });
        var btn_moveup = Ti.UI.createButton({
            width:35, height:35,
            left:0,
            backgroundColor:'#414142'
        });
        var btn_movedown = Ti.UI.createButton({
            width:35, height:35,
            right:0,
            backgroundColor:'#414142'
        });

        btns_move.add(btn_moveup);
        btns_move.add(btn_movedown);

        content_view_on_edit.add(lbl_type_on_edit);
        content_view_on_edit.add(lbl_place_on_edit);
        content_view_on_edit_outer.add(content_view_on_edit);
        content_view_on_edit_outer.add(btns_move);

        row.content_view = content_view;
        row.content_view_on_edit = content_view_on_edit_outer;
        row.add(content_view);
        row.add(content_view_on_edit_outer);

        tabledata.push(row);
    }
    tableview.setData([]);
    tableview.setData(tabledata);
}

function isWidescreen()
{
    var screenRatio = Ti.Platform.displayCaps.platformWidth / Ti.Platform.displayCaps.platformHeight;
    return ( screenRatio <= 0.57);
}

self.open();

Application type: mobile Platform: Android Titanium SDK: 3.2.3.GA Titanium Studio: build 3.2.3.201404181442

Answer 1

For anyone who may be interested the proposed solution here helped me a lot.

In short, you have to include tableview inside a scrollview where contentHeight attribute is defined. Not quite elegant coding but it works.