TableViewRow disable delete button on edit

Question

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

2 Answers

Your Answer

Think you can help? Login to answer this question!

Need to see some actual code that builds up the rows as the problem will be the internal layout of those extra views.

— commented 6 months 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 6 months ago by vincent c

Accepted Answer

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.

Answer 2

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