How to add programmatically row to TableView in appcelerator

Question

I'm building an app in appcelerator studio and I use alloy.

I want to insert a data in my TableView from my controller.

So this is my .xml class

<Alloy>
    <View class="container" >
        <TableView id="table" class="table">
            <TableViewSection id="table" >

            </TableViewSection>
        </TableView>

       <!-- <Button id="button" onClick="doClick"></Button>-->
    </View>
</Alloy>

This is the code of my controller

var view1 = Ti.UI.createView({
          left : 0,
          width : "35%",
          top: "30px"
      });
      var view2 = Ti.UI.createView({
          left : "35%",
          width : "25%",
          top: "30px"
      });
      var view3 = Ti.UI.createView({
          left : "60%",
          width : "25%",
          top: "30px"
      });
      var view4 = Ti.UI.createView({
          left : "85%",
          width : "15%",
          top: "30px"
      });

      view1.add(createHeader(L(lang+"social_history")));
      view2.add(createHeader(L(lang+"start_date")));
      view3.add(createHeader(L(lang+"end_date")));
      view4.add(createHeader(L(lang+"quantity_um")));

var row = Ti.UI.createTableViewRow();
var rowData = [];

row.add(view1);
row.add(view2);
row.add(view3);
row.add(view4);

rowData.push(row);

$.table.data=rowData;

for(var i=0; i<3; i++){
    var myRow = Ti.UI.createTableViewRow({
        id: 'overview',
        height: '47dip'
    });
    var myLabel = Ti.UI.createLabel({
        text: 'Overview',
        top: "0dip",
        height: "47dip",
        left: "5dip",
        right: "5dip",
        font: {
            fontSize: "14dp",
            fontWeight: "bold"
        }
    });

    myRow.add(myLabel);
    // this is working, but directly after displaying this row,
    // the collection is overwriting it again
    $.table.appendRow(myRow);
}




function createHeader(headerText){
   var heading = Ti.UI.createView({
      backgroundColor : "#0c7b84"
   });

   var headingText = $.UI.create("Label", {
       classes: 'headerTableLabel'
   });
   headingText.text = headerText;

   heading.add(headingText);

   return heading;
}

Now in the for cycle, I want to insert 3 row in my table, but if I try to running my application I can't see these other row.

How can I fixed it?

Ricardo Pereira Ricardo Pereira · Accepted Answer · 2016-06-16T16:28:25

You should try to use an controller instead of creating the row in JS since you are using Alloy, like:

row.xml

<Alloy>
    <TableViewRow id="row">
        <Label id="title"/>
        <ImageView id="icon"/>
    </TableViewRow>
</Alloy>

row.js

var args = arguments[0] || {};

$.row.myValue = args.title;

$.title.text = args.title;

$.icon.image = args.icon;

table.js

var data = [];

var yourArray = [
    {title:'england',icon:'en.png'},
    {title:'portugal',icon:'pt.png'},
    {title:'france',icon:'fr.png'}
];

for(var i in yourArray) data.push(Alloy.createController('row',{
    title:yourArray[i].title,
    icon:yourArray[i].icon
}).getView());

$.table.setData(data);

When you add the row (appendRow) the previous TableView data disappears? That's weird, you could do this as a workaround:

data.push(Alloy.createController('row',{
    title:'spain',
    icon:'es.png'
}).getView());

//data.length = 4
$.table.setData(data);

Get the row data:

$.table.addEventListener('click',function(e) {

    selected_index = e.index;
    selected_row = e.row;
    selected_my_value = e.row.myValue; //see the alloy row controller
});

API Docs: TableView

How to add programmatically row to TableView in appcelerator

1 Answers