Display custom message in nativescript radlistview filtering

Question

I managed to add a TextField which filters a RadListView as the user types. My problem is that am trying to show a "No results found" message when nothing matches the user search. Am filtering based on names and date.

Here is my TextField code.

<GridLayout class="page page-content custom_font_family m-5" rows="50, *">      


    <StackLayout class="input-field" row="0">
        <TextField 
                   hint="search..." 
                   [(ngModel)]='searchPaymentsList' 
                   secure="false"
                   returnKeyType="done" 
                   (textChange)="onTextChanged($event)"
                   autocorrect="false"
                   autocapitalizationType="none"
                   focus="onFocus"
                   blur="onBlur"
                   class="input input-border" 
                   color="navy" 
                   textFieldHintColor="#bfbfbf"></TextField>
    </StackLayout>

    <GridLayout tkExampleTitle tkToggleNavButton row="1"  rows="*">

        <RadListView [items]="getWmRDataItems" loadOnDemandMode="Auto" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" [filteringFunction]="myFilteringFunc" #myListView row="0" selectionBehavior="None" (itemSwipeProgressEnded)="onSwipeCellFinished($event)"
        (itemSwipeProgressStarted)="onSwipeCellStarted($event)" (itemSwipeProgressChanged)="onCellSwiping($event)" swipeActions="true">
            <ng-template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">

                <GridLayout class="list-group-item p-y-10 m-y-2 t-17 p-x-5 listItemStackLayout" rows="*, *, *, *, *, *" columns="130, *" [class.odd]="odd" [class.even]="even">

                      <Label row="0" col="0" text='Date:' class="font-weight-bold"></Label>
                      <Label row="0" col="1" [text]='item.wmr_date | date: "d-M-y"' textWrap="true"></Label>

                      <Label row="1" col="0" text='Tenants Id:' class="font-weight-bold"></Label>
                      <Label row="1" col="1" [text]='item.tenant_id' textWrap="true"></Label>

                      <Label row="2" col="0" text='Names:' class="font-weight-bold"></Label>
                      <Label row="2" col="1" [text]='item.tenant_names' textWrap="true"></Label>

                      <Label row="3" col="0" text='Reading:' class="font-weight-bold"></Label>
                      <Label row="3" col="1" [text]='item.wm_reading' textWrap="true"></Label>                    

                      <Label row="4" col="0" text='Amount Used:' class="font-weight-bold"></Label>
                      <Label row="4" col="1" [text]='item.wmr_consumed'  textWrap="true"></Label>   

                      <Label row="5" col="0" text='Amount Owed:' class="font-weight-bold"></Label>
                      <Label row="5" col="1" [text]='item.wmr_unit_cost * item.wmr_consumed | currency:"UG ":"Ug. ": "3.1-1"' textWrap="true"></Label>          

                </GridLayout>

            </ng-template>



    <!-- >> angular-listview-swipe-actions-template-html -->
        <GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="gridLayoutLayout p-y-2 t-17">
             <StackLayout id="mark-view" col="0" class="markViewStackLayout" (tap)="onEditSwipeClick($event)">
                <Label text="Edit" class="swipetemplateLabel text-white text-center" verticalAlignment="center" horizontalAlignment="center"></Label>
            </StackLayout>
            <StackLayout id="delete-view" col="2" class="deleteViewStackLayout" (tap)="onDeleteSwipeClick($event)">
                <Label text="Delete" class="swipetemplateLabel text-white text-center" verticalAlignment="center" horizontalAlignment="center"></Label>
            </StackLayout>
        </GridLayout>
    <!-- << angular-listview-swipe-actions-template-html -->

            <ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120"></ListViewLinearLayout>

            <div *tkIfIOS>
                <GridLayout *tkListLoadOnDemandTemplate class="loadOnDemandItemGridLayout">
                    <Label text="Load More" horizontalAlignment="center" verticalAlignment="center"></Label>
                </GridLayout>
            </div>

        </RadListView>

        <Label [visibility]="isItemVisible ? 'visible' : 'collapse' " class="text-center text-maroon" text="No results found"></Label>

    </GridLayout>

</GridLayout>

Here is my ts file. I have included mainly the part of the filtering.

    public wmrItems: ObservableArray<AddWmR>; 
    private _sourceDataItems: ObservableArray<AddWmR>;
    private layout: ListViewLinearLayout;

    public isItemVisible: string = "hidden";

    public searchPaymentsList: string;
    private _myFilteringFunc: (item: any) => any;
    @ViewChild("myListView") myListViewComponent: RadListViewComponent;

    get myFilteringFunc(): (item: any) => any {
        return this._myFilteringFunc;        
    }

    set myFilteringFunc(value: (item: any) => any) {
        this._myFilteringFunc = value; 
    }
   public onTextChanged(args) {
        let searchBar = <TextField>args.object;
        let listView = this.myListViewComponent.listView;
        let tolowercaseSearch = (searchBar.text).toLowerCase();

          this.myFilteringFunc = (item: AddWmR) => {
              var TenantNames = item.tenant_names.toLowerCase();
              return TenantNames.includes(tolowercaseSearch) || item.wmr_date.includes(searchBar.text);
          };

        if (!listView.filteringFunction) {
                listView.filteringFunction = this.myFilteringFunc;
        } else {
            listView.filteringFunction = undefined;

            this.isItemVisible = "visible"; //-----> not working

        }        
    } 

Any assistance is appreciated.

Answer 1

Faced this issue earlier and somehow managed to get it working by the follwoing instead of string make isItemVisible boolean and change the visibily based on that boolean. Also can you make sure that it is hitting the else loop?

<Label row="0" [visibility]="isItemVisible ? 'visible' : 'collapse'" class="text-center text-maroon" text="No results found"></Label>