html tag in a row

Accepted Answer

You are going to have to provide some actual code as you could have tried to achieve your goal in many ways.

Keep in mind that adding HTML to a tableViewRow is not supported. The label can accept HTML, but only a limited sub-set. Adding a webView to a tableViewRow is not sensible due to the significant extra overhead of resources required.

You should consider using custom rows and build your layout using actual views, labels, imageViews and buttons.

— answered May 26th 2013 by Malcolm Hollingsworth
permalink

9 Comments

OK, so now I understand that I should avoid using HTML.
So can I add a view to the row? and can I add buttons, textarea,icons to the view?
I tried the following:

     function create_button_1()
     {
      var title="Add another option";
      var image="/images/android/add.png";
      var button= Titanium.UI.createButton({title: title, image: image ,height:60,left:'5%', top:15,width:'80%'});

      button.addEventListener('click', function(_e) 
      {
       edit_table.appendRow(createRow(get_edit_line(++n_options)));
      });    
      return button;
     };

     function create_button_2()
     {
      return Titanium.UI.createButton({title:"Next >>",height:60,left:'5%',top:90,width:'80%',backgroundDisabledColor:"Add another option",enable:false});
     }

     var view = Titanium.UI.createView({width:'90%'});
     var butt_1=create_button_1();
     var butt_2=create_button_2();
     view.add(butt_1);
     view.add(butt_2);

     edit_table = Ti.UI.createTableView({
         backgroundColor: 'transparent',
         left:'5%',top:200,width:'90%',
         fotterView: view
    });

But I did not see the buttons blow the table?

— commented May 26th 2013 by Shlomo Aran

This should give you an idea, the logic here is you have a function that actually builds a row that contains all the objects you need and that is added to an array of rows. You add a single event listener that detects what was clicked and allows you to handle that as you require.

var addRow = function (o) {
    var obj = o || {};
    var row = Ti.UI.createTableView({
        backgroundColor: '#fff',
        data: obj,
        height: Ti.UI.SIZE,
        id: 'row',
        width: Ti.UI.FILL
    });
    var lbl = Ti.UI.createLabel({
        color: '#000',
        font: {
            fontSize: 18
        },
        height: Ti.UI.SIZE,
        id: 'lbl',
        left: 10,
        width: Ti.UI.SIZE
    });
    row.add(lbl);
    var btn = Ti.UI.createButton({
        id: 'btn',
        right: 10,
        title: 'Press'
    });
    row.add(btn);
    return row;
};
var data = [
    { title: 'One' },
    { title: 'Two' },
    { title: 'Three' },
    { title: 'Four' },
    { title: 'Five' },
    { title: 'Six' },
    { title: 'Seven' }
];
var intRow = 0, intRows = data.length;
var row, rows = [];
for (intRow = 0; intRow < intRows; intRow = intRow + 1) {
    rows.push(addRow(data[intRow]));
}
var tbl = Ti.UI.createTableView({
    data: rows,
    height: Ti.UI.FILL,
    minRowHeight: 50,
    width: Ti.UI.FILL
});
tbl.addEventListener('click', function (e) {
    Ti.API.info('source id: ' + e.source.id);
    switch (e.source.id) {
    case 'btn':
        alert('data: ' + JSON.stringify(e.row.data));
        break;
    }
});
win.add(tbl);

— commented May 26th 2013 by Malcolm Hollingsworth

Small tweak, there were two problems in the code, fixed version below.

var addRow = function (o) {
    var obj = o || {};
    var row = Ti.UI.createTableViewRow({
        backgroundColor: '#fff',
        data: obj,
        height: Ti.UI.SIZE,
        id: 'row',
        width: Ti.UI.FILL
    });
    var lbl = Ti.UI.createLabel({
        color: '#000',
        font: {
            fontSize: 18
        },
        height: Ti.UI.SIZE,
        id: 'lbl',
        left: 10,
        text: obj.title || '',
        width: Ti.UI.SIZE
    });
    row.add(lbl);
    return row;
};

— commented May 26th 2013 by Malcolm Hollingsworth

Hi Malcolm,
Thank you very much.
But can you tell me why the my code didn't work?
Basically I created a view, and put it in the: footerView (I had a typo but I fixed it).

— commented May 26th 2013 by Shlomo Aran
Can you confirm the typo was fotterView? If not that is one place to start.

— commented May 26th 2013 by Malcolm Hollingsworth
Hi Malolm,
As I wrote, I fixed the typo.
It is now footerView: view
But it still doesn't work.

— commented May 26th 2013 by Shlomo Aran
view should have a width of Ti.UI.FILL as it will take up the width whatever you tell it to do, also try specify a height and use actual numbers rather than percentages for it.

— commented May 26th 2013 by Malcolm Hollingsworth

Hi Malcolm,
Thank you for helping me.
I tried something very similer, but I see an empty table (nothing is displayed).
I did not add the text, and icon because I cannot publish the product.

var MainTableView = function() {
    var tv = Ti.UI.createTableView({
        backgroundColor: 'transparent'    
    });

    function populateData() 
    {
     var results = [];
     for (var i in text)
     {
      var image_1=Titanium.UI.createImageView({url: Titanium.Filesystem.resourcesDirectory+'images/'+icons[i]+'.jpg',left: 5, top: 10,height: Ti.UI.SIZE, width: Ti.UI.FILL});
      var label_1=Titanium.UI.createLabel({text:title[i],left:'40',top:10,height: Ti.UI.SIZE, width: Ti.UI.FILL,color:'white',font:{fontFamily:"Arial",fontWeight:"Bold",fontSize:30}});
      var label_2=Titanium.UI.createLabel({text:text [i],left:'5', top:60,height: Ti.UI.SIZE, width: Ti.UI.FILL,color:'black',font:{fontFamily:"Arial",fontWeight:"Bold",fontSize:25}});
      var view  = Titanium.UI.createView({height:100});
      view.add(image_1);
      view.add(label_1);
      view.add(label_2);
      results[i]=view;
     }
     tv.setData(results);
    }

What can be the problem???

— commented May 26th 2013 by Shlomo Aran

Hi Malcolm,
Thank you.
I found my mistake.
It should be createTableViewRow and not createView.

— commented May 26th 2013 by Shlomo Aran

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

1 Answer

Accepted Answer