How to make an accordion list with RadListView? (Nativescript)

Question

I am showing data with RadListView that has categories and subentries (Nativescript Angular, iOS).

I want to have the page load showing only the categories, and if the user clicks on any category, it toggles the entries (showing on click, then hiding on another click).

Is this possible?

I have not seen this successfully accomplished with the current version of pro ui and NS. I have not been able to get it to work myself.

Further details about other approaches are here.

There is an NS accordion plugin, but I think the goal here should be possible with straight code, especially because in my case I want to customize a fair bit.

I have run into two problems:

1) How do I isolate the click on category itself? The grouping function seems to "hide" the category title programmatically--I have not been able to know when the user clicks on it (instead of registering just clicks on the whole group) and have not been able to style that group header.

2) Once the category header is clicked, how do I show / hide the entries below? Normally, I would use something like visibility="{{isClicked ? 'visible' : 'collapsed'}}, but that is not working with RadListView.

Here is some sample code to give a better sense of the goal:

html:

<GridLayout >
    <RadListView [items]="places" selectionBehavior="Press" (itemSelected)="itemSelected($event)" [groupingFunction]="myGroupingFunc" >
        <ng-template tkListItemTemplate let-place="item" >
            <StackLayout>
                <Label [text]="place.city"></Label>
                 <Label [text]="place.people" ></Label> //NOTE: I have not yet determined how to show this second level data within RadListView. 
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts:

import { Component, OnInit, } from "@angular/core";
import { Router, } from "@angular/router";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadListView, ListViewEventData, } from "nativescript-ui-listview";

@Component({
    selector: "Sample",
    moduleId: module.id,
    templateUrl: "./sample.component.html",
})

export class SampleComponent implements OnInit  {

    public places = [
        {country: 'US', city: 'New York', people: [{name: 'Bill', age: 22}, {name: 'Suzy', age: 23} ] }, 
        {country: 'US', city: 'Los Angeles', people: [{name: 'Sarah', age: 21}, {name: 'Barb', age: 23} ] },     
        {country: 'Canada', city: 'Toronto', people: [{name: 'Fred', age: 30}, {name: 'Ted', age: 31} ] },
        {country: 'England', city: 'London', people: [{name: 'Jim', age: 22}, {name: 'Joe', age: 19} ] }
        ]

    constructor() {
    }

    myGroupingFunc(value) {
      return value.country;
    }

    itemSelected(args) {
       /***is there a way this can isolate the tap on country name?*****/
    }
}

Answer 1

To make the header entries clickable, you can use tkGroupTemplate with categories (<ng-template tkGroupTemplate let-category="category"> ), as further detailed in the answer here.

However, toggling show and hide entries is not currently supported in iOS with Nativescript. See further discussion here. From this discussion, it looks like you can show/hide entries. However, on iOS, the app will not shrink the area on hide or enlarge the area on show. The area will stay the same as it is when loaded, whether or not the entries are shown. It looks like Android does not have this limitation.

The nativescript accordion plugin provides some help for toggling, even though some features have yet to be ironed out. If anyone is desparate for an accordion on Nativescript iOS, that is probably the place to start.