RadListView can not update style automatically in the current view port


#1

Hi, I do not know if this is a bug in RadListview, see below template:

<RadListView  #myListView
            row="1" [items]="rssItems"
            visibility="{{loading ? 'collapse':'visible'}}"
            (itemTap)="onItemTap($event)"

            loadOnDemandMode="Auto"
            loadOnDemandBufferSize=2
            (loadMoreDataRequested)="onLoadMoreItemsRequested($event)"

            (itemSwipeProgressStarted)="onSwipeCellStarted($event)"
            swipeActions="{{ rssType=='qt' ? true:false}}"
            >
            <ng-template tkListItemTemplate let-item="item" let-odd="odd" let-even="even">
                <StackLayout class='itemBlock' [class.odd]="odd" [class.even]="even"  class="itemBlock">
                   
                    <DockLayout stretchLastChild="false">

                        <StackLayout dock="right"  orientation='horizontal' visibility="{{ rssType=='qt' ? 'visible':'hidden'}}">
                            <!-- favorite -->
                            <Label text="&#xf15f;" marginLeft="10" [visibility]="favorited(item)?'visible':'collapse'" class="material-icon favorite red"></Label>
                            <!-- favorite-outline -->
                            <Label text="&#xf15e;" marginLeft="10" [visibility]="favorited(item)?'collapse':'visible'" class="material-icon favorite"></Label>
                        </StackLayout>


                        <Label text= "{{item?item['title']:'' }}" class='title' textWrap="true"></Label>
                    </DockLayout>

                    <Label text= "{{item?item['subTitle']:''}}" textWrap="true" class="content"></Label>
                </StackLayout>
            </ng-template>
            <GridLayout *tkListItemSwipeTemplate columns="*, auto" class="gridLayoutLayout" >
                <GridLayout columns="*, *, *" col="1" id="right-stack" height="100%">

                    <StackLayout col="2" class="favoriteGridLayout" (tap)="onRightSwipeClick($event)" id="btnFavorite">
                        <Label text="Favorite" text="" class="swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
                    </StackLayout>
                </GridLayout>
            </GridLayout>
        </RadListView>

And in the view:

public onRightSwipeClick(args) {
            let index = this.listViewComponent.listView.items.indexOf(args.object.bindingContext);
            let uuid = this.rssItems[index].uuid;
            this.rssService.setItem(this.rssItems[index]);

            if(args.object.id=='btnFavorite'){
                this.rssService.favoriteItem(uuid, ()=>{
                    //update favorited items here
                    this._updateFavoritedItems();
                });
                console.log("Button clicked: " + args.object.id + " for item with index: " + index);
                this.listViewComponent.listView.notifySwipeToExecuteFinished();

            }
        }

        private _updateFavoritedItems(cb=null){
            console.log( '_updateFavoritedItems ');
            this.rssService.getAllMyFavoritedItemSimplified(this.rssType, items=>{
                console.log('favorited items are =>');
                console.log(JSON.stringify(items));
                this._favoritedItems = items;
                if(cb) cb();
            });
        }

public favorited(item:Item){
        let favorited:boolean = false;
        this._favoritedItems.forEach(favoritedItem=>{
            if(favoritedItem.uuid===item.uuid){
                favorited=true;
            }
        });
        return favorited;
    }
  1. So you can see in the template, I am using RadListView with ngTemplate, and then I am using favorited() method to decide if the item is favorited or not;
  2. then I am adding tap event to change item favorited status;
  3. Finally, just set the value.

I found in the template, below behavior is not happening immediately,

 <Label text="&#xf15f;" marginLeft="10" [visibility]="favorited(item)?'visible':'collapse'" class="material-icon favorite red"></Label>
                            <!-- favorite-outline -->
                            <Label text="&#xf15e;" marginLeft="10" [visibility]="favorited(item)?'collapse':'visible'" class="material-icon favorite"></Label>

Instead, you have to scroll the row out of the view port and then scroll back into the view port, then the favorited icon can appear.

hope to hear your suggestions


#2

Hi @xhe

try calling .refresh() on your listView object.
when you return a value like that, it is not considered as an observable.
so you have to manually do a refresh! :slight_smile:

Hope this helps.


#3

Thanks, I added this line:

this.listViewComponent.listView.items[index].refresh();

Now, the UI is updated immediately.

Thanks