Quantcast
Viewing all articles
Browse latest Browse all 8068

Checkbox in ListView

In my app, i've used a customised checkbox in each row. The reason for using customised checkbox is - i can't add a border around default checkmark while i use Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK which(border) i needed mostly. For why in my customised checkbox, i've added a image view as tick sign to show toggling. but my click event listener for image view does not working and show a error while i clicked that. what should i change to listen click event of image view. Below is my code -

var win = Ti.UI.createWindow({
        backgroundColor : 'white'
    });
 
    var navWin = Ti.UI.iOS.createNavigationWindow({
        //modal: true,
        window : win
    });
 
    win.orientationModes = [Titanium.UI.PORTRAIT, Titanium.UI.UPSIDE_PORTRAIT, Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT];
 
    // Create a custom template that displays an image on the left,
    // then a title next to it with a subtitle below it.
 
    // ListView
    var checkBoxTemplate = {
 
        childTemplates : [{
            type : 'Ti.UI.Label', // Use a label
            bindId : 'time', // Bind ID for this label
            properties : {// Sets the Label.left property
                height : Ti.UI.SIZE,
                width : Ti.UI.SIZE,
                left : '10dp',
                top : '2dp'
            }
        }, {
            type : 'Ti.UI.Label', // Use a label
            bindId : 'horseName', // Bind ID for this label
            properties : {// Sets the Label.left property
                height : 25,
                width : Ti.UI.SIZE,
                left : '60dp',
                top : 0
            }
        }, {
            type : 'Ti.UI.Label', // Use a label
            bindId : 'values', // Bind ID for this label
            properties : {// Sets the Label.left property
                height : Ti.UI.SIZE,
                width : Ti.UI.SIZE,
                left : '60dp',
                top : '20dp'
            }
        }, {
            type : 'Ti.UI.ImageView', // Use a button
            bindId : 'checkbox', // Bind ID for this button
            properties : {// Sets several button properties
                done : false,
                width : '35dp',
                height : '35dp',
                right : '10dp',
                border : '2dp',
                borderRadius : '3dp',
                borderColor : '#36A9E1',
                image : ''
            },
        }],
        properties : {
            height : '70dp'
        }
    };
 
    var listView = Ti.UI.createListView({
        // Maps the plainTemplate object to the 'plain' style name
        height : Ti.UI.FILL,
        width : Ti.UI.FILL,
        templates : {
            'plain' : checkBoxTemplate
        },
        // Use the plain template, that is, the plainTemplate object defined earlier
        // for all data list items in this list view
        defaultItemTemplate : 'plain'
    });
 
    var data = [];
    for (var i = 0; i < 10; i++) {
        data.push({
            // Maps to the rowtitle component in the template
            // Sets the text property of the Label component
            time : {
                text : '8:00'
            },
            horseName : {
                text : 'Horse'
            },
            values : {
                text : 'a' + '\n' + 'b'
            },
            checkbox : {
 
            },
            // Sets the regular list data properties
            properties : {
                itemId : i + 1,
                accessoryType : Ti.UI.LIST_ACCESSORY_TYPE_NONE
            }
        });
    }
 
    var section = Ti.UI.createListSection({
        items : data
    });
 
    listView.sections = [section];
    listView.addEventListener('itemclick', function(e) {
        if (e.itemId) {//if(e.bindId == 'horseName' || e.bindId == 'time')
            var item = e.section.getItemAt(e.itemIndex);
            if (e.bindId === 'checkbox') {
                if (e.properties.done === true) {// Here is the main problem
                    e.properties.done = false;
                    e.properties.image = '';
                } else {
                    e.properties.done = true;
                    e.properties.image = 'images/Tick.png';
                }
            }
            /*var item = e.section.getItemAt(e.itemIndex);
             if (item.properties.accessoryType == Ti.UI.LIST_ACCESSORY_TYPE_NONE) {
             item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK;
             } else {
             item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_NONE;
             }
             e.section.updateItemAt(e.itemIndex, item);*/
        }
 
    });
    win.add(listView);
    navWin.open();
can i also add a border around the default check mark while i use "item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK" in any way? please help me out.

Viewing all articles
Browse latest Browse all 8068

Trending Articles