Search code examples
titaniumtitanium-mobiletitanium-alloy

How to set different row height which is dynamically loaded

Hi guys I have situation, where I am loading table rows dynamically. The code that set table row is like:

var rows = [];
_.each(records, function(rec) {
        var row = Alloy.createController('myRow', rec).getView();
        rows.push(row);
    });
}

$.myaTable.setData(rows);

I have different value in each row. And I want to set row height to fit the texts. I tried to set the row height 

"TableViewRow": {
    height: Ti.UI.SIZE
}

I also changed the myRow.js like $.myRow.height = Ti.UI.SIZE.

But the problem - it is applying same height of to all rows. I show below in image:

Current Output:

The Out put

My need is:

My need

EDIT:

myRow.xml:

<TableViewRow id="ideaRow">
    <View id="content">
        <Label id="myTitle"></Label>
        <Label id="myDesc"></Label>
        <View id="control">
          <View id="Control1" />
          <View id="Control2" />
          <View id="Control3" />
        </View>
    </View>
<TableViewRow>

myRow.js:

$. myTitle.text = args.title
$. myDesc.text = args.description

Do you think any solutions exists in Titanium for this. Thanks in advance

Solution

  • I can't reproduce your exact problem with 3.3.0.GA.

    On iOS, the tableViewRows automatically fill up the whole screen without any TSS. This is because the Views inside your myRow.xml are set to Ti.UI.FILL by Titanium's default. The solution is to make sure you set height: Ti.UI.SIZE for your tags inside the myRow.xml