Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Tableview overlay when filtered by a searchbar

Recently I've noticed that one my windows, which contained a tableview and a searchbar on top, wasn't working properly.

After some testing and source code commenting, I've realized that a tableview, if the backgroundColor is set to 'transparent', when searching/filtering the rows (with a SearchBar), titanium overlays the table with a new one (filtered), but since its set to be transparent, user sees both tables. The result can be seen on the image and video links below:

image
quick video

And here is the window source:

// set some variables to work with flickr
var api_key = '', // my key => CHANGE TO LMP'S
    user_id = '26142469%40N02'; // LMP flickr id

// reference to current window
var win = Titanium.UI.currentWindow;

// create table view
var search = Titanium.UI.createSearchBar({
    hintText: "Search album title",
    barColor:'#0055ad'
});
var tableview = Titanium.UI.createTableView({
    backgroundColor:'transparent',
    separatorStyle: Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
    search:search
});

var navActInd = Titanium.UI.createActivityIndicator();
navActInd.show();
win.setRightNavButton(navActInd);

var yql_query = 'select * from xml where url="http://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key='+api_key+'&user_id='+user_id+'"';
Ti.API.debug(yql_query);

Titanium.Yahoo.yql(yql_query, function(e)
{
    var images = [];
    var data = e.data;

    for (var i=0; i< data.rsp.photosets.photoset.length; i++) 
    {
        var photoset = data.rsp.photosets.photoset[i];
        // form the flickr url
        var url = 'http://farm' + photoset.farm + '.static.flickr.com/' + photoset.server + '/' + photoset.primary + '_' + photoset.secret + '_m.jpg';
        var row = Ti.UI.createTableViewRow({
            className: 'pictureRow',
            height: 60,
            selectedBackgroundColor:'#dddddd',
            backgroundImage: '../images/tableviewRow_bg.png',
            color:"transparent",
            title: photoset.title ? photoset.title : "Untitled", 
            visible:false,
            hasChild: photoset.photos ? true : false,
            photoset_id: photoset.id
        });

        var row_title = Ti.UI.createLabel({
            left:70,
            right:10,
            textAlign:'left',
            height:40,
            top: 5,
            shadowColor:'#555',
            shadowOffset:{x:1,y:1},
            color:'#fff',
            font:{fontWeight:'bold',fontSize:13},
            text:photoset.title ? photoset.title : "Untitled"
        });
        var count = Ti.UI.createLabel({
            left:70,
            right:10,
            textAlign:'left',
            height:10,
            bottom: 5,
            color: '#b40000',
            font:{fontSize:10},
            amount: photoset.photos,
            text: photoset.photos + " pictures"
        });
        var image;
        if (Titanium.Platform.name == 'android') 
        {
            // iphone moved to a single image property - android needs to do the same
            image = Ti.UI.createImageView({
                url : url,
                height:50,
                width:50,
                left:10,
                defaultImage:'../modules/ui/images/photoDefault.png'
            });

        }
        else
        {
            image = Ti.UI.createImageView({
                image : url,
                height:50,
                width:50,
                left:10,
                defaultImage:'../modules/ui/images/photoDefault.png'
            });

        }
        row.add(image);
        row.add(row_title);
        row.add(count);
        images.push(row);

        Titanium.API.debug('Set: '+i+' Title: '+row_title);
    }
    tableview.setData(images);
    navActInd.hide();
});


// create table view event listener
tableview.addEventListener('click', function(e)
{
    Titanium.API.debug(e.row.children[2].amount);

    if (e.row.children[2].amount > 0)
    {
        var winPictures = Titanium.UI.createWindow({
        title:'Party Pictures',
        backgroundColor:'#000',
        barColor:'#000',
        extraData: e,
        url:'pics_selected.js'
        });

        Titanium.UI.currentTab.open(winPictures, {animated:true});
    }
});

win.add(tableview);
— asked October 9th 2010 by Marco Ferreira
  • filter
  • iphone
  • mobile
  • search
  • searchbar
  • tableview
0 Comments

6 Answers

  • Any plan on sharing your solution? I'm having the same problem!

    — answered March 2nd 2011 by Carles Urena
    permalink
    0 Comments
  • I ran into this problem today, the solution is to set a backgroundImage or a backgroundColor of the table you're filtering instead of having it set to 'transparent' to avoid the overlay of tableView rows.

    — answered June 20th 2011 by Tony Pires
    permalink
    0 Comments
  • i had the same problem wen i used the tableview…

    i dont think it might be much of a help to you, However re-initializing will solve the probem.

    i've tried this and it worked…..

    i mean inside the for loop use:

    if(tableview){
    window.remove(tableview);

    tableview = Titanium.UI.createTableView({
            backgroundColor:'transparent',
            separatorStyle: Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
            search:search
        });
    }
    

    i hope this helps you !!!!!!

    — answered June 21st 2011 by prateek raj
    permalink
    1 Comment
    • hey, my apologies i meant to say wen ever you are generating a new table use the above code …..

      — commented June 21st 2011 by prateek raj
  • This appears to be a bug in the redrawing of TableViews with background images when filtered using a search bar.

    Setting the table view backgroundColor:'black' hides the mess, but is there a better workaround?

    — answered June 24th 2011 by Jeff Antram
    permalink
    1 Comment
    • Known Issue see here :- TIMOB-3289

      — commented June 24th 2011 by Jeff Antram
  • Ola Marco, can you send me an email at : armindodasilva at neuf dot fr
    Regards

    Armindo

    — answered December 16th 2010 by Armindo Da Silva
    permalink
    0 Comments
  • Ola Marco,

    any plan to share your "selected.js" file?

    Thanks

    Armindo

    — answered November 24th 2010 by Armindo Da Silva
    permalink
    4 Comments
    • Hey! Ping me @freenode IRC network. I'm Se7h

      — commented November 29th 2010 by Marco Ferreira
    • Hey Marco, I have tryed but I can't find you, I must admit also, that I don't use IRC, so it could be something not done correctly from my side.
      maybe you can send me an email at (armindodasilva at neuf dot fr)
      Regards

      Armindo

      — commented December 1st 2010 by Armindo Da Silva
    • Marco, no news from you :-(

      — commented December 15th 2010 by Armindo Da Silva
    • Hey sorry, been very busy with work (with titanium heh).
      Give it another shot on IRC or m at rco dot cc.
      Cheers

      — commented December 16th 2010 by Marco Ferreira
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.