Row Count with Titanium in CrossPlatform Application

Introduction:-
We generally use table view API in titanium to display data in row manner but there might be a scenario where we need to take care about the number of rows. So here I will be describing different ways to count number of rows and sections present in table view.

Description:-
Sometime we might get data from some external API or any other source that needs to be bind with a table where we are unaware about the number of rows that are present in the API response. So let’s create a situation for a table view where we will get the number of rows and section defined for those rows using Alloy with Titanium. Lets have a window where we will have a table view with some static rows.

So in order to do so lets, take a view called index.xml and its controller called index.js.

Index.xml

<Alloy>
<Window backgroundColor="white">
<TableView id="tbl" onClick="showRowNumber">
<TableViewRow title="Row 1"</TableViewRow>
<TableViewRow title="Row 2"</TableViewRow>
<TableViewRow title="Row 3"</TableViewRow>
<TableViewRow title="Row 4"</TableViewRow>
<TableViewRow title="Row 5"</TableViewRow>
</TableView>
</Window>
</Alloy>

On above code I have added an window on a view where I have created a table view with few custom rows. On table view tag I have assigned a property called ‘id’ which will be used to catch the same table from its controller and assigned an onClick event to handle any click action applied on any of its rows.
Now lets defined the function on controller which will be used to get number of rows. So for now our
controller is index.js.

Index.js

// Open the index view
$.index.open();

// Function to show row number
function showRowNumber(){

// Variable to hold row count
rowNumber = $.tbl.data[0].rowCount;

// Or rowNumber = $.tbl.data[0].rows.length;

alert("Total rows : " + rowNumber);
}

On above controller the first line will open the view on screen. Generally table rows are displayed under table section, as we did not defined any section on above table view so by default it takes all the rows under a single section. Now next we have defined a variable called ‘rowNumber’ which stores the total row count and displayed the result with an alert message.

Now table data can also be displayed under different category using its section property. Like we can categorized our rows under different section. So lets describe the way where we will find number of sections defined on a table to categorized its rows. To do so we need to modify our above view slightly.

<Alloy>
<Window backgroundColor="white">
<TableView id="tbl" onClick="showSectionNumber">
<TableViewSection headerTitle="Section 1">
<TableViewRow title="Row 1"</TableViewRow>
<TableViewRow title="Row 2"</TableViewRow>
<TableViewRow title="Row 3"</TableViewRow>
<TableViewRow title="Row 4"</TableViewRow>
<TableViewRow title="Row 5"</TableViewRow>
</TableViewSection>
<TableViewSection headerTitle="Section 2">
<TableViewRow title="Row 1"</TableViewRow>
<TableViewRow title="Row 2"</TableViewRow>
<TableViewRow title="Row 3"</TableViewRow>
<TableViewRow title="Row 4"</TableViewRow>
<TableViewRow title="Row 5"</TableViewRow>
</TableViewSection>
<TableViewSection headerTitle="Section 3">
<TableViewRow title="Row 1"</TableViewRow>
<TableViewRow title="Row 2"</TableViewRow>
<TableViewRow title="Row 3"</TableViewRow>
<TableViewRow title="Row 4"</TableViewRow>
<TableViewRow title="Row 5"</TableViewRow>
</TableViewSection>
</TableView>
</Window>
</Alloy>

Now on above view we have defined a table view with multiple rows categorized under different section. And changed the onClick function to show section number.

Let’s define the same function in its controller.

//Function to display total number of sections
function showSectionNumber(){
// Variable to hold section number.
sectionNumber = $.tbl.data.length;
alert("Total section : " + sectionNumber); }

The above function will get all the section and will display the total number of section defined in table
on an alert message. Now let me describe the way to calculate number of rows across all the section. For that let’s change the function a bit.

// Function to showTotalRowNumber
function showTotalRowNumber(){

// Variable to get all section
var allSection = $.tbl.data;

var sectionNumber = 0;
var totalRows = 0;

for(sectionNumber = 0; sectionNumber < allSection.length; sectionNumber++){
// Get rows for each section
totalRows += allSection[sectionNumber].rowCount;
}
alert("Total rows : " + totalRows); }

So on above function we have got the all sections within a variable called ‘allSection’ and looping through all the sections we got the number of rows under each section and added them on a variable called ‘totalRows’ and at the end of the loop, displayed the count on an alert message.

Summary:-
I have demonstrate the way to count number of section and total number of row without any section and also described the way to get all the rows defined under different categories in any table view using Alloy with Titanium.

Written ByRaju Mahato, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s