Titanium Community Questions & Answer Archive

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

Setting TableViewSection background properties is not working

If you take the example code from the Appcelerator API Reference Guides for creating a table view with sections (see http://assets.appcelerator.com.s3.amazonaws.com/docs/API_UITableViewClass.pdf) and simply add the property backgroundColor to the section definition, it does not work. This is also the case for backgroundImage.

Why doesn't this work? The API Docs clearly show that TableViewSection has the properties for backgroundColor and backgroundImage. I've also tried border properties as well and they don't work. Are these broken? Is there a trick to get them to show up?

Here is the modified api reference guide code (only change is the background properties):

// app.js 
// Create a window
var myWindow = Titanium.UI.createWindow();

// Create a simple tab group and a tab; add the tab to the tab group 
var myTabGroup = Titanium.UI.createTabGroup(); 
var myTab = Titanium.UI.createTab({title:'Beverages', window:myWindow}); 

// Create the first table view section, a collection of hot beverages
var hotTableViewSection = Titanium.UI.createTableViewSection({
    headerTitle:'Hot beverages',
    backgroundColor:'red' // added
hotTableViewSection.add(Titanium.UI.createTableViewRow({title:'Hot chocolate'}));

// Create the second table view section, a collection of cold beverages 
var coldTableViewSection = Titanium.UI.createTableViewSection({
    headerTitle:'Cold beverages',
    backgroundColor:'blue' // added
coldTableViewSection.add(Titanium.UI.createTableViewRow({title:'Chocolate milk'})); 
coldTableViewSection.add(Titanium.UI.createTableViewRow({title:'Ice water'})); 

// Create a TableView; we'll add the row data later
var myTableView = Titanium.UI.createTableView({style:Titanium.UI.iPhone.TableViewStyle.GROUPED});

// Add the hot and cold sections to the TableView 
myTableView.setData([hotTableViewSection, coldTableViewSection]);

// Add an event listener 
myTableView.addEventListener('click', function(e) {
    alert('Click at index: '+e.index);// Report which item was clicked 
    myTableView.selectRow(e.index); // Show that choice as selected 

// Add the table to the window and open the tab group 

The backgroundColor & Image for TableView works, the problem here is for TableViewSection.

Is anyone else seeing this?

— asked September 13th 2010 by John Pataki
  • backgroundcolor
  • mobile
  • properties
  • tableviewsection

1 Answer

  • The documentation is not very reliable. It can generally only be used as a rough approximation of the functionality available.

    But you don't need a backgroundColor property on sections anyway - you can achieve the same effect by setting the same property on the rows in the section (and the section's headerView and footerView if applicable) or by setting the property on the table.

    — answered September 14th 2010 by James K
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.