Отобразить пользовательское сообщение в нативном сценарии фильтрации RadlistView - PullRequest
Новая
       61

Отобразить пользовательское сообщение в нативном сценарии фильтрации RadlistView

0 голосов
/ 09 октября 2018

Мне удалось добавить TextField, который фильтрует RadListView в качестве пользовательских типов.Моя проблема заключается в том, что я пытаюсь показать сообщение «Результаты не найдены», когда ничего не соответствует запросу пользователя.Я фильтрую по именам и дате.

Вот мой код TextField. 

<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>

Вот мой файл TS.Я включил в основном часть фильтрации. 

    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

        }        
    }

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 10 октября 2018

Столкнулся с этой проблемой ранее и каким-то образом сумел заставить ее работать следующим образом вместо строки make isItemVisible boolean и изменить видимость на основе этого логического значения.Также можете ли вы убедиться, что он попадает в цикл else?

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