Search code examples
appcelerator-titaniumappcelerator-alloy

Titanium Alloy ListView Custom Template Click Not Working


I'm using a custom template with views inside on a ListView, but what happens is that the click do not work. I tried to disable touchEnabled on all views inside and still nothing.

In the example below and in the attachment that I am including, there are two ListViews, one with a template with Views inside, and another ListView with a template with no Views inside.

Tested on emulator iOS 10.0.0

[index.xml]
<Alloy>
<Window class="container" layout="vertical">
    <Label text="Click is not working on a template with views inside (tested iOS 10.0.0)" top="30"/>
    <ListView id="list1" defaultItemTemplate="temp1" height="200" allowsSelection="false" separatorColor="transparent" top="10" onItemClick="testClick">
        <Templates>
            <ItemTemplate name="temp1" onClick="testClick">
                <View backgroundColor="blue">
                    <View backgroundColor="red" width="60%" height="90%">
                        <Label bindId="label1"/>
                    </View>
                </View>
            </ItemTemplate>
        </Templates>
        <ListSection headerTitle="Click DON'T WORK!" fontSize="12">
            <ListItem label1:text="01" />
            <ListItem label1:text="02" />
            <ListItem label1:text="03" />
        </ListSection>
    </ListView>
    <ListView id="list2" defaultItemTemplate="temp2" height="200" allowsSelection="false" separatorColor="transparent">
        <Templates>
            <ItemTemplate name="temp2" onClick="testClick" >
                <View backgroundColor="cyan">
                </View>
            </ItemTemplate>
        </Templates>
        <ListSection headerTitle="Click WORKS!">
            <ListItem />
            <ListItem />
            <ListItem />
        </ListSection>
    </ListView>
</Window>

[index.js]
function testClick() {
 alert('CLICK');
}

$.index.open();

Download the project if you need: https://www.dropbox.com/s/t3h6mchsb0e5bdh/ListViewBugTemplateClick.zip?dl=0


Solution

  • You need to use onItemclick the C is lowercase, and it should work but remove this onClick<ItemTemplate name="temp1" onClick="testClick">

    <ListView id="list1" defaultItemTemplate="temp1" height="200" separatorColor="transparent" top="10" onItemclick="testClick">
                <Templates>
                    <ItemTemplate name="temp1">
                        <View backgroundColor="blue">
                            <View backgroundColor="red" width="60%" height="90%">
                                <Label bindId="label1"/>
                            </View>
                        </View>
                    </ItemTemplate>
                </Templates>
                <ListSection headerTitle="Click DON'T WORK!" fontSize="12">
                    <ListItem label1:text="01" label1:touchEnabled="false" label1:touchable="false" />
                    <ListItem label1:text="02"/>
                    <ListItem label1:text="03" />
                </ListSection>
            </ListView>