How to catch click on category header with RadListView grouping function? (Nativescript)

问题

I had previously asked about a few items re: RadListView's grouping function here. I didn't get an answer, so wanted to try to focus on hopefully the simplest part: how do I catch the click event on a category header?

Normally, this would be pretty easy, like <Label text="group.category" (tap)="youClickedTheCategory()"></Label>.

But using the grouping function with RadListView, the category does not have an html entry, so how do I know if the user clicks on the category header instead of somewhere else in the group?

If example code is helpful:

html:

<GridLayout>
    <RadListView [items]="places" [groupingFunction]="myGroupingFunc">
        <ng-template let-place="item" >
            <StackLayout>
                <Label [text]="place.city"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts:

   public places = [
        {country: 'US', city: 'New York'}, 
        {country: 'US', city: 'Los Angeles'},     
        {country: 'Canada', city: 'Toronto'},
        {country: 'England', city: 'London'}
        ]

    constructor() {
    }

    myGroupingFunc(value) {
      return value.country;
    }

Result would be:

Canada
--Toronto

England
--London

US
--New York
--Los Angeles

Goal: know if the user clicks on the country category header (here, Canada , England, or US)--instead of the user clicking on the whole group.

Using Nativescript Angular (for iOS).

回答1:

I have found the answer, based on this github discussion here. The key is the tkGroupTemplate in RadListView. For NativeScript (and iOS--probably works for Android too), if you want to have a list that has category headers and entries below, and you want to be able to click on the category headers, the present method is to use tkGroupTemplate.

Here is an example:

$ tns plugin add nativescript-ui-listview

component html:

<GridLayout>
    <RadListView [items]="places" [groupingFunction]="myGroupingFunc">
        <ng-template tkListItemTemplate let-place="item">
            <StackLayout>
                <Label [text]="place.city" (tap)="listEntryTap(place.city)"></Label>
            </StackLayout>
        </ng-template>
        <ng-template tkGroupTemplate let-country="category">
            <StackLayout ios:height="25">
                <Label [text]="country" (tap)="headerTap(country)"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts: (component ts file)

public places = [
         {country: 'US', city: 'New York'}, 
         {country: 'US', city: 'Los Angeles' },     
         {country: 'Canada', city: 'Toronto'},
         {country: 'England', city: 'London'},
         {country: 'US', city: 'Chicago'},
         {country: 'Canada', city: 'Calgary'}      
]
...
constructor(){}
...
myGroupingFunc(value) {
   return value.country;
}

headerTap(country){
    console.log('you tapped this country header: ' + country)
}

listEntryTap(city){
    console.log('you tapped this city entry: ' + city)
}

module.ts: (module for the component--if using lazy loading of components. If not using lazy loading, this probably would go in the main app.module.ts file)

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

@NgModule({
  imports: [
  ...
   NativeScriptUIListViewModule 
  ]
...

And that should produce the following, with headers (countries) and entries (cities) separately clickable:

Canada
Toronto
Calgary

England
London

US
New York
Los Angeles
Chicago

It looks like this comes with some default formatting (the headers have a different background color automatically)--but you can override that with your own styles.

Without the ios:height="25"(or whatever height) some of the category headers go over the entries.

Otherwise, though, this seems to work for iOS and NativeScript 5.0+ (and, I assume, earlier versions too).

来源：https://stackoverflow.com/questions/53885975/how-to-catch-click-on-category-header-with-radlistview-grouping-function-nativ

标签

nativescript