[Solved] Android List Items Disappearing

[Ericky]

Hello,

I've ran into a problem where when updating the list with search queries, the list items become invisible. It works in iOS, the problem only occurs in android.

Here is a video showing the problem: Video

 

If I remove the line <ListViewStaggeredLayout tkListViewLayout spanCount="1"></ListViewStaggeredLayout> from the code, it works fine, but is there any way I can use staggeredlayout with this setup? I have no idea why it isn't working properly.

 

.html

<GridLayout rows="*">
  <RadListView #radListView scrollPosition="Top" backgroundColor="transparent" (itemLoading)="onItemLoading($event)" #contactsView [items]="filteredItems">
    <ListViewStaggeredLayout tkListViewLayout spanCount="1"></ListViewStaggeredLayout>
    <ng-template tkListItemTemplate let-item="item" let-index="index">
      <StackLayout class="item" [class.first]="index === 0" (tap)="itemTapped(item)">
        <ink-list-user *ngIf="showContacts" [user]="item"></ink-list-user>
        <ink-list-event *ngIf="showEvents" [event]="item"></ink-list-event>
        <ink-list-connection *ngIf="showConnections" [connection]="item" [selected]="selected.indexOf(item) > -1"></ink-list-connection>
      </StackLayout>
    </ng-template>
  </RadListView>
</GridLayout>

 

in .component.ts

filteredItems: any[] = [];

  onItemLoading(args) {
    if (isIOS) {
      let color = new Color(0, 255, 0, 0);
      args.ios.backgroundView.backgroundColor = color.ios;
    }
  }

  onSearchChanged(query: string) { //called when text on textfield changes
      if (query.length) {
        this.localContactsService.filterContacts(query).subscribe(
          res => this.filteredItems = res.items,
          err => this._loadingError(err)
        );
      } else {
        this.filteredItems = [];
      }
  }

 

[Nikolay Tsonev]

Hi,
Thank you for reporting this issue.
I reviewed your case on my side and indeed there is a problem with updating the ListView UI while using ListViewStaggeredLayout on Android.

For your convenience, I logged new issue here, where you could keep track on the problem.

In the meantime in case you will order the items in one order, you could use some of the other available Layouts. For example:

• ListViewLinearLayout
• ListViewGridLayout

Let me know, whether this is applicable for you or if I could assist you further.
Regards,
nikolay.tsonev
Progress Telerik

[Ericky]

I achieved my goal by using ngIf with ListViewLinearLayout because the component needs to support different types of item views in my case and only one of them needs a known item height.

 

Thank you for responding.

[Nikolay Tsonev]

Hello ,

In our further research, we found that this issue is related to the native component and the layout, which we have exposed. In a fact, this issue is not directly connected to the UI for NativeScirpt plugin and it is related to the native Android part.

However, we found a solution how you could filter the items in the array and to be able to reload the ListView content properly. You could use ObservableArray and with its method splice to erase the content and to add the new data. For further help, you could review the attached sample project.

Regards,
nikolay.tsonev
Progress Telerik