TableViewRow disable delete button on edit

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

I have a tableViewRow which is has the ability to change from position:

var row = Titanium.UI.createTableViewRow({
            backgroundImage: "./images/priority_row_background.png",
            backgroundColor: "transparent",
            selectedColor: "transparent",
            selectedBackgroundColor:"transparent",
            //title: title,
            hasDetail:false,
            moveable : true,
            editable:false,
            height:60
        });
Eventlistener:
edit.addEventListener('click', function()
{
    win.setRightNavButton(cancel);
    tableView.editing = true;
});
As I set "editable" to false I expected the delete button to dissapear when a row is edited, which it has. The delete button moves my labels more to the right so I wanted it to disappear, but now when a row is is edited the red delete button is gone, but the labels are still moved.:

Normal state: Normal state image

Edit state: Row when editing/moveable

As you can see the labels are being moved, what am I doing wrong? How would I make sure my labels are not being moved arround?

Kind regards, Vincent

— asked 2 years ago by vincent c
2 Comments
  • Need to see some actual code that builds up the rows as the problem will be the internal layout of those extra views.

    — commented 2 years ago by Malcolm Hollingsworth

  • Here is my code, edited to Nick Milners answer, but the problem still remains:

    for(var i=0; i < data.length; i++){
     
            var line_1 = data[i].line_1;
            var line_2 = data[i].line_2;
            var isChecked = data[i].isChecked;
            var line1Color = "#dadada";
            var line2Color = "#dadada";
     
            if(isChecked){
                 var line1Color = "#999";
                 var line2Color = "#006c8c";
            }
     
            var dataView = Titanium.UI.createView({
                width:"100%",
                height:"100%",
                left: 40,
                backgroundColor:"red"
            });
     
            var position = Titanium.UI.createLabel({
                text: i,
                height:40,
                left:23,
                top:5,
                font:{
                    fontWeight:'bold',
                    fontSize:24
                },
                color: "white",
                backgroundColor: "transparent",
                textAlign: "left",
                touchEnabled: false
            });
     
            var rowLabel = Titanium.UI.createLabel({
                text: line_1,
                height:40,
                left:80,
                top:-5,
                fontSize: 14,
                color: line1Color,
                textAlign: "left",
                touchEnabled: false
            });
     
            var rowLabel2 = Titanium.UI.createLabel({
                text: line_2,
                height:40,
                left:80,
                bottom:5,
                font:{
                    fontWeight:'bold',
                    fontSize:14
                },
                color: line2Color,
                textAlign: "left",
                touchEnabled: false
            });
     
            var row = Titanium.UI.createTableViewRow({
                backgroundImage: "./images/priority_row_background.png",
                backgroundColor: "transparent",
                selectedColor: "transparent",
                selectedBackgroundColor:"transparent",
                //title: title,
                hasDetail:false,
                moveable : true,
                editable:false,
                height:60
            });
     
            dataView.add(position);
            dataView.add(rowLabel);
            dataView.add(rowLabel2);
     
            row.add(dataView);
            rowData.push(row);
        }

    — commented 2 years ago by vincent c

2 Answers

Accepted Answer

Hi

Guessing you have not solved this yet and I just spotted it.

I have mocked up a quick test for you that replicates (simply though) your table and leaves the ledge edge and right edge in place when you use the edit button to move the rows. The circle background are not images you can swap this out yourself.

The key is to have a fixed with parent inside the row, using 100% or Ti.UI.FILL it adjusts the margins, fixing the width stops this.

var data = [
    { line_1: 'One', line_2: 'Red', isChecked: true },
    { line_1: 'Two', line_2: 'Green', isChecked: true },
    { line_1: 'Three', line_2: 'Blue', isChecked: false },
    { line_1: 'Four', line_2: 'Yellow', isChecked: false },
    { line_1: 'Five', line_2: 'Green', isChecked: true }
];
 
var rowData = [], i = 0;
 
function addRow(obj) {
    var row = Ti.UI.createTableViewRow({
        editable: false,
        height: 60,
        moveable: true,
        width: Ti.UI.FILL
    });
    var view = Ti.UI.createView({
        height: 50,
        width: 320
    });
    row.add(view);
    var lblPos = Ti.UI.createLabel({
        backgroundColor: '#006c8c',
        borderRadius: 22,
        color: '#fff',
        font: {
            fontSize: 24,
            fontWeight: 'bold'
        },
        height: 44,
        left: 10,
        text: obj.position,
        textAlign: 'center',
        width: 44
    });
    view.add(lblPos);
    var viewTitle = Ti.UI.createView({
        backgroundColor: '#fff',
        borderColor: '#999',
        borderRadius: 5,
        borderWidth: 1,
        height: Ti.UI.SIZE,
        layout: 'vertical',
        left: 64,
        width: 320 - 64 - 5
    });
    var lblLine1 = Ti.UI.createLabel({
        color: '#006c8c',
        font: {
            fontSize: 14,
            fontWeight: 'bold'
        },
        height: 22,
        left: 10,
        text: obj.line1,
        width: Ti.UI.SIZE
    });
    viewTitle.add(lblLine1);
    var lblLine2 = Ti.UI.createLabel({
        color: '#444',
        font: {
            fontSize: 14,
            fontWeight: 'normal'
        },
        height: 22,
        left: 10,
        text: obj.line2,
        width: Ti.UI.SIZE
    });
    viewTitle.add(lblLine2);
    view.add(viewTitle);
    return row;
};
 
for (i = 0; i < data.length; i++) {
    rowData.push(addRow({
        line1: data[i].line_1,
        line2: data[i].line_2,
        position: i.toString()
    }));
}
var tbl = Ti.UI.createTableView({
    data: rowData,
    height: Ti.UI.FILL,
    separatorStyle: Ti.UI.iPhone.TableViewSeparatorStyle.NONE,
    width: Ti.UI.FILL
});
win.add(tbl);
 
var btnCancel = Ti.UI.createButton({
    title: 'Cancel'
});
var btnEdit = Ti.UI.createButton({
    title: 'Edit'
});
btnCancel.addEventListener('click', function (e) {
    win.setRightNavButton(btnEdit);
    tbl.setEditing(false);
});
btnEdit.addEventListener('click', function (e) {
    win.setRightNavButton(btnCancel);
    tbl.setEditing(true);
});
win.setRightNavButton(btnEdit);
Tested and working on iOS.

— answered 2 years ago by Malcolm Hollingsworth
answer permalink
5 Comments
  • Did this answer your question?

    — commented 2 years ago by Malcolm Hollingsworth

  • Did you ever get this solved? Did this help?

    — commented 2 years ago by Malcolm Hollingsworth

  • I got it fixed with setting the width to 100% and leaving the left and right properties 0. So I guess your answer states the same. Thanks!

    — commented 2 years ago by vincent c

  • Show 2 more comments

Try adding your text to a view that you add to the row and make sure the left parameter of the view is indented by around 40px

— answered 2 years ago by Nick Milner
answer permalink
1 Comment
  • I tried but this does not work either, the view is being pushed. You can see the code above

    — commented 2 years ago by vincent c

Your Answer

Think you can help? Login to answer this question!