How to add programmatically row to TableView in appcelerator - 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?

Answer 1

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