Header duplication in RadListView with filteringFunction or/and sortingFunction

[vatsenko]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Tell us about the problem

I have got header duplication in the top and before footer when i add filteringFunction or/and sortingFunction. https://jmp.sh/ahmtLY0

Which platform(s) does your issue occur on?

iOs

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI plugin version: nativescript-ui-listview: 7.1.0
• CLI: 6.1.2
• Cross-platform modules: 6.1.2
• Runtime(s): tns run ios --bundle
• Video: https://jmp.sh/3mnkvS4

Please tell us how to recreate the issue in as much detail as possible.

package.json:

{
  "nativescript": {
    "id": "com.malthinae.nspicrights",
    "tns-android": {
      "version": "6.1.2"
    },
    "tns-ios": {
      "version": "6.1.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "lodash": "^4.17.15",
    "nativescript-angular": "~8.2.0",
    "nativescript-contacts": "^1.6.2",
    "nativescript-email": "^1.5.5",
    "nativescript-phone": "^1.4.0",
    "nativescript-plugin-firebase": "^10.0.1",
    "nativescript-theme-core": "~1.0.6",
    "nativescript-ui-listview": "^7.1.0",
    "nativescript-ui-sidedrawer": "^7.0.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.4.0",
    "tns-core-modules": "^6.1.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/cli": "^8.3.8",
    "@angular/compiler-cli": "~8.2.0",
    "@nativescript/schematics": "^0.7.2",
    "@ngtools/webpack": "~8.2.0",
    "nativescript-dev-webpack": "~1.2.0",
    "node-sass": "4.12.0",
    "typescript": "~3.5.3"
  },
  "gitHead": "1964ea9e8ca1a0518e0d6370781eedcf6c23db42",
  "readme": "NativeScript Application"
}

contacts-list.component.html

<GridLayout orientation="vertical" rows="auto,auto, auto,*">
    <ActivityIndicator row="0" *ngIf="isLoading" [busy]="isLoading" color="#898989" width="100%" height="100%">
    </ActivityIndicator>
    <RadListView #contactView id="contactView" [items]="contactItems" row="3" tkExampleTitle tkToggleNavButton
        selectionBehavior="None" (itemTap)="onLayoutTap($event)" pullToRefresh="true"
        (pullToRefreshInitiated)="onPullToRefresh($event)" 
(itemSwipeProgressStarted)="onSwipeCellStarted($event)"
        (itemSwipeProgressChanged)="onCellSwiping($event)" swipeActions="true" 
(scrolled)="onScroll($event)"
        (loaded)="onListLoaded($event)"
        [filteringFunction]="myFilteringFunc"
        [sortingFunction]="mySortingFunc">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label class="nameLabel" [text]="item.First_Name"></Label>
            </StackLayout>
        </ng-template>
        <ng-template tkListViewHeader>
            <Label text="This is list header" background="red" class="header"></Label>
        </ng-template>
        <ng-template tkListViewFooter>
            <Label text="This is list footer " background="green" class="footer"></Label>
        </ng-template>
    </RadListView>
</GridLayout>

---

I tried updateHeaderFooter method - but this not helps

import { ListViewEventData, ListViewScrollEventData, RadListView } from "nativescript-ui-listview";
import { RadListViewComponent } from "nativescript-ui-listview/angular";
...

 get mySortingFunc(): (item: any, otherItem: any) => number {
        return this._mySortingFunc;
 }
get myFilteringFunc(): (item: any) => any {
        return this._myFilteringFunc;
}
...
 public onListLoaded(args){
        const listView = <RadListView>args.object;
       listView.updateHeaderFooter();     
   }

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

[tsonevn]

HI @vatsenko, I tested your case with our sample application, however, I was unable to recreate the case. Can you send us a demo app while using {N} Playground, where the problem can be reproduced?

[vatsenko]

https://play.nativescript.org/?template=play-ng&id=cm94Rs&v=3

[tsonevn]

HI @vatsenko, Thank you for the attached project. I was able to recreate the problem. I will mark this as a bug and we will investigate the case further. Also reproducible with the example here.

[stefalda]

I confirm the problem is still there... :-(

[mm-spiio]

This is still an issue! Why would sorting affect anything else than the data-items? Does anyone have a fix?

[cjohn001]

+1