CODEWITHSUNDEEP
javascriptarraystitaniumelement
user2363025
user2363025

Reputation: 6505

Accessing custom rows of a TableView

I am pushing items to a data array and then adding these to a rowData array in order to create custom rows for a table. I need to know how to access these when a user clicks a specific row. I was previously using e.rowData, title etc. for accessing these elements when I had a basic table but now that it is a custom table, this isn't working. Don't worry about the parsing bit, that all works fine. All help appreciated!

data.push({

            title: items.item(i).getElementsByTagName("title").item(0).text,            
        leftImage: str.match(patt1) !== null ? str.match(patt1)[0] : 'image_news.png',
            dataToPass: items.item(i).getElementsByTagName("description").item(0).text,
            hasChild: true, 
            js:"external.js"
        });



    }

    var rowData=[];

    for(i=0;i<data.length;i++){
        var img= Titanium.UI.createImageView({
            image:data[i].leftImage,
            left:0,
            bottom:5,
            height: 100,
            width: 100
        });

        var bgBar=Titanium.UI.createView({
            height:110,
            width: "100%",
            bottom:0,
            left:0,
            backgroundColour: "#000",
            opacity: 0.6
        });

        var title=Titanium.UI.createLabel({
            text:data[i].title,
            color: 'black',
            left: 105
        });

        var row=Titanium.UI.createTableViewRow({
            height: "auto",
            hasChild: "true",
        js:"external.js",
        dataToPass: data[i].dataToPass
        });

        row.add(img);
        row.add(bgBar);
        row.add(title);



        rowData.push(row);
        console.log("row shiznick" + rowData);
    }


    tableView.setData(rowData);


tableView.addEventListener("click", function (e){
        console.log("HERE SOURCE.TITLE ------------------"+e.row.title);
        console.log("YOYOOYOYO------------"+e.source.title);
        console.log("IS THIS IT---------------"+e.children[0]);
        console.log("HERE IS THE SOURCE -----------------------------"+ e.source);
        console.log("HERE SOURCE.LEFTIMAGE REG EXP3 ------------------"+e.row.leftImage);
        console.log("HERE SOURCE.ClassName ------------------"+e.source.className);
        console.log("HERE HASCHILD ------------------"+e.rowData.hasChild);
        console.log("HERE DATATOPASS ------------------"+e.row.dataToPass);
});

Upvotes: 1

Views: 1579

Answers (3)

Benjamin Hermitte
Benjamin Hermitte

Reputation: 11

For accessing row's datas when user click on (even those which are not displayed in case of custom row for example), you can create an array, push your data in it during the loop and have an access to it with e.index. A simple code example : 

    var allDataArray = [];

        // loop through each item
        for ( var i = 0; i < items.length; i++ )
        {
            // Your source datas (custom row : id is not displayed in the rows)
            var sourceData = {
                id: items.item(i).getAttribute('id'),               
                title: items.item(i).getElementsByTagName("title").item(0).textContent,
            };

            // Saving data for each loop
            allDataArray.push(sourceData);
}

Then accessing the data 

itemsTable.addEventListener('click', function(e)
        {
            // Target the array with e.index offset
            var rowContent = allDataArray[e.index];
            Ti.API.info(rowContent); // will display every single data of the current row clicked
            alert(rowContent.id) // will display the "hidden" id which was not displayed in the UI

}

Upvotes: 1

Hernandcb
Hernandcb

Reputation: 539

Try using the event.taget function, something like:

$(".row").click(function(event) {
  var element = event.target;
  // Accessing element
});

Upvotes: -1

Josiah Hester
Josiah Hester

Reputation: 6095

There are two ways to set the rows of a table, you can create custom rows, or create JSON objects that have the attributes of the row object. Both cases have different ways of accessing the row, either the row object or the rowData object, from the docs:

When the row is created implicitly using a JavaScript dictionary object, use [the rowData property] rather than row to access any custom row properties. Here's an example of creating a row implicitly, which is not the recommended way.

In your example, since you did not create the row objects implicitly, but explicitly, you can access the clicked row from the row attribute of the event like this:

tableView.addEventListener("click", function(e){
    // Get the [TableViewRow](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TableViewRow) object
    var theRow = e.row;
    // Get the children
    var rowChildren = theRow.children;
    // Here are your objects in the row
    var imgInRow = rowChildren[0];
    var bgBarInRow = rowChildren[1];
    var titleInRow = rowChildren[2];
    // Here is the title
    var rowTitle = titleInRow.text;
});

Alternatively, in both cases, you could always use the index to look up the row object like this:

tableView.addEventListener("click", function(e){
    // Get the index of the row
    var ndx = e.index;
    // Get the row, this only works if you have not added sections
    var row = tableView.data[ndx];
});

Upvotes: 2

Related Questions