Displaying custom tableview rows from a database

You must Login before you can answer or comment on any questions.

Titanium Mobile SDK version: 2.1.2 (08/24/12 14:46 ed7f777), iPhone SDK version: 5.1, Titanium Studio, build: 3.0.1.201210141904, OSX 10.7.5.

I am attempting to pull data from the local database and display it in a tableview that uses a custom row. I do not know how to get it to display properly. the way it is currently written will display one row with the data correctly displayed in it, but it also appears to be showing thousands of empty rows. My database right now only has 6 entries. I think my problem is because I have two while (rows.isValidRow()) statements. Would someone please show me the code to make this display correctly? Here is my current code:

//Setup the window
var win = Titanium.UI.currentWindow;
    win.barColor='#000000';
 
//install database
var db = Ti.Database.install('bcapool3.sqlite','distributor');
 
//Get data
var rows = db.execute('SELECT * FROM distributor');
 
// create table view
    var tableview = Ti.UI.createTableView({
        backgroundColor:'transparent',
        color: '#000000',
        top:80,
        height:'auto',
        left:80,
        right:80,
        bottom:120
});
 
 
function setData() {
 
while (rows.isValidRow())
{
    var dataArray = [];
    var row = Ti.UI.createTableViewRow({
        haschild: true,
        path: 'distributordetail.js'
    });
        var title = Ti.UI.createLabel({ 
        color:'#000000',
        height:32,
        left:5,
        top:2,
        font:{fontSize:'18dp',fontWeight:'bold' },
        backgroundColor:'transparent',
        text:'' + rows.fieldByName('distributor_name') + ''
        });
 
        var address = Ti.UI.createLabel({   
        color:'#000000',
        height:32,
        left:5,
        top:34,
        fontSize:'14dp',
        backgroundColor:'transparent',
        text:'' + rows.fieldByName('distributor_address') + ''
        });
 
        var distance = Ti.UI.createLabel({  
        color:'#000000',
        height:32,
        right: 10,
        top:34,
        fontSize:'12dp',
        backgroundColor:'transparent',
        text:'' + rows.fieldByName('distance') + ''
        }); 
 
        row.add(title);
        row.add(address);
        row.add(distance);
        tableview.add(row);
        row.className = 'distributorRow';
 
    while (rows.isValidRow())
    {
        dataArray.push(row);
        rows.next();    
    }
 
    // set the array to the tableView
    tableview.setData(dataArray);
}
}

1 Answer

Accepted Answer

function setData() {
 
var dataArray = [];
 
while (rows.isValidRow())
{
 
    var row = Ti.UI.createTableViewRow({
        haschild: true,
        path: 'distributordetail.js'
    });
        var title = Ti.UI.createLabel({ 
        color:'#000000',
        height:32,
        left:5,
        top:2,
        font:{fontSize:'18dp',fontWeight:'bold' },
        backgroundColor:'transparent',
        text:'' + rows.fieldByName('distributor_name') + ''
        });
 
        var address = Ti.UI.createLabel({   
        color:'#000000',
        height:32,
        left:5,
        top:34,
        fontSize:'14dp',
        backgroundColor:'transparent',
        text:'' + rows.fieldByName('distributor_address') + ''
        });
 
        var distance = Ti.UI.createLabel({  
        color:'#000000',
        height:32,
        right: 10,
        top:34,
        fontSize:'12dp',
        backgroundColor:'transparent',
        text:'' + rows.fieldByName('distance') + ''
        }); 
 
        row.add(title);
        row.add(address);
        row.add(distance);
        tableview.add(row);
        row.className = 'distributorRow';
 
        dataArray.push(row);
        rows.next();    
}
 
    // set the array to the tableView
    tableview.setData(dataArray);
}

— answered 8 months ago by Aaron Saunders
answer permalink
5 Comments
  • Aaron, thank you for your suggestion, but unfortunately it was one that I had tried previously. With your code, after a very long wait displays a background image that I have displaying on every other page in my app, but never even shows a table, much less display the data pulled from the database. It is very possible that I have left out a very important piece of code that you have assumed i have elsewhere.

    The code I gave was all of the code that is on the page starting from the beginning of the page. Here is the remainder of the code that is on the page, just in case something is there that is causing my problem:

    tableview.addEventListener('click', function(e)
    {
        if (e.rowData.path)
        {
            var win = Ti.UI.createWindow({
                url:e.rowData.path,
                title:e.rowData.title
            });
     
            var client = e.rowData.title;
            win.client = client;
            Ti.UI.currentTab.open(win);
        }
    });
    setData();
    win.add(tableview);
     
    (function updateOrientation() {
        if(Ti.UI.orientation == Ti.UI.LANDSCAPE_RIGHT || Ti.UI.orientation == Ti.UI.LANDSCAPE_LEFT){win.backgroundImage='images/PoolTableBackgroundLandscape.png';
            var sponsor = Ti.UI.createButton({bottom: 0, width: 1024, height:44, backgroundImage:'images/ford-Landscape.png'});
    win.add(sponsor);
    sponsor.addEventListener('click',function(e)
        {var win = Ti.UI.createWindow({url: 'sponsordetail.js', title:'McDermott Pool Cues'});
        Ti.UI.currentTab.open(win);});
        } else {win.backgroundImage='images/PoolTableBackgroundPortrait.png';
        var sponsor = Ti.UI.createButton({bottom: 0, width: 768, height:44, backgroundImage:'images/ford-Portrait.png'});
    win.add(sponsor);
    sponsor.addEventListener('click',function(e)
        {var win = Ti.UI.createWindow({url: 'sponsordetail.js', title:'McDermott Pool Cues'});
        Ti.UI.currentTab.open(win);});}})();
    Ti.Gesture.addEventListener('orientationchange', function (ev) {
        if (Ti.Gesture.isLandscape(ev.orientation)) {win.backgroundImage='images/PoolTableBackgroundLandscape.png';
        var sponsor = Ti.UI.createButton({bottom: 0, width: 1024, height:44, backgroundImage:'images/ford-Landscape.png'});
    win.add(sponsor);
    sponsor.addEventListener('click',function(e)
        {var win = Ti.UI.createWindow({url: 'sponsordetail.js', title:'McDermott Pool Cues'});
        Ti.UI.currentTab.open(win);});
        } else {
        win.backgroundImage='images/PoolTableBackgroundPortrait.png';
        var sponsor = Ti.UI.createButton({bottom: 0, width: 768, height:44, backgroundImage:'images/ford-Portrait.png'});
    win.add(sponsor);
    sponsor.addEventListener('click',function(e)
        {var win = Ti.UI.createWindow({url: 'sponsordetail.js', title:'McDermott Pool Cues'});
        Ti.UI.currentTab.open(win);});}});

    — commented 8 months ago by David Nevels

  • you are not adding the table to the window.... i thought it was just excluded on purpose but it is not in the code snippet you provided... it should be

    — commented 8 months ago by Aaron Saunders

  • Oh... I thought win.add(tableview); did that. Do I have to add it to the window sooner? I think I am getting more confused.

    — commented 8 months ago by David Nevels

  • Show 2 more comments

Your Answer

Think you can help? Login to answer this question!