Grouping the Table View in Titanium Mobile

In my previous posts, you learned how to create a simple list using the Table View component of Titanium.

If you came to this post through Google or through other means, you can get the code for the previous post using the following git command.


$ git clone git@github.com:HugeAim/titanium-list-app.git
$ git checkout part2

Now, I want to show you how to group the list in that table view, given the data shown below

var data = [
	{title:'List Content 1', hasChild:true, toUrl:'window2.js'},
	{title:'List Content 2'},
	{title:'List Content 3'},
	{title:'List Content 4'}
];

By looking at the Kitchen Sink example as reference, the data can just be given a “header” attribute with the desired group’s label as value.

var data = [
	{title:'List Content 1', hasChild:true, toUrl:'window2.js',header:"Header 1"},
	{title:'List Content 2'},
	{title:'List Content 3',header:"Header 2"},
	{title:'List Content 4'}
];

This simple change will display a grouped list.

You may view the finished code through


$ git checkout part3

Part 1: Getting Started with Appcelerator Titanium
Part 2: Sliding Windows with Appcelerator Titanium
Part 3: Grouping the Table View in Titanium Mobile
Part 4: Add/Delete Items in the List with Titanium Mobile
Part 5: Using SQLite Database with Titanium Mobile
Part 6: Create the Database API in Appcelerator Titanium

Though English is my country's official language it is not my native tongue. If you find anything wrong with my phrases, or any incorrect information, write it out loud in the comments section. The world will be a bit better that way.
Tagged with: , ,
Posted in Javascript
0 comments on “Grouping the Table View in Titanium Mobile
2 Pings/Trackbacks for "Grouping the Table View in Titanium Mobile"
  1. [...] my previous posts, we discussed about creating a simple list [...]

  2. [...] 1: Getting Started with Appcelerator Titanium Part 2: Sliding Windows with Appcelerator Titanium Part 3: Grouping the Table View in Titanium Mobile Part 4: Add/Delete Items in the List with Titanium Mobile Part 5: Using SQLite Database with [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre user="" computer="" escaped="">