CODEWITHSUNDEEP
iostitaniumtitanium-mobileappcelerator
SAK
SAK

Reputation: 109

Can we add clickable button in Titanium Appcelerator listview

I want to add a clickable button in listview row. When I added a button in this it cannot work when this button is clicked. listview "itemclick" overlaps this. I even tried to add a label or an image but I cannot make them clickable.

function HomeDetail(KW, SF, SL, IT, SM) {

    var win = Ti.UI.createWindow({
        title : '',
        barColor : '#096C36',
        backgroundColor : "white",
        navBarHidden : true
    });
    loading._show({
        message : "Loading..."
    });
    var url = "http://findcourse.net/search_result.php?search=" + KW + SF + SL + IT + SM;

    var imgBack = Ti.UI.createImageView({
        top : 35,
        image : '/images/back.png',
        width : 15,
        height : 25,
        left : "2%",
        zIndex : 1
    });
    win.add(imgBack);
    imgBack.addEventListener('click', function(e) {
        win.close();
    });
    var imgfindCourse = Ti.UI.createImageView({
        top : 30,
        image : '/images/findcourseimg.png',
        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
        left : "7%"
    });
    win.add(imgfindCourse);
    var imgTopSearchMenu = Ti.UI.createImageView({
        top : 30,
        image : '/images/loginlogout.png',
        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
        right : "4%"
    });
    win.add(imgTopSearchMenu);
    var imgTopSearch = Ti.UI.createImageView({
        top : 40,
        ////backgroundColor:"black",
        image : '/images/serach.png',
        width : Ti.UI.SIZE,
        height : 20,
        right : "19%"
    });
    win.add(imgTopSearch);
    var tvLine = Ti.UI.createView({
        text : '',
        width : "90%",
        height : 1,
        top : 70,
        //backgroundColor : 'gray',
    });
    win.add(tvLine);

    // var imgBottom = Ti.UI.createImageView({
    // top : 315,
    // image : '/images/detailbottom.png',
    // width : "90%",
    // height : 150,
    // });
    // win.add(imgBottom);
    var viewBottom = Ti.UI.createView({
        bottom : 0,
        width : Ti.UI.FILL,
        height : 50,
        backgroundColor : '#075e9d',
    });
    win.add(viewBottom);

    // var tvShowMore = Ti.UI.createLabel({
    // text : 'SHOW MORE',
    // width : "50%",
    // height : 30,
    // top : 475,
    // textAlign : "center",
    // borderColor : "#dbdbdb",
    // color : "silver",
    // borderWidth : 1,
    // borderRadius : 2,
    // font : {
    // fontSize : 12,
    // fontWeight : "bold"
    // }
    // });
    // win.add(tvShowMore);
    // tvShowMore.addEventListener('click', function(e) {
    // });
    var imgMenu = Ti.UI.createImageView({
        image : '/images/menu.png',
        width : 30,
        height : 30,
        left : 135
    });
    viewBottom.add(imgMenu);
    var imgRefresh = Ti.UI.createImageView({
        image : '/images/refresh.png',
        width : 30,
        height : 30,
        left : 165
    });
    viewBottom.add(imgRefresh);
    var myTemplate = {
        childTemplates : [{
            type : 'Ti.UI.Label',
            bindId : 'heading',
            properties : {
                color : 'black',
                font : {
                    fontSize : 13,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"

                    //fontFamily : ''
                },
                top : 10,
                left : 20,
                height : 20,
                width : 180,
                //backgroundColor : "green"
            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'offered',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 32,
                left : 20,
                height : 10,
                width : Ti.UI.SIZE
            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'offereddetail',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 32,
                left : 93,
                height : 10,
                width : Ti.UI.SIZE,
                //backgroundColor : "magenta"
            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'level',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 45,
                left : 20,
                height : 10,
                width : Ti.UI.SIZE
            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'leveldetail',
            properties : {
                color : 'black',
                font : {
                    fontFamily : "Signika-Regular",

                    fontSize : 10,
                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 45,
                left : 93,
                height : 10,
                width : Ti.UI.SIZE,
                //backgroundColor : "orange"

            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'studyfield',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 59,
                left : 20,
                height : 10,
                width : Ti.UI.SIZE
            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'studyfielddetail',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 59,
                left : 93,
                height : 10,
                width : Ti.UI.SIZE,
                //backgroundColor : "blue"

            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'duration',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 73,
                left : 20,
                height : 10,
                width : Ti.UI.SIZE
            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'durationdetail',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 73,
                left : 93,
                height : 10,
                width : Ti.UI.SIZE,
                //backgroundColor : "pink"

            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'studymode',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 87,
                left : 20,
                height : 10,
                width : Ti.UI.SIZE
            }
        }, {
            type : 'Ti.UI.Label',
            bindId : 'studymodedetail',
            properties : {
                color : 'black',
                font : {
                    fontSize : 10,
                    fontFamily : "Signika-Regular",

                    fontWeight : "bold"
                    //fontFamily : ''
                },
                top : 87,
                left : 93,
                height : 10,
                width : Ti.UI.SIZE,
                //backgroundColor : "yellow"

            }
        }, {
            type : 'Ti.UI.ImageView',
            bindId : 'img',
            properties : {
                ////backgroundColor : '#5C87A9',
                top : 5,
                right : 100,
                height : 30,
                width : 30
            }

        }, {
            type : 'Ti.UI.ImageView',
            bindId : 'img1',
            properties : {
                ////backgroundColor : '#5C87A9',
                top : 0,
                right : 60,
                height : 30,
                width : 30
            }

        }, {
            type : 'Ti.UI.ImageView',
            bindId : 'imgLetter',
            properties : {
                backgroundColor : '#5C87A9',
                top : 7,
                right : 0,
                height : 20,
                width : 30
            }

        }, {
            type : 'Ti.UI.ImageView',
            bindId : 'imgadd',
            properties : {
                top : 7,
                right : 0,
                height : Ti.UI.FILL,
                width : Ti.UI.FILL
            }

        }],
    };
    //var data = ['Master of Business Law', 'Master of Business Law'];
    var sections = [];
    var result;
    var total;
    userdata.alldata(url, function(data) {

        loading._hide();
        for ( i = 0; i < data.length; i++) {
            total = data.length;
            Ti.API.info(i);
            if (data[0].result == "") {
                alert("No Result Found");
            }
            result = data;
            // else {
            var rowSection = Ti.UI.createListSection({
            });
            if (i == 3) {
                var rowDataSet = [{
                    imgadd : {
                        image : '/images/detailbottom.png'
                    },
                    properties : {
                        itemId : i,
                        height : 105,

                    }
                }];
            } else {
                //i - 1;
                var rowDataSet = [{
                    heading : {
                        text : data[i].result.course
                    },
                    offered : {
                        text : "OFFERED BY :"
                    },
                    offereddetail : {
                        text : data[i].result.offered_by
                    },
                    level : {
                        text : "LEVEL :"
                    },
                    leveldetail : {
                        text : data[i].result.study_level
                    },
                    studyfield : {
                        text : "STUDY FIELD :"
                    },
                    studyfielddetail : {
                        text : data[i].result.study_field
                    },
                    duration : {
                        text : "DURATION :"
                    },
                    durationdetail : {
                        text : data[i].result.duration
                    },
                    studymode : {
                        text : "STUDY MODE :"
                    },
                    studymodedetail : {
                        text : data[i].result.studyMode
                    },

                    img : {
                        image : '/images/more.png'
                    },
                    img1 : {
                        image : '/images/like.png'
                    },
                    imgLetter : {
                        image : '/images/letter.png'
                    },

                    properties : {
                        itemId : i,
                        height : 105,
                        //backgroundColor : 'white',
                        //accessoryType : Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE,

                    }
                }];
            }
            rowSection.setItems(rowDataSet);
            sections.push(rowSection);
            listView.setSections(sections);
            //}

        }
        var tvHello = Ti.UI.createLabel({
            text : '...' + total + ' courses found...',
            width : Ti.UI.SIZE,
            height : 20,
            top : 75,
            //backgroundColor : 'white',
            color : "#dbdbdb",
            font : {
                fontSize : 12,
                fontFamily : "Signika-Regular",
                fontWeight : "bold"
            }
        });
        win.add(tvHello);
    }, function(error) {
        loading._hide();
        alert("Time Out");
    });

    var listView = Ti.UI.createListView({
        templates : {
            'template' : myTemplate
        },
        defaultItemTemplate : 'template',
        separatorColor : 'black',
        //left : '',
        top : 95,
        width : "90%",
        height : Ti.UI.FILL,
        bottom : 50,
        //backgroundColor : 'white',
        visible : true

    });
    win.add(listView);
    listView.addEventListener("itemclick", function(e) {
        //Ti.API.info(url);
        alert(result[e.itemId].result);
        Ti.API.info(result[e.itemId].result.country);

        //alert("hellof");
        // var resultscreen = new ResultDetail();
        // navGroup.openWindow(resultscreen);
    });
    win.add(loading);

    return win;
}

module.exports = HomeDetail;

Upvotes: 0

Views: 1563

Answers (4)

Ross C
Ross C

Reputation: 21

None of these answers seemed to work for me or were incomplete. Define the click handler for the button (or whatever) in the ListView template.

For Alloy:

<ListView id="listviewResults" defaultItemTemplate="PhotoItem">

                <Templates>
                    <ItemTemplate name="MyTemplate">
                        <View class="viewPhotocontainer">
                            <ImageView bindId="bindPhoto" id="photo" defaultImage="/photo-default.jpg"/>
                        </View>
                        <View class="viewRowresult">
                            <Label bindId="bindNote" id="note">Add a note</Label>
                            <Button id="buttonNote" bindId="bindButtonNote" onClick="editNote" title="Edit Note"></Button>
                        </View>
                    </ItemTemplate>
                </Templates>
                <ListSection />
    </ListView>

Or old school

var plainTemplate = {
childTemplates: [
{
    type: 'Ti.UI.Label', // Use a label
    bindId: 'rowtitle', // Bind ID for this label
    properties: { // Sets the Label.left property
    left: '10dp'
    }
},
{
    type: 'Ti.UI.Button', // Use a button
    bindId: 'bindButtonNote', // Bind ID for this button
    properties: { // Sets several button properties
    width: '80dp',
    height: '30dp',
    right: '10dp',
    title: 'Edit Note'
    },
    events: { click : editNote} // Binds a callback to the button's click event
}
]
};

Note the onClick on the <Button>

function editNote(e){
    // Get some property of the button object
    var buttonTitle= e.source.title;
    // Or get the ListDataItem that contains the clicked button
    var item = e.section.getItemAt(e.itemIndex);
}

Found this info here: http://docs.appcelerator.com/platform/latest/#!/guide/ListViews

Upvotes: 2

farwayer
farwayer

Reputation: 4122

You can emulate clickable button in list view with:

listView.addEventListener('itemclick', function(e) {
    switch (e.bindId) {
      case 'myButton1BindId':
          // button1 action
      break;
      case 'myButton2BindId':
          // button2 action
      break;
      default:
          // non buttons click
   }
});

Of course it's for simple usage only cos touchstart, longpress, doubleclick etc. events are not avaliable.

Upvotes: 1

John Dalsgaard
John Dalsgaard

Reputation: 2807

As Robin mentions it is definitely a problem with the click handlers. I have started using a more generic click handler which gives you this kind of control - and improves performance. So basically set the handler on a very "top level" element (eg. win in your case) and examine the click event to decide what code to call.

This video by John Jardin describes the concept in detail.

/John

Upvotes: 0

Robin Ellerkmann
Robin Ellerkmann

Reputation: 2113

You have to bind the click event to the item. Initially it is bound to the listItem. Please have a look at the complete "List Items with an Item Template" example in the official docs.

In short you have to bind the clickEventListener like this:

var myTemplate = {
    //All the stuff you are doing at the moment.
    events: {click: toggleCheck }
};

function toggleCheck (e) {
    var item = section.getItemAt(e.itemIndex);
    //Manipulate your item or get whatever you need.
    section.updateItemAt(e.itemIndex, item);
}

[This is a short excerpt taken from the link given above]

Upvotes: 0

Related Questions