konstantinbueschel
4/28/2011 - 4:03 PM

Collapsable/Expandable Table View Rows in Titanium Mobile

Collapsable/Expandable Table View Rows in Titanium Mobile

var container = Ti.UI.createView({backgroundColor: "white", layout: "vertical"});
		
var layout = [
		
	{
		title: "Parent 1",
		isparent: true,
		opened: false,
		sub: [
			{
				title: "Child 1"
			},
			{
				title: "Child 2"
			}
		]
	},
	{
		title: "Parent 2",
		isparent: true,
		opened: false,
		sub: [
			{
				title: "Child 3"
			},
			{
				title: "Child 4"
			}
		]
	}

];
var tableView = Ti.UI.createTableView({
	style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
	top: 0,
	height: Ti.Platform.displayCaps.platformHeight,
	data: layout
});
		
		
tableView.addEventListener("click", function(e) {
	
	//Is this a parent cell?
	if(e.row.isparent) {
		
		//Is it opened?
		if(e.row.opened) {
			for(var i=e.row.sub.length; i > 0; i = i - 1) {
				tableView.deleteRow(e.index + i);
			}
			e.row.opened = false;
		}
				
		else {
			//Add teh children.
			var currentIndex = e.index;
			for(var i=0; i < e.row.sub.length; i++) {
				tableView.insertRowAfter(currentIndex, e.row.sub[i]);
				currentIndex++;
			}
			e.row.opened = true;
		}
				
	}
			
});
		
container.add(tableView);