Can't view the Tableviewrow while clicking the TableViewSection in titanium mobile application Can't view the Tableviewrow while clicking the TableViewSection in titanium mobile application javascript javascript

Can't view the Tableviewrow while clicking the TableViewSection in titanium mobile application


Your problem is real and your code seems a bit messy. I recommend you go for something more structured if you want to avoid spending HOURS to get the intended result. For example try to split your current code into multiple functions with a precise goal.

I'll try to help, using some pieces of code I used for my 2-level navigation menu. The logic is the same, but you'll have to add a third layer yourself.

Build menu

I assume in your xml, you have an empty TableView listening for tap (or click) event like this:
<TableView id="menuTable" onSingletap="onTap" />

During initialisation, you can call a function that will add 1st-level empty sections to your TableView.

To add new rows to these Sections, define _createRow which creates, populates and returns a Ti.UI.createTableViewRow depending on its type:

_createRow = function(data, type) {    var row = Ti.UI.createTableViewRow();    // populate row with some content here...    // Save some useful info in the row    row.listId = data.id;    row.subItems = data.subItems;    // What type of row are we creating ?    if (type === 'node') {        // Category        row.isParent = true;    }    if (type === 'child') {        // Customise row as a Product        row.backgroundColor = '#2a2a2a';    }    // There could be a third type for Sub-Category    return row;};

Then within each section you add a node row, this row is a parent that shows the Category and saves some information like its category-id, its type and its sub-Items (we'll use this later).

Handle click event (part 1)

If you get an event from the TableView, there are 3 possible cases:

  1. User clicked Category -> show/hide Sub-Category
  2. User clicked Sub-Category -> show/hide Product
  3. User clicked Product -> Navigate to Product

The related code is at the end of this post, as I'll first explain how to handle these cases.

'Open' Category section

If the Section was not opened already, we want to show what's inside. Let's define a function _openSection which will append a new Section just after the Category that was just clicked.Then, append to this Section as many elements as Sub-Categories you have.

function _openSection(index, parentRow) {    newSection = Ti.UI.createTableViewSection({        index: parentRow.section.index + 1    });    _.each(parentRow.subItems, function(item) {        newSection.add(_createRow(item, 'child'));    });    parentRow.opened = true;    // Could be animated on iOS:    $.menuTable.insertSectionAfter(index, newSection);    // Save which Section is currently open    currentOpen = newSection;};

'Close' Category section

Same goes the other way around: an already opened Section can be closed by taping it. Let's just remove the targeted Section from the TableView.

_closeSection = function(index, parentRow) {    currentOpen = null;    parentRow.opened = false;    var removed = $.menuTable.sections[index].rows.length;    $.menuTable.deleteSection(index);    return removed;};

Handle click event (part 2)

Now you've got everything you need to open and close a Category, here is the code to handle it:

_handleMenu = function(evt) {    var justify = false, openIndex;    // Clicked Section is already open    if (evt.row.opened) {        return _closeSection(evt.section.index + 1, evt.row);    } else {        /* Close currently opened Section, to have only one Category         * opened at the same time (simplifies the solution a lot)         */        if (currentOpen) {            parentSection = $.menuTable.sections[currentOpen.index - 1];            parentRow = parentSection.rows[0];            if (currentOpen.index <= evt.section.index) {                justify = true;            }            removed = _closeSection(parentSection.index + 1, parentRow);        }        // Set the index we'll be working with:        openIndex = evt.index;        // A Section was closed, change the index:        if (justify) {            openIndex -= removed;        }        // Workaround for parity on Android        if (OS_ANDROID) {            evt.row.section = evt.section;        }        return _openSection(openIndex, evt.row);    }};

Please try to get this code working with 2 layers, then implement the missing 3rd layer to reach your goal.
Don't hesitate asking questions if I was not clear enough ;)
Good luck!