CODEWITHSUNDEEP
listviewappceleratorappcelerator-titaniumappcelerator-alloy
rjcpereira
rjcpereira

Reputation: 953

Add controllers to ListView Template

I've a ListView, but I need to add cells to each ListItem, I never know how much cells I need to add, this is possible?

I can't add views to the ListItem inside the Template, I've id and bindId equals to 'row' on ListItem element.

The only other solution that I can think of is to have like 12 cells, and hide the ones that I don't need.

//widget.xml
<Alloy>
    <View id="widget">
        <ListView id="list" defaultItemTemplate="list">
            <Templates>
                <ItemTemplate name="list" bindId="row" id="row"/>
            </Templates>
            <ListSection/>
        </ListView>
    </View>
</Alloy>

I've an array with the bindId's to add to each cell:

//cell.js
$.title.bindId = args.cell;

//cell.xml
<Alloy>
    <View id="cell">
        <Label id="title"/>
    </View>
</Alloy>

I've 12 cells, with width set equals to 0, and I'm setting only the width on the columns that I'm using, the others remain hidden. This is my actual file:

<ListView id="list" defaultItemTemplate="item">
    <Templates>
        <ItemTemplate name="item" class="item" id="item" bindId="item">
            <View id="row" bindId="row">
                <View class="cell" bindId="cell1" id="cell1">
                    <View class="border left"/>
                    <Label class="title" bindId="title1" id="title1"/>
                    <View class="border right"/>
                    <View class="line"/>
                </View>
                ....
                <View class="cell" bindId="cell12" id="cell12">
                    <View class="border left"/>
                    <Label class="title" bindId="title12" id="title12"/>
                    <View class="border right"/>
                    <View class="line"/>
                </View>
            </View>
        </ItemTemplate>
    </Templates>
    <ListSection/>
</ListView>

This is part of my controller:

data.items = [];

for(var i = 0; i < 100; i++) if(data.list[i]) {

    var row = {
        properties:{
            searchableText:''
        }
    };

    for(var c in args.columns) {

        row.properties.searchableText += data.list[i][args.columns[c].alias]+' ';

        row['cell'+parseInt(parseInt(c)+1)] = {
            width:data.width
        };

        row['title'+parseInt(parseInt(c)+1)] = {
            text:data.list[i][args.columns[c].alias]
        };
    }

    data.items.push(row);
};

$.list.sections[0].setItems(data.items);

Upvotes: 0

Views: 582

Answers (1)

Fokke Zandbergen
Fokke Zandbergen

Reputation: 3866

I think what you're looking for is a UICollectionView for iOS or GridLayout for Android. You can use Marcel's module to use this in Titanium:

https://github.com/mpociot/TiCollectionView

If you really must use the ListView, then yes I think what you came up with is pretty much the only way.

Upvotes: 1

Related Questions